summaryrefslogtreecommitdiff
path: root/htdocs/mapscript.js
diff options
context:
space:
mode:
Diffstat (limited to 'htdocs/mapscript.js')
-rw-r--r--htdocs/mapscript.js126
1 files changed, 112 insertions, 14 deletions
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);