restore last position if in iframe/dashboard

let zoom snap to 0.1  values

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.
  - v2.9.0 - Let weblinks be an array of links. Add more info to readme about Mapservers.
  - v2.8.9 - Only load cgi module if we have a local mapserv file
  - v2.8.8 - Change length of speed leader to show where you will be in 1 min if speed in m/s

README.md

@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.
 - v2.9.0 - Let weblinks be an array of links. Add more info to readme about Mapservers.
 - v2.8.9 - Only load cgi module if we have a local mapserv file.
 - v2.8.8 - Change length of speed leader to show where you will be in 1 min if speed in m/s.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.9.0",
+    "version": "2.10.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/index.html

@@ -19,7 +19,7 @@
     <title>Node-RED map all the things</title>
     <meta charset="UTF-8">
     <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name='viewport' content='width=device-width, initial-scale:1, user-scalable=no'/>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
 

worldmap/worldmap.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 
-var startpos = [51.03, -1.379];  // Start location - somewhere in UK :-)
+var startpos = [51.05, -1.38];  // Start location - somewhere in UK :-)
 var startzoom = 10;
 
 var ws;
@@ -157,8 +157,27 @@ document.addEventListener ("keydown", function (ev) {
     }
 });
 
+if ( window.self !== window.top ) { inIframe = true; }
+if (inIframe === true) {
+    if ( window.localStorage.hasOwnProperty("lastpos") ) {
+        var sp = JSON.parse(window.localStorage.getItem("lastpos"));
+        startpos = [ sp.lat, sp.lng ];
+    }
+    if ( window.localStorage.hasOwnProperty("lastzoom") ) {
+        startzoom = window.localStorage.getItem("lastzoom");
+    }
+}
+// if ( window.localStorage.hasOwnProperty("clusterat") ) {
+//     clusterAt = window.localStorage.getItem("clusterat");
+//     document.getElementById("setclus").value = clusterAt;
+// }
+// if ( window.localStorage.hasOwnProperty("maxage") ) {
+//     maxage = window.localStorage.getItem("maxage");
+//     document.getElementById("maxage").value = maxage;
+// }
+
 // Create the Initial Map object.
-map = new L.map('map').setView(startpos, startzoom);
+map = new L.map('map',{zoomSnap: 0.1}).setView(startpos, startzoom);
 
 var droplatlng;
 var target = document.getElementById("map")
@@ -266,9 +285,8 @@ function onLocationFound(e) {
 function onLocationError(e) { console.log(e.message); }
 
 // Move some bits around if in an iframe
-if (window.self !== window.top) {
+if (inIframe) {
     console.log("IN an iframe");
-    inIframe = true;
     if (showUserMenu) { menuButton.addTo(map); }
     document.getElementById("topbar").style.display="none";
     document.getElementById("map").style.top="0px";
@@ -317,24 +335,6 @@ if (!inIframe) { helpMenu += '<tr><td style="cursor:default"><span id="showHelp"
 else { helpMenu += '</table>' }
 document.getElementById('menu').innerHTML = helpMenu;
 
-if (showUserMenu) {
-    if ( window.localStorage.hasOwnProperty("lastpos") ) {
-        var sp = JSON.parse(window.localStorage.getItem("lastpos"));
-        startpos = [ sp.lat, sp.lng ];
-    }
-    if ( window.localStorage.hasOwnProperty("lastzoom") ) {
-        startzoom = window.localStorage.getItem("lastzoom");
-    }
-    // if ( window.localStorage.hasOwnProperty("clusterat") ) {
-    //     clusterAt = window.localStorage.getItem("clusterat");
-    //     document.getElementById("setclus").value = clusterAt;
-    // }
-    if ( window.localStorage.hasOwnProperty("maxage") ) {
-        maxage = window.localStorage.getItem("maxage");
-        document.getElementById("maxage").value = maxage;
-    }
-}
-
 // Add graticule
 var showGrid = false;
 var Lgrid = L.latlngGraticule({
@@ -634,6 +634,10 @@ function showMapCurrentZoom() {
 
 map.on('zoomend', function() {
     showMapCurrentZoom();
+    window.localStorage.setItem("lastzoom", map.getZoom());
+});
+map.on('moveend', function() {
+    window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
 });
 
 //map.on('contextmenu', function(e) {