Make loading of layers more dynamic
This commit is contained in:
		
							parent
							
								
									be1dc049d6
								
							
						
					
					
						commit
						e00a159ffa
					
				
							
								
								
									
										50
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										50
									
								
								index.html
									
									
									
									
									
								
							@ -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 © <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
 | 
									attribution: 'Map data © <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);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user