Is there an option to colour text in the layer options box?

Question

I need to change the colour of the text in the layer control box.

I know it's possible in Javascript but I need to do it in R. I think it may be something to do with the layersControlOptions function, but I cant find any documentation which shows all of the arguments for this.

addLayersControl(
    baseGroups = c("OSM (default)", "Toner", "Toner Lite"),
    overlayGroups = c("Quakes", "Outline"),
    options = layersControlOptions(collapsed = FALSE)
)

You can add css styling in shiny. How are you displaying the map - using shiny or other means? — Eli Berkow, Jul 01 '19 at 13:18

Eli Berkow · Accepted Answer · 2019-07-01T14:28:59.810

Using shiny you can do as follows:

library(shiny)
library(leaflet)

ui <- fluidPage(
    leafletOutput('map'),

    # Add custom CSS & Javascript;
    tags$style(".leaflet-control-layers-expanded{color: red}")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
      leaflet(quakes) %>% 
          addTiles() %>% 
          addMarkers() %>% 
          addLayersControl(
              baseGroups = c("OSM (default)", "Toner", "Toner Lite"),
              overlayGroups = c("Quakes", "Outline"),
              options = layersControlOptions(collapsed = FALSE)
          )
  })
}

shinyApp(ui, server)

The key line being tags$style(".leaflet-control-layers-expanded{color: red}"). Edit red as required using a Colour Name, Hex Colour Code, or RGB Colour Code.

Update

To display within the RStudio Viewer pane (i.e. without shiny) you can do the following:

library(leaflet)
library(htmltools)

m <- leaflet(quakes) %>% 
     addTiles() %>% 
     addMarkers() %>% 
     addLayersControl(
         baseGroups = c("OSM (default)", "Toner", "Toner Lite"),
         overlayGroups = c("Quakes", "Outline"),
         options = layersControlOptions(collapsed = FALSE)
     )

browsable(
    tagList(
        tags$style(".leaflet-control-layers-expanded{color: red}"),        
        m
    )
)

Adapted from here.

Further Update

Based on the need for different colours:

As an aside form.leaflet-control-layers-list is an alternative for .leaflet-control-layers-expanded

Within that there is a split between .leaflet-control-layers-base and .leaflet-control-layers-overlays as below:

library(shiny)
library(leaflet)

ui <- fluidPage(
    leafletOutput('map'),

    # Add custom CSS & Javascript;
    tags$style(".leaflet-control-layers-base{color: red}",
               ".leaflet-control-layers-overlays{color: blue}")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
      leaflet(quakes) %>% 
          addTiles() %>% 
          addMarkers() %>% 
          addLayersControl(
              baseGroups = c("OSM (default)", "Toner", "Toner Lite"),
              overlayGroups = c("Quakes", "Outline"),
              options = layersControlOptions(collapsed = FALSE)
          )
  })
}

shinyApp(ui, server)

Unfortunately, I have not found how to colour by specific lines as the css does not seem to differentiate.

Would this allow you to add different colours for different lines in the box, or in this example would the whole thing have to be in red? — JohnD91, Jul 01 '19 at 14:04
This example would make all text red. I can look into different colours if you'd like? Inspect element allows you to see the css. — Eli Berkow, Jul 01 '19 at 14:14
Different colours would be excellent if thats possible, thanks, this solution has got me most of the way there! — JohnD91, Jul 01 '19 at 14:18

Is there an option to colour text in the layer options box?

1 Answers1