Show layer bounds in preview (#146)

js/Map.js

@@ -11,6 +11,7 @@ BR.Map = {
         map = new L.Map('map', {
             zoomControl: false, // add it manually so that we can translate it
             worldCopyJump: true,
+            minZoom: 0,
             maxZoom: maxZoom
         });
         L.control.zoom({

js/control/LayersTab.js

@@ -1,5 +1,6 @@
 BR.LayersTab = BR.ControlLayers.extend({
     previewLayer: null,
+    previewBounds: null,
     saveLayers: [],
 
 	initialize: function (layersConfig, baseLayers, overlays, options) {
@@ -109,7 +110,7 @@ BR.LayersTab = BR.ControlLayers.extend({
             var selected = data.selected[0];
 
             if (selected !== oldSelected) {
-                this.showPreview(this.createLayer(layerData));
+                this.showPreview(layerData);
                 oldSelected = selected;
             } else {
                 data.instance.deselect_node(data.node);
@@ -385,6 +386,27 @@ BR.LayersTab = BR.ControlLayers.extend({
         return false;
     },
 
+    showPreviewBounds: function (layerData) {
+        if (layerData.geometry) {
+            this.previewBounds = L.geoJson(layerData.geometry, {
+                // fill/mask outside of bounds polygon with Leaflet.snogylop
+                invert: true,
+                // reduce unmasked areas appearing due to clipping while panning and zooming out
+                renderer: L.svg({ padding: 1 }),
+                color: '#333',
+                fillOpacity: 0.4,
+                weight: 2
+            }).addTo(this._map);
+        }
+    },
+
+    removePreviewBounds: function () {
+        if (this.previewBounds && this._map.hasLayer(this.previewBounds)) {
+            this._map.removeLayer(this.previewBounds);
+            this.previewBounds = null;
+        }
+    },
+
     deselectNode: function () {
         var selected = this.jstree.get_selected();
         if (selected.length > 0) {
@@ -396,23 +418,29 @@ BR.LayersTab = BR.ControlLayers.extend({
         // execute after current input click handler,
         // otherwise added overlay checkbox state doesn't update
         setTimeout(L.Util.bind(function () {
+            this.removePreviewBounds();
             this.removePreviewLayer();
             this.restoreActiveLayers(true);
             this.deselectNode();
         }, this), 0);
     },
 
-    showPreview: function (layer) {
+    showPreview: function (layerData) {
+        var layer = this.createLayer(layerData);
         this._map.addLayer(layer);
+        this.removePreviewBounds();
         if (!this.removePreviewLayer()) {
             this.saveRemoveActiveLayers();
             this._map.once('baselayerchange', this.onBaselayerchange, this);
         }
         this.previewLayer = layer;
+
+        this.showPreviewBounds(layerData);
     },
 
     hidePreview: function (layer) {
         this._map.off('baselayerchange', this.onBaselayerchange, this);
+        this.removePreviewBounds();
         this.removePreviewLayer();
         this.restoreActiveLayers();
     }

package.json

@@ -45,6 +45,7 @@
     "leaflet-triangle-marker": "^1.0.1",
     "leaflet.locatecontrol": "^0.60.0",
     "leaflet.restoreview": "makinacorpus/Leaflet.RestoreView#master",
+    "leaflet.snogylop": "^0.4.0",
     "leaflet.stravasegments": "2.3.2",
     "mapbbcode": "MapBBCode/mapbbcode#v1.2.0",
     "seiyria-bootstrap-slider": "seiyria/bootstrap-slider#^9.8.1",

yarn.lock

@@ -3516,6 +3516,11 @@ leaflet.restoreview@makinacorpus/Leaflet.RestoreView#master:
   version "1.0.0"
   resolved "https://codeload.github.com/makinacorpus/Leaflet.RestoreView/tar.gz/9c99464d19d2f25e146326d86639ff37be9cd5a6"
 
+leaflet.snogylop@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/leaflet.snogylop/-/leaflet.snogylop-0.4.0.tgz#bc373432edc1da63a8efbcc5a681d398deebd0d3"
+  integrity sha512-kpjBM3dWBdLyBEUJc1u+2HVYEJifVGnsrOGSeHGChxLP1In/GShmOSgbkHD6uXcK+y9w58SOsEtK+K7/bwEHCg==
+
 leaflet.stravasegments@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/leaflet.stravasegments/-/leaflet.stravasegments-2.3.2.tgz#4086e8a5f0ea7dd256edbcb7d2ca7ab1deabc669"