Make loading of layers more dynamic

1 files 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 &copy; <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
 					'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);