From e00a159ffa5979a3da64dad7b506d21ce544f41e Mon Sep 17 00:00:00 2001 From: Markus Koch Date: Tue, 14 Apr 2020 21:27:22 +0200 Subject: [PATCH] Make loading of layers more dynamic --- index.html | 52 ++++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 1c4ecdd..44e65ac 100644 --- a/index.html +++ b/index.html @@ -65,7 +65,9 @@ var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real); 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(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { @@ -74,19 +76,22 @@ svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg"); svgElement.setAttribute('viewBox', "0 0 16384 16384"); svgElement.innerHTML = xhttp_ps.responseText; - var svgElementBounds = [ [ 85, -180 ], [ -77, 127 ] ]; - var overlayMaps = {"SVG (broken)": L.svgOverlay(svgElement, svgElementBounds)}; - L.control.layers({}, overlayMaps).addTo(mymap); + 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."); + 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(); } - function load_satellite() { + function load_tiles(name, id) { var satellite = L.tileLayer('tiles/?id={id}&z={z}&x={x}&y={y}', { maxZoom: 8, maxNativeZoom: 6, @@ -95,22 +100,17 @@ noWrap: true, attribution: 'Map data © Linux-Forks, ' + 'All rights reserved, ', - id: 'world-2020-04-09', + id: id, tileSize: 256, zoomOffset: 0, opacity: 1.0, bounds: layerbounds }); - var baseMaps = { - "Satellite": 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); + layers.addBaseLayer(satellite, name); + return satellite; } - function load_geojson() { + function load_geojson(name, url, active=1) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { @@ -131,21 +131,25 @@ radius: 1, }).bindTooltip(label, {permanent: true, direction: "center", opacity: 0.7}).openTooltip(); }*/ - }).addTo(mymap); - L.control.layers({}, {"Cities": geojson}).addTo(mymap); - geojson.addTo(mymap); + }); + layers.addOverlay(geojson, name); + if (active) + geojson.addTo(mymap); + return geojson; } 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(); } - load_satellite(); - //load_svg(); - load_geojson(); + 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_svg("Test", "./overlay.svg", 0); + load_geojson("Cities", "./geojson/cities.json"); L.control.scale().addTo(mymap);