Changing color of shapes from the "addDrawToolbar"

Question

I would like to be able to edit the color and opacity of the shapes drawn with the "addDrawToolbar" feature of leaflet.

I wrote this simple ShinyApp that, so far, only allows me to draw on the map:

library(shiny)
library(leaflet)
library(leaflet.extras)

ui = fluidPage(
  leafletOutput("map", height = 600)
)

server = function(input,output,session){
  output$map = renderLeaflet(
    leaflet()%>%
      addTiles(urlTemplate = "http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga")%>%
      addMeasure(
        primaryLengthUnit = "kilometers",
        secondaryAreaUnit = FALSE
        )%>%
      addDrawToolbar(
        targetGroup='draw',
        editOptions = editToolbarOptions(selectedPathOptions = selectedPathOptions()),
        circleOptions = filterNULL(list(shapeOptions = drawShapeOptions(),
                                        repeatMode = F,
                                        showRadius = T,
                                        metric = T,
                                        feet = F,
                                        nautic = F))) %>%
      setView(lat = 45, lng = 9, zoom = 3)
  )
}

shinyApp(ui,server)

Answer 1

Updated Answer -- Dynamic Changes

You can use addStyleEditor. I had to make a couple changes to your map height, so that the full style editor would be visible. It seems to disappear if the page is too short.

Code

library(shiny)
library(leaflet)
library(leaflet.extras)

ui = fluidPage(
  tags$style(type = "text/css", "#map {height: calc(100vh - 20px) !important;}"),
  leafletOutput("map")
)

server = function(input,output,session){
  output$map = renderLeaflet(
    leaflet()%>%
      addTiles(urlTemplate = "http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga")%>%
      addMeasure(
        primaryLengthUnit = "kilometers",
        secondaryAreaUnit = FALSE
      )%>%
      addDrawToolbar(
        targetGroup='draw',
        editOptions = editToolbarOptions(selectedPathOptions = selectedPathOptions()),
        circleOptions = filterNULL(list(shapeOptions = drawShapeOptions(),
                                        repeatMode = F,
                                        showRadius = T,
                                        metric = T,
                                        feet = F,
                                        nautic = F))) %>%
      setView(lat = 45, lng = 9, zoom = 3) %>%
      addStyleEditor(position = "topright", 
                     openOnLeafletDraw = TRUE)
  )
}

shinyApp(ui,server)

Original Answer -- Static Changes

Just add arguments to drawShapeOptions within circleOptions, like this:

shapeOptions = drawShapeOptions(color = "red",
                                fillOpacity = 1,
                                fillColor = "yellow",
                                weight = 20)

See the documentation for more options for changing opacity, color, fill, etc.

Full Example

library(shiny)
library(leaflet)
library(leaflet.extras)

ui = fluidPage(leafletOutput("map", height = 600))

server = function(input, output, session) {
  output$map = renderLeaflet(
    leaflet() %>%
      addTiles(urlTemplate = "http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga") %>%
      addMeasure(primaryLengthUnit = "kilometers",
                 secondaryAreaUnit = FALSE) %>%
      addDrawToolbar(targetGroup = 'draw',
                     editOptions = editToolbarOptions(selectedPathOptions = selectedPathOptions()),
                     circleOptions = filterNULL(list(shapeOptions = drawShapeOptions(color = "red",
                                                                                     fillOpacity = 1,
                                                                                     fillColor = "yellow",
                                                                                     weight = 20),
                                                     repeatMode = F,
                                                     showRadius = T,
                                                     metric = T,
                                                     feet = F,
                                                     nautic = F))) %>%
      setView(lat = 45, lng = 9, zoom = 3)
  )
}

shinyApp(ui, server)