diff options
Diffstat (limited to 'htdocs/mapscript.js')
-rw-r--r-- | htdocs/mapscript.js | 126 |
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;"><-- 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); |