var editor_mode = 0; var mymap; var polyconf_show_street_names = 5; // Zoom level for when to start showing street names 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({ collisionFlg: true, propertyName: 'name', showLabelIf: function (layer) { switch (layer.geometry.type) { case "LineString": if (mymap.getZoom() <= polyconf_show_street_names) return false; break; case "Polygon": if (mymap.getZoom() > polyconf_show_street_names) return false; break; default: return false; } return true; }, fontStyle: { dynamicFontSize: true, fontSize: 10, fontSizeUnit: "px", lineWidth: 3.0, fillStyle: "black", strokeStyle: "white", }, }); streetLabelsRenderer._getCollisionFlag = function (layer) { if (!(layer instanceof L.Polygon)) // Always check collision for streets return true; zoom = mymap.getZoom(); return (zoom < 5); } streetLabelsRenderer._getDynamicFontSize = function (layer) { zoom = mymap.getZoom(); switch (layer.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.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: break; } return 10; } var style_outlines = { radius: 8, fillColor: "#ff7800", color: "black", opacity: 1.0, fillOpacity: 0.5 }; 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; var factory = factorx; var originx = 7000 + 8 + 0.5; var originy = 7000 + 8 - 0.5; var zoom_level_real = 6; L.CRS.pr = L.extend({}, L.CRS.Simple, { projection: L.Projection.LonLat, transformation: new L.Transformation(factorx,factorx * originx,-factory,factory * originy), scale: function(zoom) { return Math.pow(2, zoom); }, zoom: function(scale) { return Math.log(scale) / Math.LN2; }, distance: function(latlng1, latlng2) { var dx = latlng2.lng - latlng1.lng , dy = latlng2.lat - latlng1.lat; return Math.sqrt(dx * dx + dy * dy); }, infinite: true }); // Init map mymap = L.map('mapid', { renderer: streetLabelsRenderer, editable: true, crs: L.CRS.pr }).setView([0, 0], 5); var mapheight = 16384; var mapwidth = mapheight; var sw = mymap.unproject([0, 0], zoom_level_real); var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real); var layerbounds = new L.LatLngBounds(sw,ne); var layers = L.control.layers({}, {}).addTo(mymap); function load_svg(name, url, active=1) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg"); svgElement.setAttribute('viewBox', "0 0 16384 16384"); svgElement.innerHTML = xhttp_ps.responseText; var svgElementBounds = [[0, 0], [1000, 1000]]; var overlay = L.svgOverlay(svgElement, svgElementBounds); layers.addOverlay(overlay, name); if (active) overlay.addTo(mymap); return overlay; } else { alert("Error: Could not load SVG map layer (" + name + ")"); } } } ; xhttp_ps.open("GET", url, true); xhttp_ps.send(); } function load_tiles(name, id) { var satellite = L.tileLayer('https://notsyncing.net/maps.linux-forks.de/tiles/{id}/{z}/{y}/{x}.png', { maxZoom: 14 /*8*/, maxNativeZoom: 6, minNativeZoom: 0, minZoom: 0, noWrap: true, attribution: 'Map data © Linux-Forks', id: id, tileSize: 256, zoomOffset: 0, opacity: 1.0, bounds: layerbounds }); layers.addBaseLayer(satellite, name); return satellite; } var current_location = ""; var current_feature = null; function load_geojson(name, url, geotype, iconcolor, active=1, style={}) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { onEachFeature = null; pointToLayer = null; filter = null; switch (geotype) { case "street": onEachFeature = function(feature, layer) { layer.myTag = geotype; layer.myName = name; layer.on("click", function (e) { current_feature = feature; }); }; break; case "outline": onEachFeature = function(feature, layer) { layer.myTag = geotype; layer.myName = name; layer.on("click", function (e) { current_location = feature.properties.name; }); } break; default: /* else it is a marker with the specified icon */ onEachFeature = function(feature, layer) { label = String(feature.properties.name) layer.bindPopup('
' + feature.properties.description + '
'); layer.bindTooltip(label, { permanent: true, direction: "center", className: "city-names" }).openTooltip().on('click', jump_to_marker); }; pointToLayer = function(feature, latlng) { label = String(feature.properties.name) if (geotype == "auto") { iconname = "star"; // default icon iconcolor = "orange"; for (var i = 0; i < feature.properties.categories.length; i++) { category = feature.properties.categories[i].toLowerCase(); switch (category) { case "stations": iconname = "train"; iconcolor = "blue"; break; case "shops": iconname = "shopping-cart"; iconcolor = "green"; break; case "city": case "village": case "town": case "settlements": iconname = "city"; iconcolor = "red"; break; case "parks": iconname = "tree"; iconcolor = "green"; break; case "courts": iconname = "balance-scale"; iconcolor = "black"; break; case "train depots": iconname = "wrench"; iconcolor = "violet"; break; case "hotels": iconname = "hotel"; iconcolor = "gray"; break; case "beaches": iconname = "umbrella-beach"; iconcolor = "orange"; break; case "waterway": iconname = "water"; iconcolor = "blue"; break; } if (iconname != "star") break; } } else { iconname = geotype; } marker = new L.marker(latlng,{ icon: L.AwesomeMarkers.icon({ icon: iconname, markerColor: iconcolor }) }).bindTooltip(label, { permanent: false, direction: "center", opacity: 0.7 }).openTooltip(); return marker; }; break; } var json = JSON.parse(xhttp_ps.responseText); geojson = L.geoJSON(json, { style: style, onEachFeature: onEachFeature, pointToLayer: pointToLayer, filter: filter }); layers.addOverlay(geojson, name); if (active) geojson.addTo(mymap); return geojson; } else { console.log("Error: Could not load geojson map layer (" + name + ")."); } } } ; xhttp_ps.open("GET", url, true); 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_geojson("All", "./geojson/all.json", "auto", "auto", 0); load_geojson("Streets", "./geojson/streets.json", "street", "auto", 1, style_streets); load_geojson("Cities", "./geojson/city_outlines.json", "outline", "auto", 1, style_outlines); L.control.scale().addTo(mymap); function resolve_latlng(latlng, recenter = 0) { latlng.lng = Math.round(latlng.lng); latlng.lat = Math.round(latlng.lat); return latlng; } function get_current_location_str() { var latlng = resolve_latlng(mymap.getCenter()); return latlng.lng + "," + latlng.lat + "," + mymap.getZoom(); } /* Important: Do not use mymap.setView, use this function instead */ function jump_to(latlng, zoom = -1) { if (zoom == -1) zoom = mymap.getZoom(); if (!editor_mode) { pos = resolve_latlng(latlng); document.location.hash = "#" + pos.lng + "," + pos.lat + "," + zoom; } else { mymap.setView(latlng, zoom); } } function jump_to_marker(e) { jump_to(e.target.getLatLng()); } function prompt_location() { var str = prompt("Enter coordinates to jump to:\n\n" + "Format: x, y [, zoom]", get_current_location_str()); if (str) { if (!editor_mode) document.location.hash = "#" + str; else onHashChange(null, "#" + str); } } var search_element; 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 = ''; } 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 = '<-- Return to search