Add directions support through lifo-dijkstraserv

3 files changed, 115 insertions, 14 deletions

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..36e7ca9
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "lifo-dijkstraserv"]
+	path = lifo-dijkstraserv
+	url = https://notsyncing.net:8080/markus/lifo-dijkstraserv.git
diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
index b5db609..9389c1f 100644
--- a/htdocs/mapscript.js
+++ b/htdocs/mapscript.js
@@ -5,6 +5,7 @@ var polyconf_show_street_names = 5; // Zoom level for when to start showing stre
 var polyconf_show_cities = 5; /* City outlines will be filled on this level and further away */
 var polyconf_show_districts = 4; /* Shown from polyconf_show_cities until this*/
 
+var dijkstraserv_base = "https://notsyncing.net/dijkstra/";
 var wikiurl_base = "https://wiki.linux-forks.de/mediawiki/index.php/"
 
 var streetLabelsRenderer = new L.StreetLabels({
@@ -93,6 +94,13 @@ var style_outlines = {
 var style_streets = {
 	};
 
+var style_route = {
+	radius: 8,
+	fillColor: "#00ff00",
+	color: "red",
+	opacity: 1.0,
+	fillOpacity: 0.5
+};
 
 // Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
 var factorx = 1 / 256 * 4;
@@ -358,28 +366,53 @@ function prompt_location() {
 }
 
 var search_element;
-function toggle_search() {
-	if (el = document.getElementById('searchbar')) {
-		el.parentNode.removeChild(el);
-		return;
-	}
-
+var route_element;
+function build_sidebar() {
 	if (!search_element) {
 		search_element = document.createElement("div");
 		search_element.style.overflow = "scroll";
 		search_element.style.padding = "6px";
 		search_element.style.height = "100%";
-		search_element.innerHTML = '<input style="width:100%;" id="search_query" name="lifo_map_search" type="search" placeholder="Start typing to search..." oninput="search(event)"><div id="search_results"></div>' ;
+		search_element.innerHTML = '<input style="width:100%;" id="search_query" name="lifo_map_search" type="search" placeholder="Start typing to search..." oninput="search(event)"><div id="search_results"></div>';
+	}
+
+	if (!route_element) {
+		route_element = document.createElement("div");
+		route_element.style.overflow = "scroll";
+		route_element.style.padding = "6px";
+		route_element.style.height = "100%";
+		route_element.innerHTML = '<a href="#" onclick="toggle_search(\'search\',1);return false;">&lt;-- Return to search<br></a><input style="width:100%;" id="route_start" name="lifo_route_loc" type="search" placeholder="Start at x,y"><br><input style="width:100%;" id="route_destination" name="lifo_route_loc" type="search" placeholder="Go to x,y"><br><input id="route_submit" type="button" style="width:100%;" value="Go!" onclick="route(event)"><div id="route_results"></div>';
+	}
+}
+
+var current_sidebar = "search";
+function toggle_search(type = current_sidebar, force_act = 0) {
+	if (el = document.getElementById('sidebar')) {
+		el.parentNode.removeChild(el);
+		if (force_act == 0 && type == current_sidebar)
+			return;
 	}
 
 	td = document.getElementById('windowtr').insertCell(0);
 	td.style.width = "400px";
 	td.style.borderRight = "1px solid black";
 	td.style.verticalAlign = "top";
-	td.id = "searchbar";
-	td.appendChild(search_element);
-
-	document.getElementById('search_query').select();
+	td.id = "sidebar";
+	
+	switch (type) {
+	case "search":
+		td.appendChild(search_element);
+		document.getElementById('search_query').select();
+		break;
+	case "route":
+		td.appendChild(route_element);
+		break;
+	default:
+		alert("JS error: sidebar");
+		break;
+	}
+	
+	current_sidebar = type;
 }
 
 function htmlEntities(str) {
@@ -463,6 +496,67 @@ function search(e) {
 	return false;
 }
 
+var route_layer;
+function route(e) // BOOKMARK
+{	
+	if (route_layer) {
+		mymap.removeLayer(route_layer);
+	}
+	
+	start = document.getElementById('route_start').value;
+	destination = document.getElementById('route_destination').value;
+	if ((start == "") || (destination == "")) {
+		document.getElementById('route_results').innerHTML = "";
+		return;
+	}
+	
+	document.getElementById('route_submit').disabled = true;
+	document.getElementById('route_results').innerHTML = "Loading...";
+		
+	var xhttp_ps = new XMLHttpRequest();
+	xhttp_ps.onreadystatechange = function() {
+		if (this.readyState == 4) {
+			if (this.status == 200) {
+				var json = JSON.parse(xhttp_ps.responseText);
+				geojson = L.geoJSON(json, {
+					style: style_route
+				});
+				route_layer = geojson.addTo(mymap);
+				
+				str = "<ol>";
+				last_through = "";
+				geojson.eachLayer( function(layer) {
+					if (last_through != layer.feature.properties.through) {
+						str += '<li><a href="#" onclick="latLng2 = L.latLng(' + layer.feature.geometry.coordinates[0][1] + ',' + layer.feature.geometry.coordinates[0][0] + '); jump_to(latLng2); return false;">' + htmlEntities(layer.feature.properties.description) + "</a></li>";
+						last_through = layer.feature.properties.through;
+					}
+				});
+				str += "</ol>";
+				document.getElementById('route_results').innerHTML = str;
+			} else {
+				document.getElementById('route_results').innerHTML = "No results.";
+			}
+			document.getElementById('route_submit').disabled = false;
+		}
+	};
+	
+	coordstr = start + ';' + destination;
+	xhttp_ps.open("GET", dijkstraserv_base + coordstr, true);
+	xhttp_ps.send();
+}
+
+function set_route_start(latlng) {
+	toggle_search("route", 1);
+	document.getElementById('route_start').value = latlng.lat + ',' + latlng.lng;
+	route();
+}
+
+function set_route_destination(latlng) {
+	toggle_search("route", 1);
+	document.getElementById('route_destination').value = latlng.lat + ',' + latlng.lng;
+	route();
+}
+
 L.MyControl = L.Control.extend({
 	options: {
 		position: 'topleft',
@@ -514,13 +608,15 @@ var baseballIcon = L.AwesomeMarkers.icon({
 
 function onMapClick(e) {
 	var addinfo = "";
+	pos = resolve_latlng(e.latlng);
+	route_links = '<br><a href="#" onclick="latLng2 = L.latLng(' + pos.lng + ',' + pos.lat + '); set_route_start(latLng2); return false;">[route from here]</a>';
+	route_links += ' <a href="#" onclick="latLng2 = L.latLng(' + pos.lng + ',' + pos.lat + '); set_route_destination(latLng2); return false;">[route to here]</a>';
 	if (current_location != "")
 		addinfo = " (part of <a target=\"_blank\" href='" + wikiurl_base + current_location + "'>" + current_location + "</a>)";
 	if (current_feature) {
-		popup.setLatLng(e.latlng).setContent("This is " + current_feature.properties.name + addinfo).openOn(mymap);
+		popup.setLatLng(e.latlng).setContent("This is " + current_feature.properties.name + addinfo + route_links).openOn(mymap);
 	} else {
-		pos = resolve_latlng(e.latlng);
-		popup.setLatLng(e.latlng).setContent("You clicked the map at " + pos.lng + "," + pos.lat + addinfo).openOn(mymap);
+		popup.setLatLng(e.latlng).setContent("You clicked the map at " + pos.lng + "," + pos.lat + addinfo + route_links).openOn(mymap);
 	}
 	current_feature = null;
 	current_location = "";
@@ -611,5 +707,7 @@ function onHashChange(e, hash=null) {
 	}
 }
 
+build_sidebar();
+
 window.addEventListener("hashchange", onHashChange, false);
 onHashChange(null);
diff --git a/lifo-dijkstraserv b/lifo-dijkstraserv
new file mode 160000
+Subproject d7d59322c57c9154faa537d8d00e4ec2071f09f