node-red-contrib-web-worldmap 5.5.8 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
+ - v5.6.1 - Also call autoswitch on initial connect to ensure map in view.
+ - v5.6.0 - Autoswitch pmtiles basemaps based on zoom and/or coverage.
  - v5.5.8 - Bump qs dep for CVE
  - v5.5.7 - Fix COG handling for built in icons, bump various libs for CVEs
  - v5.5.4 - slight tweak to geojson property display as table

package/README.md

@@ -10,6 +10,8 @@ A <a href="https://nodered.org" target="mapinfo">Node-RED</a> node to provide a
 
 ### Updates
 
+- v5.6.1 - Also call autoswitch on initial connect to ensure map in view.
+- v5.6.0 - Autoswitch pmtiles basemaps based on zoom and/or coverage.
 - v5.5.8 - Bump qs dep for CVE
 - v5.5.7 - Fix COG handling for built in icons, bump various libs for CVEs
 - v5.5.4 - slight tweak to geojson property display as table
@@ -20,12 +22,6 @@ A <a href="https://nodered.org" target="mapinfo">Node-RED</a> node to provide a
 - 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.
-- v5.1.5 - Fix links to SIDC unitgenerator so it is now local.
-- v5.1.4 - Fix clearlayer for tracks node.
-- v5.1.2 - Fix for longer line msg properties.
-- v5.1.1 - Fix CoT inline image.
-- v5.1.0 - Let special icons be sizeable using iconSize property.
 
 - see [CHANGELOG](https://github.com/dceejay/RedMap/blob/master/CHANGELOG.md) for full list of changes.
 
@@ -767,6 +763,8 @@ You can also load them dynamically with a command like
 
 Where `opt` can be as per the options file mentioned above - or omitted completely.
 
+If you have multiple pmtiles loaded then the map will try to autoswitch if you move out of bounds of one and into another - or zoom in or out beyond the zoom limits and there is another suitable pmtiles file available.
+
 NOTE: for some reason many files converted to pmtiles format fail to load/display. In this case you can easily use the tileserver-gl map server either natively or via docker (see below) to serve the pmtiles format file.
 
 ### Using a Docker Map Server

package/package.json

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

package/worldmap/worldmap.js

@@ -18,7 +18,7 @@ var menuOpen = false;
 var clusterAt = 0;
 var maxage = 900;   // default max age of icons on map in seconds - cleared after 15 mins
 var baselayername = "OSM grey";     // Default base layer OSM but uniform grey
-var pagefoot = " © DCJ 2025";
+var pagefoot = " © DCJ 2026";
 var inIframe = false;
 var showUserMenu = true;
 var showLayerMenu = true;
@@ -94,7 +94,7 @@ var connect = function() {
             document.getElementById("footer").innerHTML = "<font color='#494'>"+pagefoot+"</font>";
         }
         ws.send(JSON.stringify({action:"connected",parameters:Object.fromEntries((new URL(location)).searchParams),clientTimezone:Intl.DateTimeFormat().resolvedOptions().timeZone || false}));
-        setTimeout(function() { onoffline(); }, 500);
+        setTimeout(function() { onoffline(); pickMapLayer();}, 500);
     };
     ws.onclose = function() {
         console.log("DISCONNECTED");
@@ -862,6 +862,61 @@ function showMapCurrentZoom() {
     },750);
 }
 
+function pickMapLayer() {
+    // if we have bounds meta data for the current baselayer (usually pmtiles)
+    if (basemaps[baselayername] && basemaps[baselayername].hasOwnProperty("meta")) {
+        const m = basemaps[baselayername].meta
+        const c = map.getCenter()
+        const z = map.getZoom();
+        //console.log("ZOOM: "+m.minZoom+" - "+z+" - "+m.maxZoom)
+        // if we are within the meta bounds and we have zoomed in beyond the max zoom level for this baselayer, try to find a more suitable baselayer
+        if (c.lat > m.minLat && c.lat < m.maxLat && c.lng > m.minLon && c.lng < m.maxLon) {
+            if (z > m.maxZoom) {
+                for (var key in basemaps) {
+                    if (key !== baselayername && basemaps[key].hasOwnProperty("meta")) {
+                        const mb = basemaps[key].meta;
+                        if (z <= mb.maxZoom && c.lat > mb.minLat && c.lat < mb.maxLat && c.lng > mb.minLon && c.lng < mb.maxLon) {
+                            console.log("Zoom greater than "+m.maxZoom+", Switching to "+key);
+                            map.removeLayer(basemaps[baselayername]);
+                            baselayername = key;
+                            map.addLayer(basemaps[baselayername]);
+                            break;
+                        }
+                    }
+                }
+            }
+            else if (z <= m.minZoom) {
+                for (var key in basemaps) {
+                    if (key !== baselayername && basemaps[key].hasOwnProperty("meta")) {
+                        if (z >= basemaps[key].meta.minZoom) {
+                            console.log("Zoom below min "+m.minZoom+", Switching to "+key);
+                            map.removeLayer(basemaps[baselayername]);
+                            baselayername = key;
+                            map.addLayer(basemaps[baselayername]);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        // if we are outside the meta bounds, try to find a baselayer that does cover this area
+        else {
+            for (var key in basemaps) {
+                if (basemaps[key].hasOwnProperty("meta") && key !== baselayername) {
+                    const mb = basemaps[key].meta;
+                    if (c.lat > mb.minLat && c.lat < mb.maxLat && c.lng > mb.minLon && c.lng < mb.maxLon) {
+                        console.log("Outside Bounds, Switching to "+key);
+                        map.removeLayer(basemaps[baselayername]);
+                        baselayername = key;
+                        map.addLayer(basemaps[baselayername]);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+
 map.on('zoomend', function() {
     showMapCurrentZoom();
     window.localStorage.setItem("lastzoom", map.getZoom());
@@ -878,6 +933,7 @@ map.on('moveend', function() {
         oldBounds = {sw:{lat:b._southWest.lat,lng:b._southWest.lng},ne:{lat:b._northEast.lat,lng:b._northEast.lng}};
     }
     edgeAware();
+    pickMapLayer();
 });
 map.on('locationfound', onLocationFound);
 map.on('locationerror', onLocationError);
@@ -2754,6 +2810,7 @@ function doCommand(cmd) {
                 else {
                     basemaps[cmd.map.name] = pmtiles.leafletRasterLayer(p, opt);
                 }
+                basemaps[cmd.map.name].meta = { minZoom: h.minZoom, maxZoom: h.maxZoom, minLat: h.minLat, maxLat: h.maxLat, minLon: h.minLon, maxLon: h.maxLon };
                 if (!existsalready) {
                     layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
                 }