Merge pull request #385 from rstudio/joe/feature/groupzoom

Ability to show/hide layer groups based on zoom level

Author: jcheng5

NAMESPACE

@@ -107,6 +107,7 @@ export(expandLimitsBbox)
 export(filterNULL)
 export(fitBounds)
 export(getMapData)
+export(groupOptions)
 export(hideGroup)
 export(highlightOptions)
 export(iconList)

NEWS

@@ -1,3 +1,9 @@
+leaflet 1.1.1
+--------------------------------------------------------------------------------
+
+* Add `groupOptions` parameter, currently the only option is letting you specify
+  zoom levels at which a group should be visible.
+
 leaflet 1.1.0
 --------------------------------------------------------------------------------
 

R/layers.R

@@ -98,6 +98,40 @@ hideGroup <- function(map, group) {
   invokeMethod(map, getMapData(map), 'hideGroup', group)
 }
 
+#' Set options on layer groups
+#'
+#' Change options on layer groups. Currently the only option is to control what
+#' zoom levels a layer group will be displayed at. The \code{zoomLevels} option
+#' is not compatible with \link[=addLayersControl]{layers control}; do not both
+#' assign a group to zoom levels and use it with \code{addLayersControl}.
+#'
+#' @param map the map to modify
+#' @param group character vector of one or more group names to set options on
+#' @param zoomLevels numeric vector of zoom levels at which group(s) should be
+#'   visible, or \code{TRUE} to display at all zoom levels
+#'
+#' @examples
+#' pal <- colorQuantile("YlOrRd", quakes$mag)
+#'
+#' leaflet() %>%
+#'   # Basic markers
+#'   addTiles(group = "basic") %>%
+#'   addMarkers(data = quakes, group = "basic") %>%
+#'   # When zoomed in, we'll show circles at the base of each marker whose
+#'   # radius and color reflect the magnitude
+#'   addProviderTiles(providers$Stamen.TonerLite, group = "detail") %>%
+#'   addCircleMarkers(data = quakes, group = "detail", fillOpacity = 0.5,
+#'     radius = ~mag * 5, color = ~pal(mag), stroke = FALSE) %>%
+#'   # Set the detail group to only appear when zoomed in
+#'   groupOptions("detail", zoomLevels = 7:18)
+#'
+#' @export
+groupOptions <- function(map, group, zoomLevels = NULL) {
+  invokeMethod(map, getMapData(map), 'setGroupOptions', group,
+    list(zoomLevels = zoomLevels)
+  )
+}
+
 #' Graphics elements and layers
 #'
 #' Add graphics elements and layers to the map widget.

inst/htmlwidgets/leaflet.js

@@ -1023,6 +1023,15 @@ var LayerManager = function () {
       });
       return result;
     }
+  }, {
+    key: "getAllGroupNames",
+    value: function getAllGroupNames() {
+      var result = [];
+      _jquery2.default.each(this._groupContainers, function (k, v) {
+        result.push(k);
+      });
+      return result;
+    }
   }, {
     key: "clearGroup",
     value: function clearGroup(group) {
@@ -1930,6 +1939,49 @@ methods.showGroup = function (group) {
   });
 };
 
