summaryrefslogtreecommitdiff
path: root/htdocs/mapscript.js
diff options
context:
space:
mode:
Diffstat (limited to 'htdocs/mapscript.js')
-rw-r--r--htdocs/mapscript.js178
1 files changed, 141 insertions, 37 deletions
diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
index 3eccb65..6eb6e9f 100644
--- a/htdocs/mapscript.js
+++ b/htdocs/mapscript.js
@@ -5,6 +5,8 @@ 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 polyconf_show_oceans = 5; // Show ocean labels from zoom level
+
var dijkstraserv_base = "https://notsyncing.net/dijkstra/";
var wikiurl_base = "https://wiki.linux-forks.de/mediawiki/index.php/"
var tiles_base = "https://notsyncing.net/maps.linux-forks.de/tiles/"
@@ -13,12 +15,14 @@ var streetLabelsRenderer = new L.StreetLabels({
collisionFlg: true,
propertyName: 'name',
showLabelIf: function (layer) {
- switch (layer.geometry.type) {
+ switch (layer.feature.geometry.type) {
case "LineString":
if (mymap.getZoom() <= polyconf_show_street_names)
return false;
break;
case "Polygon":
+ if (layer.myName == "Oceans")
+ return (mymap.getZoom() > polyconf_show_oceans);
if (mymap.getZoom() > polyconf_show_street_names)
return false;
break;
@@ -34,7 +38,7 @@ var streetLabelsRenderer = new L.StreetLabels({
fontSizeUnit: "px",
lineWidth: 3.0,
fillStyle: "black",
- strokeStyle: "white",
+ strokeStyle: "white"
},
});
@@ -48,38 +52,44 @@ streetLabelsRenderer._getCollisionFlag = function (layer) {
streetLabelsRenderer._getDynamicFontSize = function (layer) {
zoom = mymap.getZoom();
- switch (layer.geometry.type) {
- case "LineString":
- if (zoom <= 8)
- return 11;
- else
- return 2**(zoom - 9) * 11;
+ switch (layer.myName) {
+ case "Oceans":
+ return size *= 2.0/3;;
break;
- case "Polygon":
- var size;
- if (zoom >= 4)
- size = 30;
- else
- size = 20;
- switch (layer.properties.type) {
- case "city":
- break;
- case "town":
- size *= 2.0/3.0;
- break;
- case "village":
- size *= 1.5/3;
- break;
- case "district":
- size *= 2.0/3;
+ default:
+ switch (layer.feature.geometry.type) {
+ case "LineString":
+ if (zoom <= 8)
+ return 11;
+ else
+ return 2**(zoom - 9) * 11;
break;
+ case "Polygon":
+ var size;
+ if (zoom >= 4)
+ size = 30;
+ else
+ size = 20;
+ switch (layer.feature.properties.type) {
+ case "city":
+ break;
+ case "town":
+ size *= 2.0/3.0;
+ break;
+ case "village":
+ size *= 1.5/3;
+ break;
+ case "district":
+ size *= 2.0/3;
+ break;
+ default:
+ size *= 0.5/3;
+ break;
+ }
+ return size;
default:
- size *= 0.5/3;
break;
}
- return size;
- default:
- break;
}
return 10;
}
@@ -95,6 +105,24 @@ var style_outlines = {
var style_streets = {
};
+var style_trains = {
+ color: "yellow"
+ };
+
+var style_tech = {
+ color: "red"
+ };
+
+var style_rivers = {
+ color: "blue",
+ fillColor: "#00999955",
+ };
+
+var style_oceans = {
+ color: "#00556655",
+ fillColor: "#00999955",
+ };
+
var style_route = {
radius: 8,
fillColor: "#00ff00",
@@ -176,7 +204,7 @@ function load_tiles(name, id) {
if (name != "") {
url = tiles_base + '{id}/{z}/{y}/{x}.png';
}
- var satellite = L.tileLayer(url, {
+ var satellite = new L.TileLayer(url, {
maxZoom: 14 /*8*/,
maxNativeZoom: 6,
minNativeZoom: 0,
@@ -195,6 +223,7 @@ function load_tiles(name, id) {
var current_location = "";
var current_feature = null;
+var current_layer = null;
function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
var xhttp_ps = new XMLHttpRequest();
xhttp_ps.onreadystatechange = function() {
@@ -206,10 +235,14 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
switch (geotype) {
case "street":
+ case "train":
onEachFeature = function(feature, layer) {
layer.myTag = geotype;
layer.myName = name;
+ if (geotype == "train")
+ layer.no_search = true
layer.on("click", function (e) {
+ current_layer = layer;
current_feature = feature;
});
};
@@ -225,6 +258,7 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
break;
default: /* else it is a marker with the specified icon */
onEachFeature = function(feature, layer) {
+ layer.myName = name;
label = String(feature.properties.name)
layer.bindPopup('<h1><a target="_blank" href="' + wikiurl_base + feature.properties.name + '">' + feature.properties.name + '</a> (' + feature.geometry.coordinates + ')</h1>' + '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + '<p>' + feature.properties.description + '</p>');
layer.bindTooltip(label, {
@@ -323,13 +357,29 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
xhttp_ps.send();
}
-load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap);
-load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04');
+load_tiles("Satellite (2020-12-13)", 'world-2020-12-13').addTo(mymap);
+load_tiles("Satellite (2020-11-20)", 'world-2020-11-20');
+load_tiles("Satellite (2020-08-30)", 'world-2020-08-30');
+load_tiles("Satellite (2020-06-04)", 'world-2020-06-04');
+load_tiles("Satellite (2020-04-26)", 'world-2020-04-26');
+load_tiles("Satellite (2020-04-09)", 'world-2020-04-09');
load_tiles("None", '');
load_geojson("All", "./geojson/all.json", "auto", "auto", 0);
load_geojson("Streets", "./geojson/streets.json", "street", "auto", 1, style_streets);
+load_geojson("Trainlines (beta)", "./geojson/trainlines.json", "train", "auto", 1, style_trains);
+load_geojson("TL Access (tech layer)", "./geojson/trainlines_access.json", "train", "auto", 0, style_tech);
+load_geojson("Railroad Tracks", "./geojson/trains.json", "train", "auto", 0, style_trains);
load_geojson("Cities", "./geojson/city_outlines.json", "outline", "auto", 1, style_outlines);
+load_geojson("Rivers", "./geojson/rivers.json", "street", "auto", 1, style_rivers);
+load_geojson("Oceans", "./geojson/oceans.json", "outline", "auto", 1, style_oceans);
+
+function update_geojson() {
+ var xhttp_ps = new XMLHttpRequest();
+ xhttp_ps.open("GET", "https://notsyncing.net/maps.linux-forks.de/geojson/update.php", true);
+ xhttp_ps.send();
+}
+update_geojson();
L.control.scale().addTo(mymap);
@@ -387,7 +437,11 @@ function build_sidebar() {
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>';
+ route_element.innerHTML = '<a href="#" onclick="toggle_search(\'search\',1);return false;">&lt;-- Return to search<br><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 type="checkbox" name="use_trains" id="use_trains" value="trains" checked disabled=true><label for="use_trains"> Use trains (only S12)</label><br>\
+ <input id="route_submit" type="button" style="width:100%;" value="Go!" onclick="route(event)"><div id="route_results"></div>';
}
}
@@ -451,6 +505,8 @@ function search(e) {
for (key in layers._layers[i].layer._layers) {
item = layers._layers[i].layer._layers[key];
+ if (item.hasOwnProperty("no_search"))
+ break;
switch (item.feature.geometry.type) {
case "Point":
regex = new RegExp(query, 'i');
@@ -504,7 +560,7 @@ function search(e) {
var route_layer;
function route(e) // BOOKMARK
-{
+{
if (route_layer) {
mymap.removeLayer(route_layer);
}
@@ -533,7 +589,7 @@ function route(e) // BOOKMARK
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>";
+ 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).replace('[T]', '🚆️') + "</a></li>";
last_through = layer.feature.properties.through;
}
});
@@ -606,6 +662,31 @@ L.GotoControl = L.MyControl.extend({
mymap.addControl(new L.SearchControl());
mymap.addControl(new L.GotoControl());
+L.CurrentPosControl = L.Control.extend({
+ options: {
+ position : 'bottomleft',
+ callback: null,
+ kind: "",
+ html: ''
+ },
+ onAdd: function (map) {
+ container = L.DomUtil.create('div', 'leaflet-control-scale leaflet-bar');
+ container.style.visibility = "hidden";
+ div = L.DomUtil.create('div', '', container);
+ div.style.backgroundColor = "white";
+ div.style.paddingLeft = "4px";
+ div.style.paddingRight = "4px";
+ div.style.borderRadius = "2px";
+ div.style.margin = "2px";
+ div.style.opacity = "0.6";
+ div.style.fontWeight = "bold";
+ div.innerHTML = "";
+ div.id = "current_position_label";
+ return container;
+ }
+});
+mymap.addControl(new L.CurrentPosControl());
+
var popup = L.popup();
L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
@@ -614,19 +695,29 @@ var baseballIcon = L.AwesomeMarkers.icon({
markerColor: 'red'
});
+function escapeHtml(text) {
+ return text
+ .replace(/&/g, "&amp;")
+ .replace(/</g, "&lt;")
+ .replace(/>/g, "&gt;")
+ .replace(/"/g, "&quot;")
+ .replace(/'/g, "&#039;");
+}
+
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>)";
+ addinfo = " (part of <a target=\"_blank\" href=\"" + wikiurl_base + encodeURIComponent(current_location) + "\">" + escapeHtml(current_location) + "</a>)";
if (current_feature) {
- popup.setLatLng(e.latlng).setContent("This is " + current_feature.properties.name + addinfo + route_links).openOn(mymap);
+ popup.setLatLng(e.latlng).setContent("This is <a target=\"_blank\" href=\"" + wikiurl_base + current_layer.myName + ":" + encodeURIComponent(current_feature.properties.name) + "\">" + escapeHtml(current_feature.properties.name) + "</a>" + addinfo + route_links).openOn(mymap);
} else {
popup.setLatLng(e.latlng).setContent("You clicked the map at " + pos.lng + "," + pos.lat + addinfo + route_links).openOn(mymap);
}
current_feature = null;
+ current_layer = null;
current_location = "";
}
@@ -687,6 +778,17 @@ function update_outline_visibility() {
});
}
+function update_current_mouse_position(e) {
+ var lbl = document.getElementById('current_position_label');
+ if (e.type == "mouseout") {
+ lbl.parentElement.style.visibility = "hidden";
+ return;
+ }
+ lbl.parentElement.style.visibility = "visible";
+ pos = resolve_latlng(e.latlng);
+ lbl.innerHTML = pos.lng + "," + pos.lat;
+}
+
mymap.on('zoomend', function () {is_user_drag = 1; update_hash_from_position();});
mymap.on('zoomend', update_aa_status);
mymap.on('zoomend', update_street_width);
@@ -695,6 +797,8 @@ mymap.on('moveend', update_hash_from_position);
mymap.on('dragstart', function () { is_user_drag = 1;});
mymap.on('keydown', function (e) { if (e.originalEvent.code.match(/Arrow.*/)) is_user_drag = 1;});
mymap.on('overlayadd', function (e) { update_street_width(); update_outline_visibility(); });
+mymap.on('mousemove', update_current_mouse_position);
+mymap.on('mouseout', update_current_mouse_position);
function onHashChange(e, hash=null) {
if (!hash)
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-01 17:10:01 +0000