How to assign a leaflet layer to a group, when that layer is created by an extension of leaflet?

Question

This R code creates a leaflet map with two base layers. The user can toggle between the two layers.

leaflet() |>
  addTiles(group = "group 1") |>
  addProviderTiles(provider = providers$CartoDB, group = "group 2") |>
  addLayersControl(baseGroups = c("group 1", "group 2"),
                   options = layersControlOptions(collapsed = F))

I want to create a map with two baselayers, but where one layer is created by a leaflet extension, not addProviderTiles().

This code successfully adds a layer to a leaflet map using the AllMaps plugin.

I'd like to assign the layer from AllMaps to a group, so that I can then use leaflet::addLayersControl() to toggle it on and off, as in the first example.

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

allMapsPlugin <- htmlDependency(
  "@allmaps_leaflet", "1.0.0",
  src = c(href = 'https://cdn.jsdelivr.net/npm/@allmaps/leaflet@1.0.0-beta.35/dist/bundled'), 
  script = 'allmaps-leaflet-1.9.umd.min.js'
)

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

leaflet() |> 
  addTiles() |> 
  setView(lat = 51.054450, lng = 3.724924, zoom = 13) |> 
  registerPlugin(allMapsPlugin) |> 
  onRender("function(el, x) {
              const annotationUrl = 'https://annotations.allmaps.org/manifests/8f9faeba73d67031'
              const warpedMapLayer = new L.WarpedMapLayer(annotationUrl)
                    .addTo(this)
            }")

How can I assign the layer from the AllMaps plugin to a group?

Answer 1

Here is one example, though not a very convenient one. I ended up with setting an opacity toggle on the overlay depending on which group is selected. A cleaner approach would be to add the layer to one group, however, using this, I currently have an issue with the visibility of the overlay which I was not able to mitigate.

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

allMapsPlugin <- htmlDependency(
  "@allmaps_leaflet", "1.0.0",
  src = c(href = 'https://cdn.jsdelivr.net/npm/@allmaps/leaflet@1.0.0-beta.35/dist/bundled'), 
  script = 'allmaps-leaflet-1.9.umd.min.js'
)

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

leaflet() |> 
  addTiles() |> 
  setView(lat = 51.054450, lng = 3.724924, zoom = 13) |> 
  addLayersControl(baseGroups = c("group 1", "group 2"),
                   options = layersControlOptions(collapsed = F)) |>
  registerPlugin(allMapsPlugin) |> 
  onRender("function(el, x) {
                var annotationUrl = 'https://annotations.allmaps.org/manifests/8f9faeba73d67031';
                var warpedMapLayer = new L.WarpedMapLayer(annotationUrl);
                
                // warpedMapLayer added to map
                warpedMapLayer.addTo(this);
                // set opacity to 0, here: in 'group 1 (initially displayed)' not visible
                warpedMapLayer.setOpacity(0.000001);
      
                // if the base layer is changed
                this.on('baselayerchange', function (e) {
                  // if the name is group 2
                  if (e.name === 'group 2') {
                    // visible
                    warpedMapLayer.setOpacity(1);
                  } else {
                    // invisible
                    warpedMapLayer.setOpacity(0.000001);
                  }
                });
             }")