Allow fixing a set of zoom levels

to close #312

Author: dceejay

.gitignore

@@ -6,3 +6,4 @@ mapbox.token
 worldmap/ml3d.html
 worldmap/unitgenerator.html
 *.pmtiles
+worldmap/images/world-110m-flat.json

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v5.4.0 - Let msg.payload.command.zoomLevels set an array of acceptable zoom levels. Issue #312
  - v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
  - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309
  - v5.1.6 - Let Cot __milsym set the SIDC if present.

README.md

@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v5.4.0 - Let msg.payload.command.zoomLevels set an array of acceptable zoom levels. Issue #312
 - v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
 - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309
 - v5.1.6 - Let Cot __milsym set the SIDC if present.
@@ -377,6 +378,7 @@ Optional properties for **msg.payload.command** include
  - **lat** - move map to specified latitude.
  - **lon** - move map to specified longitude.
  - **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map).
+ - **zoomLevels** - an array of accepted zoom levels to switch between if you map only supports certain scalings - set to null to clear.
  - **bounds** - if set to an array `[ [ lat(S), lon(W) ], [lat(N), lon(E)] ]` - sets the overall map bounds.
  - **rotation** - rotate the base map to the specified compass angle.
  - **layer** - set map to specified base layer name - `{"command":{"layer":"Esri"}}`

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "5.3.0",
+    "version": "5.4.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~7.2.0",

worldmap/index.html

@@ -78,6 +78,7 @@
     <script src="leaflet/esri-leaflet.js"></script>
     <script src="leaflet/protomaps-leaflet.min.js"></script>
     <script src="leaflet/Semicircle.js"></script>
+    <script src="leaflet/Leaflet.LimitZoom.js"></script>
     <script src="leaflet/leaflet-arc.min.js"></script>
     <script src="leaflet/leaflet.antimeridian-src.js"></script>
     <script src="leaflet/L.TileLayer.PixelFilter.js"></script>

worldmap/leaflet/Leaflet.LimitZoom.js

@@ -0,0 +1,40 @@
+// Limit leaflet map zoom to a list of variants
+// Written by Ilya Zverev, licensed WTFPL
+
+L.Map.mergeOptions({
+	zooms: [] // array of integers
+});
+
+L.Map.include({
+	_limitZoom: function (zoom) {
+		var zooms = this.options.zooms;
+		if (!zooms || !('length' in zooms) || !zooms.length) {
+			var min = this.getMinZoom(),
+			    max = this.getMaxZoom(),
+			    snap = L.Browser.any3d ? this.options.zoomSnap : 1;
+			if (snap) {
+				zoom = Math.round(zoom / snap) * snap;
+			}
+			return Math.max(min, Math.min(max, zoom));
+		} else {
+			var z, d = 100, i, dist;
+			var dz = -1, dd = 100, dir = zoom - this._zoom;
+			var snap = L.Browser.any3d ? this.options.zoomSnap : 1;
+			if (snap) {
+				zoom = Math.round(zoom / snap) * snap;
+			}
+			for (i = 0; i < zooms.length; i++) {
+				dist = Math.abs(zooms[i] - zoom);
+				if (dist < d) {
+					z = zooms[i];
+					d = dist;
+				}
+				if (dir * (zooms[i] - this._zoom) > 0 && dist < dd) {
+					dz = zooms[i];
+					dd = dist;
+				}
+			}
+			return dz < 0 ? z : dz;
+		}
+	}
+});

worldmap/worldmap.js

@@ -3127,6 +3127,14 @@ function doCommand(cmd) {
         document.getElementById("lockit").checked = lockit;
     }
     // if (cmd.hasOwnProperty("panlock") && lockit === true) { doLock(true); }
+
+    if (cmd.hasOwnProperty("zoomLevels")) {
+        if (Array.isArray(cmd.zoomLevels) && cmd?.zoomLevels.length > 0) {
+            map.options.zooms = cmd.zoomLevels;
+        }
+        else { delete map.options.zooms; }
+    }
+
     // Move to a new position
     var clat = map.getCenter().lat;
     var clon = map.getCenter().lng;