leaflet-groupedlayercontrol using group layers in R

Question

I am interested in using leaflet-groupedlayercontrol within an Leaflet map created in R and have been following this gist. I can successfully add the JS plugin (as in this working example below), but my question is how do I refer to marker groups already created in R?

library(leaflet)
library(htmltools)
library(htmlwidgets)
library(dplyr)

#Download the JS and CSS     
urlf <- 'https://raw.githubusercontent.com/ismyrnow/leaflet-groupedlayercontrol/gh-pages/dist/%s'
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.js'), 'C:/Temp/L.Control.groupedlayer.js', mode="wb")
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.css'), 'C:/Temp/L.Control.groupedlayer.css', mode="wb")
    
#Add the dependency
    ctrlGrouped <- htmltools::htmlDependency(
      name = 'ctrlGrouped',
      version = "1.0.0",
      src = c(file = normalizePath('C:/Temp')),
      script = "L.Control.groupedlayer.js",
      stylesheet = "L.Control.groupedlayer.css"
    )
    registerPlugin <- function(map, plugin) {
      map$dependencies <- c(map$dependencies, list(plugin))
      map
    }
#create a basic map
map <- leaflet() %>%
        setView(-122.38, 47.56, zoom = 12) 
     
 #add the plugin and then tell it to do stuff within onRender()              
      map <- map %>% registerPlugin(ctrlGrouped) %>% 
 #I can create some points within onRender() but I want to refer to existing R objects if possible.   
        onRender("function(el, x) {
    var basemaps = {
      Grayscale: L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href=http://www.openstreetmap.org/copyright>OpenStreetMap</a>'
      })
    };
    basemaps.Grayscale.addTo(this);   // default base layer
    var groups = {
      highschool: new L.LayerGroup(),
      elementary: new L.LayerGroup()
    };
L.marker([47.577541, -122.3843482]).bindPopup('West Seattle HS').addTo(groups.highschool);
    L.marker([47.5661429, -122.3840636]).bindPopup('Seattle Lutheran HS').addTo(groups.highschool);      
    L.marker([47.581081, -122.3871535]).bindPopup('Lafayette ES').addTo(groups.elementary);
    L.marker([47.566556, -122.3964651]).bindPopup('Genesee Hill ES').addTo(groups.elementary);
    // Overlay layers are grouped
    var groupedOverlays = {
      'all schools': {
        'High School locations': groups.highschool,
        'Elementary locations': groups.elementary
      }
    };
        var options = {
      groupCheckboxes: true
        };
        L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
    }") 
      
map

Instead of making the all the markers within onRender(), I was hoping to refer existing R objects, use addLegend(), control what is visible initially, etc. If didn't want the grouped layer control so badly, the code would looks something more like this:

 map <- leaflet() %>%
      addCircles(lng =highschool$Longitude,lat=highschool$Latitude,weight = 1, radius = highschool$units*2 , color = ~pal(a_palette), popup = popup_hs, group="highschool" )%>%
      addCircles(lng =elementary$Longitude,lat=elementary$Latitude,weight = 1, radius = misc$units*2 , color = ~pal(a_palette), popup = popup_el, group="elementary" )%>%
      addLegend("bottomleft", colors = palette_color_RSEI ,group = "highschool",labels = c("Lowest ","","","Highest"),
                title = "Highschool size", opacity = 1) %>%
      addLegend("bottomleft", colors = a_palette ,group = "elementary",labels = c("Lower % of population", "", "","","","Higher % of population"),
                title = "Elementary size", opacity = .5) %>%
      addLayersControl(overlayGroups = c("highschool", "elementary"))%>%
      hideGroup(c(   "highschool"))

Any guidance would be greatly appreciated.

Answer 1

It also looks like you can reference R objects within htmlwidgets::onRender() within javascript for loop. Key for me was realizing that R objects have dot notation within onRender(). So for example, an R vector df$longitude is a JSON object as data.longitude within onRender().

Here is a example from my question, where I add 4 markers from an R object to a leaflet map within onRender()and then use leaflet add-on leaflet-groupedlayercontrol. My real world map had many more groups, so this may not be the most tidy approach.

library(leaflet)
library(dplyr)
library(htmlwidgets)


df<-tibble::tibble(lat= c(47.577541, 47.5661429,47.581081,47.566556),
                   lng = c(-122.3843482,-122.3840636,-122.3871535,-122.3964651),
                   name= c("West Seattle HS","Seattle Lutheran HS","Lafayette ES","Genesee Hill ES"),
                   grouping=c("groups.highschool","groups.highschool","groups.elementary","groups.elementary"))

