Add jump-to-coordinates feature and location history

This commit is contained in:
Markus Koch 2020-04-19 09:12:17 +02:00
parent 657867309e
commit 0859324a46
2 changed files with 84 additions and 5 deletions

View File

@ -1,3 +1,4 @@
var editor_mode = 0;
var mymap; var mymap;
var streetLabelsRenderer = new L.StreetLabels({ var streetLabelsRenderer = new L.StreetLabels({
collisionFlg: true, collisionFlg: true,
@ -173,6 +174,62 @@ load_geojson("Streets", "./geojson/streets.json", "street", "blue", 0);
L.control.scale().addTo(mymap); 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(); var popup = L.popup();
L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa'; L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
@ -186,3 +243,23 @@ function onMapClick(e) {
} }
mymap.on('click', onMapClick); 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);

View File

@ -1,6 +1,7 @@
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
if (urlParams.has('editor')) { editor_mode = urlParams.has('editor');
if (editor_mode) {
var draw_layer; var draw_layer;
var polyline; var polyline;
@ -60,22 +61,23 @@ if (urlParams.has('editor')) {
} }
} }
function onHashChange() { function editor_onHashChange() {
if (("#" + get_location_string()) != window.location.hash) { if (("#" + get_location_string()) != window.location.hash) {
polyline.remove(mymap); polyline.remove(mymap);
onLoad(0); 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 window.addEventListener("mouseup", onDragEnd, false); // Workaround as polyline.on(dragend, ) doesn't seem to work
// Configure map for better editing // Configure map for better editing
document.getElementById('mapid').classList.add("no-aa"); document.getElementById('mapid').classList.add("no-aa");
mymap.setMaxZoom(14); mymap.setMaxZoom(14);
mymap.off('click', onMapClick); mymap.off('click', onMapClick);
//mymap.setOpacity(0.7); mymap.off('zoomend', update_hash_from_position);
mymap.off('dragend', update_hash_from_position);
onLoad(); onLoad();
function get_location_string() { function get_location_string() {