Persist selected travel mode (foot, bicycle, etc.) in URL parameters (c…

…lose #12)
osmus · Nov 17, 2023 · ea94453 · ea94453
1 parent a933e36
commit ea94453
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/css/main.css b/css/main.css
@@ -135,7 +135,10 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
   appearance: none;
   -webkit-appearance: none;
-  border-color: #ddd;
+  -moz-appearance:none;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
   padding: 4px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }

diff --git a/js/hashController.js b/js/hashController.js
@@ -13,10 +13,15 @@ function setHashParameters(params) {
   }
 }
 
-function entityInfoFromHash() {
+function hashValue(key) {
   var searchParams = new URLSearchParams(window.location.hash.slice(1));
-  if (searchParams.has("selected")) {
-    var value = searchParams.get("selected");
+  if (searchParams.has(key)) return searchParams.get(key);
+  return null;
+}
+
+function entityInfoFromHash() {
+  var value = hashValue("selected");
+  if (value) {
     var components = value.split("/");
     if (components.length == 2) {
       var type = components[0];
@@ -32,6 +37,7 @@ function entityInfoFromHash() {
   return null;
 }
 
-function updateForHash() {
+function updateForHash() { 
+  setTravelMode(hashValue("mode"));
   selectEntity(entityInfoFromHash());
 }
diff --git a/js/index.js b/js/index.js
@@ -1,6 +1,7 @@
 var map;
 
-var mode = "foot";
+const defaultMode = "foot";
+var mode = defaultMode;
 
 const colors = {
   public: "#005908",
@@ -57,13 +58,23 @@ function selectEntity(entityInfo) {
   });
 }
 
+function setTravelMode(newMode) {
+  if (newMode === null) newMode = defaultMode;
+  if (mode === newMode) return;
+  mode = newMode;
+
+  document.getElementById("travel-mode").value = mode;
+
+  updateMapLayers();
+  setHashParameters({ mode: mode === defaultMode ? null : mode });
+}
+
 window.onload = (event) => {
 
   window.addEventListener("hashchange", updateForHash);
 
   document.getElementById("travel-mode").onchange = function(e) {
-    mode = e.target.value;
-    updateMapLayers();
+    setTravelMode(e.target.value);
   }
 
   try {