Merge pull request #8 from OpenHistoricalMap/gin-styleoptions-demos

land cover demo, add hash support
OpenHistoricalMap · Feb 10, 2023 · dad8545 · dad8545
2 parents 82565b9 + bffc6de
commit dad8545
Showing 1 changed file with 50 additions and 15 deletions.
diff --git a/index-layeroptions.js b/index-layeroptions.js
@@ -1,20 +1,43 @@
 const START_ZOOM = 5.0;
 const START_CENTER = [ 39.828175, -98.5795 ];
 
+let DEFAULT_RANGE = ['1800-01-01', '2022-01-01'];
+let DEFAULT_DATE = '2022-01-01';
+
 let MAP;
 let OHMLAYER;
 let TIMESLIDER;
 
 document.addEventListener('DOMContentLoaded', function () {
+    const urlparams = new URLSearchParams(document.location.hash.replace(/^#/, ''));
+
+    // override DEFAULT_RANGE and DEFAULT_DATEif given in URL params
+    if (urlparams.get('date')) {
+        DEFAULT_DATE = urlparams.get('date');
+    }
+    if (urlparams.get('range')) {
+        DEFAULT_RANGE = urlparams.get('range').split(',');
+    }
+
+    // start the map
+    // starting view overridden by x/y/z params
     MAP = L.map('map', {
         zoomSnap: 0.1,
-    })
-    .setView(START_CENTER, START_ZOOM);
+    });
 
-    L.control.scale().addTo(MAP);
+    if (urlparams.get('z') && urlparams.get('x') && urlparams.get('y')) {
+        const z = parseFloat(urlparams.get('z'));
+        const x = parseFloat(urlparams.get('x'));
+        const y = parseFloat(urlparams.get('y'));
+        MAP.setView([y, x], z);
+    } else {
+        MAP.setView(START_CENTER, START_ZOOM);
+    }
 
-    // and set up the radiobox behavior to pick a layer, and trigger it now
+    L.control.scale().addTo(MAP);
 
+    // set up the radiobox behavior to pick a layer & add the timeslider to it
+    // and trigger it now
     const $checkboxes = document.querySelectorAll('input[type="radio"][name="layerchoice"]');
     [...$checkboxes].forEach(($checkbox) => {
         $checkbox.addEventListener('change', function () {
@@ -23,6 +46,11 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
     selectLayer( document.querySelector('input[type="radio"][name="layerchoice"]:checked').getAttribute('value') );
+
+    // start updating the URL hash every few seconds
+    setInterval(function () {
+        updateUrlHash();
+    }, 1 * 1000);
 });
 
 
@@ -75,19 +103,10 @@ function selectLayer (which) {
         const tsoptions = {
             vectorLayer: OHMLAYER,
             vectorSourceName: 'osm',
-            range: ['1800-01-01', '2022-01-01'],
-            date: '2022-01-01',
+            range: DEFAULT_RANGE,
+            date: DEFAULT_DATE,
             stepInterval: 1,
             stepAmount: '10year',
-            onDateChange: function (date) {
-                console.debug(['timeslider.js onDateChange', date, this]);
-            },
-            onRangeChange: function (range) {
-                console.debug(['timeslider.js onRangeChange', range, this]);
-            },
-            onReady: function () {
-                console.debug(['timeslider.js onReady', this]);
-            },
         };
 
         if (olddate) tsoptions.date = olddate;
@@ -96,3 +115,19 @@ function selectLayer (which) {
         TIMESLIDER = new L.Control.OHMTimeSlider(tsoptions).addTo(MAP);
     }, 1 * 1000);
 }
+
+
+function updateUrlHash () {
+    if (! TIMESLIDER)  return;
+
+    const params = {};
+
+    params.z = MAP.getZoom().toFixed(2);
+    params.y = MAP.getCenter().lat.toFixed(6);
+    params.x = MAP.getCenter().lng.toFixed(6);
+    params.date = TIMESLIDER.getDate();
+    params.range = TIMESLIDER.getRange().join(',');
+
+    const urlhash = `x=${params.x}&y=${params.y}&z=${params.z}&date=${params.date}&range=${params.range}`;
+    document.location.hash = urlhash;
+}