From 256885d94dacb52821724fbb49c14b4f744ddb8c Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Fri, 12 Nov 2021 23:29:21 -0700
Subject: [PATCH] Show phrase in URL (close #3)

---
 index.html | 37 ++++++++++++++++++++++++++-----------
 js/map.js  |  7 ++-----
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index a1aa838..8ebf672 100644
--- a/index.html
+++ b/index.html
@@ -175,16 +175,16 @@
                     <div id="mapbox" class="w-100"></div>
                     <ul class="nav nav-pills pt-2" id="map-style-switcher">
                         <li class="nav-item p-1">
-                            <a class="nav-link active" href="#map" data-style="street">Light</a>
+                            <a class="nav-link active" href="" data-style="street">Light</a>
                         </li>
                         <li class="nav-item p-1">
-                            <a class="nav-link" href="#map" data-style="dark">Dark</a>
+                            <a class="nav-link" href="" data-style="dark">Dark</a>
                         </li>
                         <li class="nav-item p-1">
-                            <a class="nav-link" href="#map" data-style="terrain">Topo</a>
+                            <a class="nav-link" href="" data-style="terrain">Topo</a>
                         </li>
                         <li class="nav-item p-1">
-                            <a class="nav-link" href="#map" data-style="satellite">Satellite</a>
+                            <a class="nav-link" href="" data-style="satellite">Satellite</a>
                         </li>
                     </ul>
                 </div>
@@ -242,7 +242,8 @@
                     }
                 });
 
-                $("#map-style-switcher").on("click", "a.nav-link", function () {
+                $("#map-style-switcher").on("click", "a.nav-link", function (e) {
+                    e.preventDefault();
                     $("#map-style-switcher a.nav-link").removeClass("active");
                     setMapStyle($(this).data("style"));
                     $(this).addClass("active");
@@ -253,11 +254,19 @@
                     document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
                 });
 
-                // Check for coordinates in hash
-                parseWindowHash();
+                // Read URL hash and try to parse it
                 window.addEventListener('hashchange', function () {
                     parseWindowHash();
                 }, false);
+                // Don't try to read hash until map is loaded, this prevents errors
+                var checkIfMapLoaded = function () {
+                    if (map.isStyleLoaded()) {
+                        parseWindowHash();
+                    } else {
+                        setTimeout(checkIfMapLoaded, 200);
+                    }
+                };
+                checkIfMapLoaded();
             };
 
             function dolookup(words) {
@@ -265,8 +274,9 @@
                     words = words.trim().toLowerCase().replace(/\s+/g, ' ');
                     var coords = FixPhrase.decode(words);
 
-                    location.hash = "#map";
                     showLocationPopup(coords[0], coords[1], coords[3], coords[2]);
+                    $("#wordbox").val(coords[3]);
+                    $("#wordbox-mobile").val(coords[3]);
 
                     var zoomlevel = 18;
                     switch (coords[2]) {
@@ -291,9 +301,14 @@
                     lat = (Math.round(lat * 10000) / 10000);
                     lon = (Math.round(lon * 10000) / 10000);
                     lookupAndShowCoords(lat, lon);
-                    setTimeout(function () {
-                        window.location.hash = hash;
-                    }, 1000);
+                } else if (/^[a-z]+\-[a-z]+\-?[a-z]+?\-?[a-z]+?$/.test(hash)) {
+                    var words = hash.replaceAll("-", " ");
+                    dolookup(words);
+                    $("#wordbox").val(words);
+                    $("#wordbox-mobile").val(words);
+                } else if (/^[a-z]+\ [a-z]+\ ?[a-z]+?\ ?[a-z]+?$/.test(decodeURI(hash))) {
+                    var words = decodeURI(hash);
+                    dolookup(words);
                 }
             }
         </script>
diff --git a/js/map.js b/js/map.js
index df9c5f6..b6d4525 100644
--- a/js/map.js
+++ b/js/map.js
@@ -91,7 +91,7 @@ function showLocationPopup(latitude, longitude, words, accuracy) {
     }
     popup = new mapboxgl.Popup();
     popup.setLngLat({lat: latitude, lng: longitude});
-    popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + latitude + ", " + longitude);
+    popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + (Math.round(latitude * 10000) / 10000) + ", " + (Math.round(longitude * 10000) / 10000));
     popup.addTo(map);
     popup._closeButton.onclick = clearRectangle;
     drawRectangle(
@@ -100,10 +100,7 @@ function showLocationPopup(latitude, longitude, words, accuracy) {
             latitude + (accuracy / 2),
             longitude + (accuracy / 2)
             );
-    // This prevents a bug where the app starts looping because it reacts to its own hash changes
-    if (accuracy == 0.0001) {
-        window.location.hash = latitude + "," + longitude;
-    }
+    window.location.hash = words.replaceAll(" ", "-");
 }
 
 function drawRectangle(fromlat, fromlng, tolat, tolng) {