From 5ee343943a155627152624a39aa581b0d0c8eaf4 Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Sun, 28 Jan 2024 03:12:37 +0100 Subject: Put layer names in location hash. --- main.js | 35 ++++++++++++++++++++++++++--------- 1 file 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; -- cgit v1.2.3