Auto show/hide legends with support for LayerControl and groupOptions. Replaces #400.

Author: Bhaskar Karambelkar

R/legend.R

@@ -59,7 +59,7 @@
 #' @export
 addLegend <- function(
   map, position = c('topright', 'bottomright', 'bottomleft', 'topleft'),
-  pal, values, na.label = 'NA', bins = 7, colors, opacity = 0.5, labels,
+  pal, values, na.label = 'NA', bins = 7, colors, opacity = 0.5, labels = NULL,
   labFormat = labelFormat(), title = NULL, className = "info legend",
   layerId = NULL, group = NULL
 ) {

inst/examples/groupOptions.R

@@ -0,0 +1,31 @@
+library(leaflet)
+pal <- colorQuantile("YlOrRd", quakes$mag)
+
+leaflet(quakes) %>%
+  addProviderTiles(providers$Esri.OceanBasemap, group = "basic") %>%
+  addCircleMarkers(group = "detail", fillOpacity = 0.5,
+  radius = ~mag * 5, color = ~pal(mag), stroke = FALSE) %>%
+  addLegend(pal = pal, values = ~mag, group='detail', position='bottomleft')
+
+l <- leaflet(quakes) %>%
+  addProviderTiles(providers$Esri.OceanBasemap, group = "basic") %>%
+  addMarkers(data = quakes, group = "basic") %>%
+  addCircleMarkers(group = "detail", fillOpacity = 0.5,
+  radius = ~mag * 5, color = ~pal(mag), stroke = FALSE) %>%
+  addLegend(pal = pal, values = ~mag, group='detail', position='bottomleft')  %>%
+  groupOptions("detail", zoomLevels = 7:18) %>%
+  addControl(htmltools::HTML("Zoom Level"), position = "topright",
+             layerId = "zoom_display")
+
+# Just to show the zoom level
+htmlwidgets::onRender(l, jsCode = htmlwidgets::JS(
+  "function(el, x) {
+    debugger;
+    var map = this;
+    detailsControl = document.getElementById('zoom_display');
+    detailsControl.innerHTML = '<div>Zoom Level:'+map.getZoom()+'</div>';
+    map.on('zoomend', function(e) {
+       detailsControl = document.getElementById('zoom_display');
+       detailsControl.innerHTML = '<div>Zoom Level:'+map.getZoom()+'</div>';
+    });
+  }"))

inst/htmlwidgets/leaflet.js

@@ -92,6 +92,15 @@ var ControlStore = function () {
       }
       this._map.addControl(control);
     }
+  }, {
+    key: "get",
+    value: function get(id) {
+      var control = null;
+      if (this._controlsById[id]) {
+        control = this._controlsById[id];
+      }
+      return control;
+    }
   }, {
     key: "remove",
     value: function remove(id) {
@@ -1753,6 +1762,10 @@ methods.removeControl = function (layerId) {
   this.controls.remove(layerId);
 };
 
+methods.getControl = function (layerId) {
+  this.controls.get(layerId);
+};
+
 methods.clearControls = function () {
   this.controls.clear();
 };
@@ -1876,6 +1889,16 @@ methods.addLegend = function (options) {
           map.controls.remove(options.layerId);
         }
       });
+      map.on("groupadd", function (e) {
+        if (e.name === options.group) {
+          map.controls.add(legend, options.layerId);
+        }
+      });
+      map.on("groupremove", function (e) {
+        if (e.name === options.group) {
+          map.controls.remove(options.layerId);
+        }
+      });
     })();
   }
 
@@ -1968,9 +1991,15 @@ function setupShowHideGroupsOnZoom(map) {
   }
   map.leafletr._hasInitializedShowHideGroups = true;
 
-  function setVisibility(layer, visible) {
+  function setVisibility(layer, visible, group) {
     if (visible !== map.hasLayer(layer)) {
-      if (visible) map.addLayer(layer);else map.removeLayer(layer);
+      if (visible) {
+        map.addLayer(layer);
+        map.fire("groupadd", { "name": group, "layer": layer });
+      } else {
+        map.removeLayer(layer);
+        map.fire("groupremove", { "name": group, "layer": layer });
+      }
     }
   }
 
@@ -1981,7 +2010,7 @@ function setupShowHideGroupsOnZoom(map) {
     map.layerManager.getAllGroupNames().forEach(function (group) {
       var layer = map.layerManager.getLayerGroup(group, false);
       if (layer && typeof layer.zoomLevels !== "undefined") {
-        setVisibility(layer, layer.zoomLevels === true || layer.zoomLevels.indexOf(zoom) >= 0);
+        setVisibility(layer, layer.zoomLevels === true || layer.zoomLevels.indexOf(zoom) >= 0, group);
       }
     });
   }
@@ -2371,6 +2400,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 // pixel of the original image has some contribution to the downscaled image)
 // as opposed to a single-step downscaling which will discard a lot of data
 // (and with sparse images at small scales can give very surprising results).
+
 var Mipmapper = function () {
   function Mipmapper(img) {
     _classCallCheck(this, Mipmapper);

javascript/src/control-store.js

@@ -18,6 +18,14 @@ export default class ControlStore {
     this._map.addControl(control);
   }
 
+  get(id) {
+    let control = null;
+    if (this._controlsById[id]) {
+      control = this._controlsById[id];
+    }
+    return control;
+  }
+
   remove(id) {
     if (this._controlsById[id]) {
       let control = this._controlsById[id];
@@ -39,4 +47,4 @@ export default class ControlStore {
     }
     this._controlsById = {};
   }
-}
+}

javascript/src/methods.js

@@ -676,6 +676,10 @@ methods.removeControl = function(layerId) {
   this.controls.remove(layerId);
 };
 
+methods.getControl = function(layerId) {
+  this.controls.get(layerId);
+};
+
 methods.clearControls = function() {
   this.controls.clear();
 };
@@ -811,6 +815,16 @@ methods.addLegend = function(options) {
         map.controls.remove(options.layerId);
       }
     });
+    map.on("groupadd", function(e){
+      if(e.name === options.group) {
+        map.controls.add(legend, options.layerId);
+      }
+    });
+    map.on("groupremove", function(e){
+      if(e.name === options.group) {
+        map.controls.remove(options.layerId);
+      }
+    });
   }
 
   this.controls.add(legend, options.layerId);
@@ -897,12 +911,15 @@ function setupShowHideGroupsOnZoom(map) {
   }
   map.leafletr._hasInitializedShowHideGroups = true;
 
-  function setVisibility(layer, visible) {
+  function setVisibility(layer, visible, group) {
     if (visible !== map.hasLayer(layer)) {
-      if (visible)
+      if (visible) {
         map.addLayer(layer);
-      else
+        map.fire("groupadd", {"name": group, "layer": layer});
+      } else {
         map.removeLayer(layer);
+        map.fire("groupremove", {"name": group, "layer": layer});
+      }
     }
   }
 
@@ -915,7 +932,8 @@ function setupShowHideGroupsOnZoom(map) {
       let layer = map.layerManager.getLayerGroup(group, false);
       if (layer && typeof(layer.zoomLevels) !== "undefined") {
         setVisibility(layer,
-          layer.zoomLevels === true || layer.zoomLevels.indexOf(zoom) >= 0);
+          layer.zoomLevels === true || layer.zoomLevels.indexOf(zoom) >= 0,
+          group);
       }
     });
   }