urlf <- 'https://raw.githubusercontent.com/ismyrnow/leaflet-groupedlayercontrol/gh-pages/dist/%s'
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.js'), 'C:/Temp/L.Control.groupedlayer.js', mode="wb")
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.css'), 'C:/Temp/L.Control.groupedlayer.css', mode="wb")

ctrlGrouped <- htmltools::htmlDependency(
  name = 'ctrlGrouped',
  version = "1.0.0",
  # works in R and Shiny - download js/css files, then use this:
  src = c(file = normalizePath('C:/Temp')),
  script = "L.Control.groupedlayer.js",
  stylesheet = "L.Control.groupedlayer.css"
)
registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>% addTiles() %>%
  registerPlugin(ctrlGrouped) %>%
  fitBounds(min(df$lng), min(df$lat), max(df$lng), max(df$lat)) %>%
  onRender("
        function(el, x, data) {
         var groups = {
          highschool: new L.LayerGroup(),
          elementary: new L.LayerGroup()
        };
          for (var i = 0; i < data.lng.length; i++) {
            var label = JSON.stringify(data.name[i])
            var mygroup = data.grouping[i]
            var marker =  L.marker([data.lat[i], data.lng[i]]).bindPopup(label).addTo(eval(mygroup));
          }
        var groupedOverlays = {
          'all schools': {
            'High School locations': groups.highschool,
            'Elementary locations': groups.elementary
          }
        };
            var options = {
          groupCheckboxes: true,
          collapsed:false
            };
            L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
        }
      ", data = df)

Answer 2

It would look similar to this:

map <- leaflet() %>%
    addCircles(...) %>%
    addCircles(...) %>%
    addLegend(...) %>%
    addLegend(...) %>%
    registerPlugin(ctrlGrouped) %>%
    onRender("function(el, x) {
        var groupedOverlays = {
            'all schools': {
                'High School locations': groups.highschool,
                'Elementary locations': groups.elementary
            }
        };
        var options = {
            groupCheckboxes: true
        };
        L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
    }")

Answer 3

An example showing L.tileLayer(s), adapted from SEAnalyst answer.

library(leaflet)
library(dplyr)
library(htmlwidgets)

urlf <- 'https://raw.githubusercontent.com/ismyrnow/leaflet- 
   groupedlayercontrol/gh-pages/dist/%s'
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.js'), 
          'C:/grouped_layer_controls/L.Control.groupedlayer.js', mode="wb")
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.css'), 
          'C:/grouped_layer_controls/L.Control.groupedlayer.css', mode="wb")

ctrlGrouped <- htmltools::htmlDependency(
  name = 'ctrlGrouped',
  version = "1.0.0",
  # works in R and Shiny - download js/css files, then use this:
  src = c(file = normalizePath('C:/grouped_layer_controls')),
  script = "L.Control.groupedlayer.js",
  stylesheet = "L.Control.groupedlayer.css"
)

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>% 
  addTiles() %>%
  setView(lng = -122.3903184, lat = 47.5724059, zoom = 15) |>

  leaflet::addCircles(lng = -122.3903184,
                      lat = 47.5724059,
                      radius = 20,
                      fillColor = 'red',
                      fillOpacity = 1,
                      group = "r") |>

  leaflet::addCircles(lng = -122.390,
                      lat = 47.572,
                      radius = 20,
                      fillColor = 'blue',
                      fillOpacity = 1,
                      group = "b") |>


  leaflet::addLayersControl(baseGroups = c("r", "b"),
                            options = leaflet::layersControlOptions(collapsed = FALSE)) |>

  registerPlugin(ctrlGrouped) %>%

  htmlwidgets::onRender(

    "function(el, x, data) {

      var basemaps = {
        Stadia_AlidadeSmoothDark: 
      
 L.tileLayer( 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', 
{
      attribution: '&copy; <a href=\"\">BLAM-O</a>'
      }),
    Streets: 
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}),
    CartoDB_Positron: 
      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {})
  };

  var groupedOverlays = {
    \"Map Type\": {
      \"Stadia\": basemaps.Stadia_AlidadeSmoothDark,
      \"Streets\": basemaps.Streets,
      \"Positron\": basemaps.CartoDB_Positron
    }
  };

  var options = {
    groupCheckboxes: false,
    exclusiveGroups: [\"Map Type\"],
    collapsed:false
  };

  L.control.groupedLayers(null, groupedOverlays, options).addTo(this);

  basemaps.Streets.addTo(this);

}")