Make loading of layers more dynamic

This commit is contained in:
Markus Koch 2020-04-14 21:27:22 +02:00
parent be1dc049d6
commit e00a159ffa

View File

@ -65,7 +65,9 @@
var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real); var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real);
var layerbounds = new L.LatLngBounds(sw, ne); var layerbounds = new L.LatLngBounds(sw, ne);
function load_svg() { var layers = L.control.layers({}, {}).addTo(mymap);
function load_svg(name, url, active=1) {
var xhttp_ps = new XMLHttpRequest(); var xhttp_ps = new XMLHttpRequest();
xhttp_ps.onreadystatechange = function() { xhttp_ps.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState == 4) {
@ -74,19 +76,22 @@
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg"); svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
svgElement.setAttribute('viewBox', "0 0 16384 16384"); svgElement.setAttribute('viewBox', "0 0 16384 16384");
svgElement.innerHTML = xhttp_ps.responseText; svgElement.innerHTML = xhttp_ps.responseText;
var svgElementBounds = [ [ 85, -180 ], [ -77, 127 ] ]; var svgElementBounds = [ [ 0, 0 ], [ 1000, 1000 ] ];
var overlayMaps = {"SVG (broken)": L.svgOverlay(svgElement, svgElementBounds)}; var overlay = L.svgOverlay(svgElement, svgElementBounds);
L.control.layers({}, overlayMaps).addTo(mymap); layers.addOverlay(overlay, name);
if (active)
overlay.addTo(mymap);
return overlay;
} else { } else {
alert("Error: Could not load SVG map layer."); alert("Error: Could not load SVG map layer (" + name + ")");
} }
} }
}; };
xhttp_ps.open("GET", "/manual2.svg", true); xhttp_ps.open("GET", url, true);
xhttp_ps.send(); xhttp_ps.send();
} }
function load_satellite() { function load_tiles(name, id) {
var satellite = L.tileLayer('tiles/?id={id}&z={z}&x={x}&y={y}', { var satellite = L.tileLayer('tiles/?id={id}&z={z}&x={x}&y={y}', {
maxZoom: 8, maxZoom: 8,
maxNativeZoom: 6, maxNativeZoom: 6,
@ -95,22 +100,17 @@
noWrap: true, noWrap: true,
attribution: 'Map data &copy; <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' + attribution: 'Map data &copy; <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
'All rights reserved, ', 'All rights reserved, ',
id: 'world-2020-04-09', id: id,
tileSize: 256, tileSize: 256,
zoomOffset: 0, zoomOffset: 0,
opacity: 1.0, opacity: 1.0,
bounds: layerbounds bounds: layerbounds
}); });
var baseMaps = { layers.addBaseLayer(satellite, name);
"Satellite": satellite return satellite;
};
var overlayMaps = {};
// This is the only baseMap right now, so no need to show the selection dialog
// L.control.layers(baseMaps, overlayMaps).addTo(mymap);
satellite.addTo(mymap);
} }
function load_geojson() { function load_geojson(name, url, active=1) {
var xhttp_ps = new XMLHttpRequest(); var xhttp_ps = new XMLHttpRequest();
xhttp_ps.onreadystatechange = function() { xhttp_ps.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState == 4) {
@ -131,21 +131,25 @@
radius: 1, radius: 1,
}).bindTooltip(label, {permanent: true, direction: "center", opacity: 0.7}).openTooltip(); }).bindTooltip(label, {permanent: true, direction: "center", opacity: 0.7}).openTooltip();
}*/ }*/
}).addTo(mymap); });
L.control.layers({}, {"Cities": geojson}).addTo(mymap); layers.addOverlay(geojson, name);
if (active)
geojson.addTo(mymap); geojson.addTo(mymap);
return geojson;
} else { } else {
alert("Error: Could not load geojson map layer (cities)."); alert("Error: Could not load geojson map layer (" + name + ").");
} }
} }
}; };
xhttp_ps.open("GET", "./geojson/cities.json", true); xhttp_ps.open("GET", url, true);
xhttp_ps.send(); xhttp_ps.send();
} }
load_satellite(); load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap);
//load_svg(); load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04');
load_geojson();
//load_svg("Test", "./overlay.svg", 0);
load_geojson("Cities", "./geojson/cities.json");
L.control.scale().addTo(mymap); L.control.scale().addTo(mymap);