Save & restore map coordinates, zoom, and time period

Author: argilo

js/tracker.js

@@ -858,20 +858,35 @@ function clean_refresh(text, force, history_step) {
 }
 
 function load() {
+    var qm = offline.get("qm");
+    if (qm != null) {
+        wvar.mode = qm;
+    }
+
+    coords = offline.get("mc");
+    if (coords == null) {
+        coords = [53.467511,-2.233894];
+    }
+
+    zoomLevel = offline.get("mz");
+    if (zoomLevel == null) {
+        zoomLevel = 5;
+    }
+
     //initialize map object
     map = new L.map(document.getElementById('map'), {
-        zoom: 5,
+        zoom: zoomLevel,
         zoomControl: false,
         zoomAnimationThreshold: 0,
         zoomAnimation: true,
         markerZoomAnimation: false,
-        center: [53.467511,-2.233894],
+        center: coords,
         layers: baseMaps[selectedLayer],
         worldCopyJump: true,
         preferCanvas: true,
     });
 
-    map.setView([53.467511,-2.233894], 5, {animate: false});
+    map.setView(coords, zoomLevel, {animate: false});
 
     // fullscreen button
     map.addControl(new L.Control.Fullscreen({ position: 'bottomleft' }));
@@ -911,8 +926,7 @@ function load() {
         onAdd: function(map) {
             var div = L.DomUtil.create('div');
 
-            div.innerHTML = '<select name="timeperiod" id="timeperiod" style="width:auto !important;height:30px;" onchange="clean_refresh(this.value)"><option value="0">Live Only</option><option value="1h">1 hour</option><option value="3h" selected="selected">3 hours</option><option value="6h">6 hours</option><option value="12h">12 hours</option></select>';
-            div.innerHTML.onload = setTimeValue();
+            div.innerHTML = '<select name="timeperiod" id="timeperiod" style="width:auto !important;height:30px;"><option value="0">Live Only</option><option value="1h">1 hour</option><option value="3h">3 hours</option><option value="6h">6 hours</option><option value="12h">12 hours</option></select>';
 
             return div;
         },
@@ -1012,6 +1026,10 @@ function load() {
         lhash_update();
         sidebar_update();
         sub_to_nearby_sondes();
+
+        var latlng = map.getCenter();
+        offline.set("mc", [roundNumber(latlng.lat, 5), roundNumber(latlng.lng, 5)]);
+        offline.set("mz", map.getZoom());
     });
 
     map.on('baselayerchange', function (e) {
@@ -1067,6 +1085,13 @@ function load() {
             lhash_update();
         });
 
+        var timeperiod_select = document.getElementById("timeperiod");
+        timeperiod_select.value = wvar.mode;
+        timeperiod_select.addEventListener("change", function() {
+            offline.set("qm", this.value);
+            clean_refresh(this.value);
+        });
+
         startAjax();
         liveData();
     };
@@ -1139,12 +1164,6 @@ function load() {
     }, 500);
 }
 
-function setTimeValue() {   
-    setTimeout(function() {
-        document.getElementById("timeperiod").value = wvar.mode;
-      }, 100);
-}
-
 function shareVehicle(callsign) {
     const shareData = {
         title: 'SondeHub: ' + vehicles[callsign].marker.options.title + ' Flight Information',