Making layer-specific legends (hiding the legends of un-activated layers)

Question

I am making a map that needs to have seven base layers on it. There are so many legends that they cannot all fit on the screen- which makes it necessary to add a feature of the map that makes it so that the legends only appear when their base layer is activated.

So far, using htmlwidgets, I have gotten all of my legends to disappear, but I can't get the legend of the activated layer to become visible.

Here are the layer controls:

  addLayersControl(                                                #layer control 
    baseGroups = c("Parishes, plain",
                   "Unemployment rate", "Labor force participation rate", 
                   "FITAP, Parish","SNAP, Parish", "KCSP, Parish", 
                   "SNAP, zip"),
    overlayGroups = c("Community colleges", 
                      "Department of Corrections facilities", 
                      "Veterans Affairs Facilites"
    ),
    options = layersControlOptions(collapsed = FALSE)
  ) %>%
  showGroup("Parishes, plain")

I have tried using "hidegroup" for the legend groups, but I did not have luck with that. So far, using htmlwidgets, I have gotten all of my legends to disappear, but I can't get the legend of the activated layer to become visible.

edit- here is the format in which overlays and there legends are inserted

 addCircleMarkers(                                                             #DOH
    data = ldh_geo,
    color = col_var,
    stroke = TRUE, 
    weight = 0.5,
    opacity = 1,
    fillColor = misc_pal$vintageviolet,
    popup = ~paste(
      "<b>Area:</b>", `LWDA  AREA (Office is located)`, "<br>"
    ),
    radius = dot_size,
    fillOpacity = 0.8,
    group = "Department of Health Facilities",
    options = pathOptions(pane = "markerPane")
  ) %>% 
  addLegend(
      position = "topleft",
      colors = misc_pal$vintageviolet, 
      labels = "DOH",  # Add corresponding labels
      title = "DOH ffices",
      layerId = "overlaydoh",
      opacity = 0.8
  ) 

Answer 1

I got my shp data from CountriesSHP since I don't have the whole picture, I just use some senseless sample data. You need to add unique className to each legend. Then use htmlwidgets::onRender to manage legend visibility with jQuery. Specifically we can use an event listener for baselayerchanges.

library(leaflet)
library(htmlwidgets)
setwd(dirname(rstudioapi::getSourceEditorContext()$path)) # set the current script's location as working directory

# Sample data
parishes <- sf::st_read("ne_110m_admin_0_countries.shp")  # Replace with your data
unemployment <- c(5.2, 6.1, 4.8)  # Sample values
labor_force <- c(65.3, 62.1, 67.8)  # Sample values

leaflet() %>%
  addTiles() %>%
  # Base layers
  addPolygons(data = parishes, group = "Parishes, plain", 
              fillColor = "white", weight = 1) %>%
  addPolygons(data = parishes, group = "Unemployment rate",
              fillColor = ~colorNumeric("YlOrRd", unemployment)(unemployment),
              label = ~paste0(unemployment, "%")) %>%
  addPolygons(data = parishes, group = "Labor force participation rate",
              fillColor = ~colorNumeric("Blues", labor_force)(labor_force),
              label = ~paste0(labor_force, "%")) %>%
  
  # Add layer controls
  addLayersControl(
    baseGroups = c("Parishes, plain",
                   "Unemployment rate", "Labor force participation rate", 
                   "FITAP, Parish", "SNAP, Parish", "KCSP, Parish", 
                   "SNAP, zip"),
    overlayGroups = c("Community colleges", 
                      "Department of Corrections facilities", 
                      "Veterans Affairs Facilites"),
    options = layersControlOptions(collapsed = FALSE)
  ) %>%
  
  # Add legends with initial hidden state
  addLegend(position = "bottomright",
            pal = colorNumeric("YlOrRd", unemployment),
            values = unemployment,
            title = "Unemployment Rate",
            group = "legend_unemployment",
            className = "info legend unemployment") %>%
  addLegend(position = "bottomright",
            pal = colorNumeric("Blues", labor_force),
            values = labor_force,
            title = "Labor Force Participation",
            group = "legend_labor",
            className = "info legend labor") %>%
  # Add other legends similarly...
  
  # Hide all legends initially
  htmlwidgets::onRender("
    function(el, x) {
      var map = this;
      
      // Hide all legends initially
      $('.legend').hide();
      
      // Show/hide legends based on active base layer
      map.on('baselayerchange', function(e) {
        $('.legend').hide();
        if (e.name === 'Unemployment rate') {
          $('.legend.unemployment').show();
        } else if (e.name === 'Labor force participation rate') {
          $('.legend.labor').show();
        }
        // Add more conditions for other layers
      });
    }
  ")