From 0859324a4664e527cc1a5047269379a5d65e93e8 Mon Sep 17 00:00:00 2001 From: Markus Koch Date: Sun, 19 Apr 2020 09:12:17 +0200 Subject: [PATCH] Add jump-to-coordinates feature and location history --- htdocs/mapscript.js | 77 ++++++++++++++++++++++++++++++++++++++++++ htdocs/streeteditor.js | 12 ++++--- 2 files changed, 84 insertions(+), 5 deletions(-) diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js index d7ca17b..877846d 100644 --- a/htdocs/mapscript.js +++ b/htdocs/mapscript.js @@ -1,3 +1,4 @@ +var editor_mode = 0; var mymap; var streetLabelsRenderer = new L.StreetLabels({ collisionFlg: true, @@ -173,6 +174,62 @@ load_geojson("Streets", "./geojson/streets.json", "street", "blue", 0); L.control.scale().addTo(mymap); +function get_current_location_str() { + var latlng = mymap.getCenter(); + return Math.round(latlng.lat) + "," + Math.round(latlng.lng) + "," + mymap.getZoom(); +} + +/* Important: Do not use mymap.setView, use this function instead */ +function jump_to(latlng, zoom = -1) { + if (zoom == -1) + zoom = mymap.getZoom(); + document.location.hash = "#" + Math.round(latlng.lat) + "," + Math.round(latlng.lng) + "," + zoom; +} + +function jump_to_marker(e) { + if (!editor_mode) + jump_to(e.target.getLatLng()); +} + +function prompt_location() { + var str = prompt("Enter coordinates to jump to:\n\n" + + "Format: x, y [, zoom]", get_current_location_str()); + if (str) + document.location.hash = "#" + str; +} + +L.MyControl = L.Control.extend({ + options: { + position: 'topleft', + callback: null, + kind: '', + html: '' + }, + onAdd: function (map) { + var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), + link = L.DomUtil.create('a', '', container); + + link.href = '#'; + link.title = this.options.title; + link.innerHTML = this.options.html; + L.DomEvent.on(link, 'click', L.DomEvent.stop) + .on(link, 'click', function () { + window.LAYER = this.options.callback.call(); + }, this); + return container; + } +}); + +L.GotoControl = L.MyControl.extend({ + options: { + position: 'topleft', + callback: prompt_location, + title: 'Jump to coordinates.', + html: '⌖' + } +}); +mymap.addControl(new L.GotoControl()); + var popup = L.popup(); L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa'; @@ -186,3 +243,23 @@ function onMapClick(e) { } mymap.on('click', onMapClick); + +function update_hash_from_position(e) { + document.location.hash = "#" + get_current_location_str(); +} +mymap.on('zoomend', update_hash_from_position); +mymap.on('dragend', update_hash_from_position); + +function onHashChange(e) { + if (document.location.hash == "#" + get_current_location_str()) + return; // We're already there + coordstr = window.location.hash.slice(1).replace(/%20/g, "").split(","); + if (coordstr.length < 2) + coordstr.push(0); // Default y + if (coordstr.length < 3) + coordstr.push(mymap.getZoom()); // Default zoom + var latlng = L.latLng(parseFloat(coordstr[0]), parseFloat(coordstr[1])); + mymap.setView(latlng, parseInt(coordstr[2])); +} +window.addEventListener("hashchange", onHashChange, false); +onHashChange(null); diff --git a/htdocs/streeteditor.js b/htdocs/streeteditor.js index 7109b0e..8b86a4a 100644 --- a/htdocs/streeteditor.js +++ b/htdocs/streeteditor.js @@ -1,6 +1,7 @@ const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); -if (urlParams.has('editor')) { +editor_mode = urlParams.has('editor'); +if (editor_mode) { var draw_layer; var polyline; @@ -60,22 +61,23 @@ if (urlParams.has('editor')) { } } - function onHashChange() { + function editor_onHashChange() { if (("#" + get_location_string()) != window.location.hash) { polyline.remove(mymap); onLoad(0); } } - window.addEventListener("hashchange", onHashChange, false); + window.removeEventListener("hashchange", onHashChange, false); + window.addEventListener("hashchange", editor_onHashChange, false); window.addEventListener("mouseup", onDragEnd, false); // Workaround as polyline.on(dragend, ) doesn't seem to work // Configure map for better editing document.getElementById('mapid').classList.add("no-aa"); mymap.setMaxZoom(14); mymap.off('click', onMapClick); - //mymap.setOpacity(0.7); - + mymap.off('zoomend', update_hash_from_position); + mymap.off('dragend', update_hash_from_position); onLoad(); function get_location_string() {