From de3a4fc757104e6edb736bf4acb7fdb7c9259287 Mon Sep 17 00:00:00 2001
From: Markus Koch <markus@notsyncing.net>
Date: Fri, 17 Apr 2020 21:47:12 +0200
Subject: Add street editor

Accessible by setting ?editor
---
 htdocs/streeteditor.js | 147 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 htdocs/streeteditor.js

(limited to 'htdocs/streeteditor.js')

diff --git a/htdocs/streeteditor.js b/htdocs/streeteditor.js
new file mode 100644
index 0000000..20ce2c6
--- /dev/null
+++ b/htdocs/streeteditor.js
@@ -0,0 +1,147 @@
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+if (urlParams.has('editor')) {
+	var draw_layer;
+	var polyline;
+
+	var edit_active = 0;
+
+	function resolve_latlng(latlng, recenter = 0) {
+		var corr;
+		if (recenter)
+			corr = 0.5;
+		else
+			corr = 0;
+		latlng.lng = Math.round(latlng.lng - 0.5) + corr;
+		latlng.lat = Math.round(latlng.lat - 0.5) + corr;
+		return latlng;
+	}
+
+	function start_editing(e) {
+		// TODO: Check whether we already are in edit mode
+		// TODO: Detect whether we are cloner to the tail or the head, and issue Fwd or Bwd accordingly
+		if (polyline)
+			polyline.editor.continueForward();
+		else
+			polyline = mymap.editTools.startPolyline();
+	}
+
+	function strToPoints(str) {
+		var temp = JSON.parse("[" + str + "]"); // TODO: add .5 everwhere
+		console.log(temp);
+		return temp;
+	}
+
+	function onDragEnd(e) {
+		var latlngs = polyline.getLatLngs();
+
+		for (var i = 0; i < latlngs.length; i++) {
+			latlngs[i] = resolve_latlng(latlngs[i], 1);
+		}
+		polyline.editor.refresh();
+		polyline.editor.refreshVertexMarkers();
+		location.hash = get_location_string();
+	}
+
+	function onLoad(interactive = 1) {
+		if (interactive) {
+			str = prompt("Instructions: \n" +
+			"* Click the scribble-icon in the top left to start or continue drawing.\n" +
+			"* Double click last waypoint to stop.\n" +
+			"* Double click a waypoint to delete it.\n" +
+			"* Click save in the top right to get the new string.\n\n" +
+			"Enter existing waypoints in the following format: [x,y],[x,y]:", window.location.hash.slice(1));
+		} else {
+			str = window.location.hash.slice(1);
+		}
+
+		if (str) {
+			coords = strToPoints(str);
+			for (var i = 0; i < coords.length; i++) {
+				coords[i] = [coords[i][1], coords[i][0]];
+			}
+			polyline = L.polyline(coords).addTo(mymap);
+			// polyline.on('dragend', onDragEnd); // TODO: Doesn't work, see "workaround" below
+			polyline.enableEdit();
+		}
+	}
+
+	function onHashChange() {
+		if (("#" + get_location_string()) != window.location.hash) {
+			polyline.remove(mymap);
+			onLoad(0);
+		}
+	}
+
+	window.addEventListener("hashchange", 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);
+
+	onLoad();
+
+	function get_location_string() {
+		var latlngs = polyline.getLatLngs();
+		var str = "";
+
+		for (var i = 0; i < latlngs.length; i++) {
+			latlng = resolve_latlng(latlngs[i], 1);
+			if (i != 0)
+				str += ",";
+			str += "[" + (latlng.lng - 0.5) + "," + (latlng.lat - 0.5) + "]";
+		}
+
+		return str;
+	}
+
+	function show_location_string(e) {
+		prompt("Copy this string back into the Wiki and wait for a few hours:", get_location_string());
+	}
+
+	L.EditControl = 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(map.editTools);
+		}, this);
+		return container;
+		}
+	});
+
+	L.StartEditControl = L.EditControl.extend({
+		options: {
+			position: 'topleft',
+			callback: start_editing,
+			title: 'Start editing',
+			html: '\\/\\'
+		}
+	});
+
+	L.NewLineControl = L.EditControl.extend({
+		options: {
+			position: 'topleft',
+			callback: show_location_string,
+			title: 'Get location string',
+			html: '💾'
+		}
+	});
+
+	mymap.addControl(new L.NewLineControl());
+	mymap.addControl(new L.StartEditControl());
+}
-- 
cgit v1.2.3