Put layer names in location hash.

1 files changed, 26 insertions, 9 deletions

diff --git a/main.js b/main.js
index 28c885f..2540ba5 100644
--- a/main.js
+++ b/main.js
@@ -592,10 +592,16 @@ const vectorSource = new VectorTile({
   }),
 });
 
-const styles = Object.keys(layers).reduce(function(result, key) {
-  result[key] = layers[key].style;
-  return result;
-}, {});
+const styles = (function() {
+  const searchParams = new URLSearchParams(location.hash.substring(1));
+  const layersParams = searchParams.has('layers') ? searchParams.get('layers').split(' ') : [];
+  return Object.keys(layers).reduce(function(result, key) {
+    if (layersParams.includes(key)) {
+      result[key] = layers[key].style;
+    }
+    return result;
+  }, {});
+})();
 
 const vectorLayer = new VectorTileLayer({
   source: vectorSource,
@@ -668,15 +674,26 @@ map.addLayer(vectorLayer);
     });
   };
   const onClickFunction = function(layerList, event) {
-    layerList.forEach(function(lyr) {
-      if (event.target.checked) {
+    const searchParams = new URLSearchParams(location.hash.substring(1));
+    let layersParams = searchParams.get('layers') || '';
+    layersParams = layersParams.match(/^\s*$/) ? [] : layersParams.split(' ');
+    if (event.target.checked) {
+      layerList.forEach(function(lyr) {
         styles[lyr] = layers[lyr].style;
-      } else {
+        if (!layersParams.includes(lyr)) {
+          layersParams.push(lyr);
+        }
+      });
+    } else {
+      layerList.forEach(function(lyr) {
         delete styles[lyr];
-      }
-    });
+      });
+      layersParams = layersParams.filter((lyr) => !layerList.includes(lyr));
+    }
     setIndeterminateAndChecked(layerHierarchy);
     vectorSource.changed();
+    searchParams.set('layers', layersParams.join(' '));
+    location.hash = '#' + searchParams.toString();
   };
 
   let layerId = 0;