+function setupShowHideGroupsOnZoom(map) {
+  if (map.leafletr._hasInitializedShowHideGroups) {
+    return;
+  }
+  map.leafletr._hasInitializedShowHideGroups = true;
+
+  function setVisibility(layer, visible) {
+    if (visible !== map.hasLayer(layer)) {
+      if (visible) map.addLayer(layer);else map.removeLayer(layer);
+    }
+  }
+
+  function showHideGroupsOnZoom() {
+    if (!map.layerManager) return;
+
+    var zoom = map.getZoom();
+    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);
+      }
+    });
+  }
+
+  map.showHideGroupsOnZoom = showHideGroupsOnZoom;
+  map.on("zoomend", showHideGroupsOnZoom);
+}
+
+methods.setGroupOptions = function (group, options) {
+  var _this8 = this;
+
+  _jquery2.default.each((0, _util.asArray)(group), function (i, g) {
+    var layer = _this8.layerManager.getLayerGroup(g, true);
+    // This slightly tortured check is because 0 is a valid value for zoomLevels
+    if (typeof options.zoomLevels !== "undefined" && options.zoomLevels !== null) {
+      layer.zoomLevels = (0, _util.asArray)(options.zoomLevels);
+    }
+  });
+
+  setupShowHideGroupsOnZoom(this);
+  this.showHideGroupsOnZoom();
+};
+
 methods.addRasterImage = function (uri, bounds, opacity, attribution, layerId, group) {
   // uri is a data URI containing an image. We want to paint this image as a
   // layer at (top-left) bounds[0] to (bottom-right) bounds[1].
@@ -2213,7 +2265,7 @@ methods.removeMeasure = function () {
 };
 
 methods.addSelect = function (ctGroup) {
-  var _this8 = this;
+  var _this9 = this;
 
   methods.removeSelect.call(this);
 
@@ -2224,42 +2276,42 @@ methods.addSelect = function (ctGroup) {
       title: "Make a selection",
       onClick: function onClick(btn, map) {
         btn.state("select-active");
-        _this8._locationFilter = new _leaflet2.default.LocationFilter2();
+        _this9._locationFilter = new _leaflet2.default.LocationFilter2();
 
         if (ctGroup) {
           (function () {
             var selectionHandle = new global.crosstalk.SelectionHandle(ctGroup);
             selectionHandle.on("change", function (e) {
               if (e.sender !== selectionHandle) {
-                if (_this8._locationFilter) {
-                  _this8._locationFilter.disable();
+                if (_this9._locationFilter) {
+                  _this9._locationFilter.disable();
                   btn.state("select-inactive");
                 }
               }
             });
             var handler = function handler(e) {
-              _this8.layerManager.brush(_this8._locationFilter.getBounds(), { sender: selectionHandle });
+              _this9.layerManager.brush(_this9._locationFilter.getBounds(), { sender: selectionHandle });
             };
-            _this8._locationFilter.on("enabled", handler);
-            _this8._locationFilter.on("change", handler);
-            _this8._locationFilter.on("disabled", function () {
+            _this9._locationFilter.on("enabled", handler);
+            _this9._locationFilter.on("change", handler);
+            _this9._locationFilter.on("disabled", function () {
               selectionHandle.close();
-              _this8._locationFilter = null;
+              _this9._locationFilter = null;
             });
           })();
         }
 
-        _this8._locationFilter.addTo(map);
+        _this9._locationFilter.addTo(map);
       }
     }, {
       stateName: "select-active",
       icon: "ion-close-round",
       title: "Dismiss selection",
       onClick: function onClick(btn, map) {
         btn.state("select-inactive");
-        _this8._locationFilter.disable();
+        _this9._locationFilter.disable();
         // If explicitly dismissed, clear the crosstalk selections
-        _this8.layerManager.unbrush();
+        _this9.layerManager.unbrush();
       }
     }]
   });

javascript/src/layer-manager.js

@@ -282,6 +282,14 @@ export default class LayerManager {
     return result;
   }
 
+  getAllGroupNames() {
+    let result = [];
+    $.each(this._groupContainers, (k, v) => {
+      result.push(k);
+    });
+    return result;
+  }
+
   clearGroup(group) {
     // Find all layers in _byGroup[group]
     let groupTable = this._byGroup[group];

javascript/src/methods.js

@@ -871,6 +871,52 @@ methods.showGroup = function(group) {
   });
 };
 
+function setupShowHideGroupsOnZoom(map) {
+  if (map.leafletr._hasInitializedShowHideGroups) {
+    return;
+  }
+  map.leafletr._hasInitializedShowHideGroups = true;
+
+  function setVisibility(layer, visible) {
+    if (visible !== map.hasLayer(layer)) {
+      if (visible)
+        map.addLayer(layer);
+      else
+        map.removeLayer(layer);
+    }
+  }
+
+  function showHideGroupsOnZoom() {
+    if (!map.layerManager)
+      return;
+
+    let zoom = map.getZoom();
+    map.layerManager.getAllGroupNames().forEach(group => {
+      let layer = map.layerManager.getLayerGroup(group, false);
+      if (layer && typeof(layer.zoomLevels) !== "undefined") {
+        setVisibility(layer,
+          layer.zoomLevels === true || layer.zoomLevels.indexOf(zoom) >= 0);
+      }
+    });
+  }
+
+  map.showHideGroupsOnZoom = showHideGroupsOnZoom;
+  map.on("zoomend", showHideGroupsOnZoom);
+}
+
+methods.setGroupOptions = function(group, options) {
+  $.each(asArray(group), (i, g) => {
+    let layer = this.layerManager.getLayerGroup(g, true);
+    // This slightly tortured check is because 0 is a valid value for zoomLevels
+    if (typeof(options.zoomLevels) !== "undefined" && options.zoomLevels !== null) {
+      layer.zoomLevels = asArray(options.zoomLevels);
+    }
+  });
+
+  setupShowHideGroupsOnZoom(this);
+  this.showHideGroupsOnZoom();
+};
+
 methods.addRasterImage = function(uri, bounds, opacity, attribution, layerId, group) {
   // uri is a data URI containing an image. We want to paint this image as a
   // layer at (top-left) bounds[0] to (bottom-right) bounds[1].