From ea94453bd2125d9ed6a7447045c9802f0b5cb214 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 17 Nov 2023 16:15:40 -0500
Subject: [PATCH] Persist selected travel mode (foot, bicycle, etc.) in URL
 parameters (close #12)

---
 css/main.css         |  5 ++++-
 js/hashController.js | 14 ++++++++++----
 js/index.js          | 17 ++++++++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/css/main.css b/css/main.css
index 787d089..9ad875e 100644
--- 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
index 2f719f6..41b82a9 100644
--- 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());
 }
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 9b115b6..7594401 100644
--- 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 {