Netsyms/fixphrase.com
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show phrase in URL (close #3)

Browse Source
This commit is contained in:
Skylar Ittner 2021-11-12 23:29:21 -07:00
parent b9b61cae00
commit 256885d94d
2 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -175,16 +175,16 @@
<div id="mapbox" class="w-100"></div> <div id="mapbox" class="w-100"></div>
<ul class="nav nav-pills pt-2" id="map-style-switcher"> <ul class="nav nav-pills pt-2" id="map-style-switcher">
<li class="nav-item p-1"> <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>
<li class="nav-item p-1"> <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>
<li class="nav-item p-1"> <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>
<li class="nav-item p-1"> <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> </li>
</ul> </ul>
</div> </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"); $("#map-style-switcher a.nav-link").removeClass("active");
setMapStyle($(this).data("style")); setMapStyle($(this).data("style"));
$(this).addClass("active"); $(this).addClass("active");
@ -253,11 +254,19 @@
document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString(); document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
}); });
// Check for coordinates in hash // Read URL hash and try to parse it
parseWindowHash();
window.addEventListener('hashchange', function () { window.addEventListener('hashchange', function () {
parseWindowHash(); parseWindowHash();
}, false); }, 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) { function dolookup(words) {
@ -265,8 +274,9 @@
words = words.trim().toLowerCase().replace(/\s+/g, ' '); words = words.trim().toLowerCase().replace(/\s+/g, ' ');
var coords = FixPhrase.decode(words); var coords = FixPhrase.decode(words);
location.hash = "#map";
showLocationPopup(coords[0], coords[1], coords[3], coords[2]); showLocationPopup(coords[0], coords[1], coords[3], coords[2]);
$("#wordbox").val(coords[3]);
$("#wordbox-mobile").val(coords[3]);
var zoomlevel = 18; var zoomlevel = 18;
switch (coords[2]) { switch (coords[2]) {
@ -291,9 +301,14 @@
lat = (Math.round(lat * 10000) / 10000); lat = (Math.round(lat * 10000) / 10000);
lon = (Math.round(lon * 10000) / 10000); lon = (Math.round(lon * 10000) / 10000);
lookupAndShowCoords(lat, lon); lookupAndShowCoords(lat, lon);
setTimeout(function () { } else if (/^[a-z]+\-[a-z]+\-?[a-z]+?\-?[a-z]+?$/.test(hash)) {
window.location.hash = hash; var words = hash.replaceAll("-", " ");
}, 1000); 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> </script>

7
js/map.js
View File

@ -91,7 +91,7 @@ function showLocationPopup(latitude, longitude, words, accuracy) {
} }
popup = new mapboxgl.Popup(); popup = new mapboxgl.Popup();
popup.setLngLat({lat: latitude, lng: longitude}); 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.addTo(map);
popup._closeButton.onclick = clearRectangle; popup._closeButton.onclick = clearRectangle;
drawRectangle( drawRectangle(
@ -100,10 +100,7 @@ function showLocationPopup(latitude, longitude, words, accuracy) {
latitude + (accuracy / 2), latitude + (accuracy / 2),
longitude + (accuracy / 2) longitude + (accuracy / 2)
); );
// This prevents a bug where the app starts looping because it reacts to its own hash changes window.location.hash = words.replaceAll(" ", "-");
if (accuracy == 0.0001) {
window.location.hash = latitude + "," + longitude;
}
} }
function drawRectangle(fromlat, fromlng, tolat, tolng) { function drawRectangle(fromlat, fromlng, tolat, tolng) {