Add jump-to-coordinates feature and location history

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);

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() {