Compare commits
	
		
			No commits in common. "e0970aacb9787b2fff3268d6cb1546861786730f" and "1e3c22c1597493c288de6b7e13a2d412160c9cd3" have entirely different histories.
		
	
	
		
			e0970aacb9
			...
			1e3c22c159
		
	
		
@ -1,33 +1,36 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					<!DOCTYPE html>
 | 
				
			||||||
<html>
 | 
					<html>
 | 
				
			||||||
	<head>
 | 
					<head>
 | 
				
			||||||
		<title>LinuxWorks Minetest Map (unofficial)</title>
 | 
						
 | 
				
			||||||
		<meta charset="utf-8"/>
 | 
						<title>LinuxWorks Minetest Map (unofficial)</title>
 | 
				
			||||||
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
					 | 
				
			||||||
		<link rel="stylesheet" href="fa/css/all.css">
 | 
					 | 
				
			||||||
		<link rel="stylesheet" href="awesomemarkers/leaflet.awesome-markers.css">
 | 
					 | 
				
			||||||
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
 | 
					 | 
				
			||||||
		<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
 | 
					 | 
				
			||||||
		<script src="awesomemarkers/leaflet.awesome-markers.js"></script>
 | 
					 | 
				
			||||||
	</head>
 | 
					 | 
				
			||||||
	<body style="position: absolute; padding: 0px; margin: 0px; width:100%; height:100%;">
 | 
					 | 
				
			||||||
		<div id="mapid" style="width: 100%; height: 100%;"></div>
 | 
					 | 
				
			||||||
		<style>
 | 
					 | 
				
			||||||
			.leaflet-tooltip.city-names {
 | 
					 | 
				
			||||||
				background-color: transparent;
 | 
					 | 
				
			||||||
				border: transparent;
 | 
					 | 
				
			||||||
				box-shadow: none;
 | 
					 | 
				
			||||||
				font-weight: bold;
 | 
					 | 
				
			||||||
				font-size: 14pt;
 | 
					 | 
				
			||||||
				opacity: 1.0;
 | 
					 | 
				
			||||||
				color: white;
 | 
					 | 
				
			||||||
				text-shadow: 0px 0px 5px black;
 | 
					 | 
				
			||||||
			}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
			a.new {
 | 
						<meta charset="utf-8" />
 | 
				
			||||||
				color: red;
 | 
						<meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
				
			||||||
			}
 | 
					
 | 
				
			||||||
		</style>
 | 
						<link rel="stylesheet" href="fa/css/all.css" >
 | 
				
			||||||
		<script src="mapscript.js"></script>
 | 
						<link rel="stylesheet" href="awesomemarkers/leaflet.awesome-markers.css">	
 | 
				
			||||||
 | 
						<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
 | 
				
			||||||
 | 
						<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
 | 
				
			||||||
 | 
						<script src="awesomemarkers/leaflet.awesome-markers.js"></script>
 | 
				
			||||||
 | 
					</head>
 | 
				
			||||||
 | 
						<body style="position: absolute; padding: 0px; margin: 0px; width:100%; height:100%;">
 | 
				
			||||||
 | 
						<div id="mapid" style="width: 100%; height: 100%;"></div>
 | 
				
			||||||
 | 
						<style>
 | 
				
			||||||
 | 
						.leaflet-tooltip.city-names {
 | 
				
			||||||
 | 
							background-color: transparent;
 | 
				
			||||||
 | 
							border: transparent;
 | 
				
			||||||
 | 
							box-shadow: none;
 | 
				
			||||||
 | 
							
 | 
				
			||||||
 | 
							font-weight: bold;
 | 
				
			||||||
 | 
							font-size: 14pt;
 | 
				
			||||||
 | 
							opacity:1.0;
 | 
				
			||||||
 | 
							color: white;
 | 
				
			||||||
 | 
							text-shadow: 0px 0px 5px black;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
						a.new {
 | 
				
			||||||
 | 
						        color: red;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
						</style>
 | 
				
			||||||
 | 
						<script src="mapscript.js">	</script>
 | 
				
			||||||
	</body>
 | 
						</body>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
 | 
				
			|||||||
@ -1,159 +1,126 @@
 | 
				
			|||||||
var streetLabelsRenderer = new L.StreetLabels({
 | 
					 | 
				
			||||||
	collisionFlg: true,
 | 
					 | 
				
			||||||
	propertyName: 'name',
 | 
					 | 
				
			||||||
	showLabelIf: function (layer) {
 | 
					 | 
				
			||||||
		return layer.geometry.type == "LineString";
 | 
					 | 
				
			||||||
	},
 | 
					 | 
				
			||||||
	fontStyle: {
 | 
					 | 
				
			||||||
		dynamicFontSize: false,
 | 
					 | 
				
			||||||
		fontSize: 10,
 | 
					 | 
				
			||||||
		fontSizeUnit: "px",
 | 
					 | 
				
			||||||
		lineWidth: 4.0,
 | 
					 | 
				
			||||||
		fillStyle: "black",
 | 
					 | 
				
			||||||
		strokeStyle: "white",
 | 
					 | 
				
			||||||
	},
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
		
 | 
					 | 
				
			||||||
// Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
 | 
					// Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
 | 
				
			||||||
var factorx = 1 / 256 * 4;
 | 
					var factorx = 1/256 * 4;
 | 
				
			||||||
var factory = factorx;
 | 
					var factory = factorx;
 | 
				
			||||||
var originx = 7000;
 | 
					var originx = 7000;
 | 
				
			||||||
var originy = 7000;
 | 
					var originy = 7000;
 | 
				
			||||||
var zoom_level_real = 6;
 | 
					var zoom_level_real = 6;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
L.CRS.pr = L.extend({}, L.CRS.Simple, {
 | 
					L.CRS.pr = L.extend({}, L.CRS.Simple, {
 | 
				
			||||||
	projection: L.Projection.LonLat,
 | 
					    projection: L.Projection.LonLat,
 | 
				
			||||||
	transformation: new L.Transformation(factorx,factorx * originx,-factory,factory * originy),
 | 
					    transformation: new L.Transformation(factorx, factorx * originx, -factory, factory * originy),
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    scale: function(zoom) {
 | 
				
			||||||
 | 
						return Math.pow(2, zoom);
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	scale: function(zoom) {
 | 
					    zoom: function(scale) {
 | 
				
			||||||
		return Math.pow(2, zoom);
 | 
						return Math.log(scale) / Math.LN2;
 | 
				
			||||||
	},
 | 
					    },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	zoom: function(scale) {
 | 
					    distance: function(latlng1, latlng2) {
 | 
				
			||||||
		return Math.log(scale) / Math.LN2;
 | 
						var dx = latlng2.lng - latlng1.lng,
 | 
				
			||||||
	},
 | 
						    dy = latlng2.lat - latlng1.lat;
 | 
				
			||||||
 | 
						
 | 
				
			||||||
	distance: function(latlng1, latlng2) {
 | 
						return Math.sqrt(dx * dx + dy * dy);
 | 
				
			||||||
		var dx = latlng2.lng - latlng1.lng
 | 
					    },
 | 
				
			||||||
		  , dy = latlng2.lat - latlng1.lat;
 | 
					    infinite: true
 | 
				
			||||||
 | 
					 | 
				
			||||||
		return Math.sqrt(dx * dx + dy * dy);
 | 
					 | 
				
			||||||
	},
 | 
					 | 
				
			||||||
	infinite: true
 | 
					 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// Init map
 | 
					// Init map
 | 
				
			||||||
var mymap = L.map('mapid', {
 | 
					var mymap = L.map('mapid', {
 | 
				
			||||||
	renderer: streetLabelsRenderer,
 | 
					    crs: L.CRS.pr
 | 
				
			||||||
	crs: L.CRS.pr
 | 
					 | 
				
			||||||
}).setView([0, 0], 6);
 | 
					}).setView([0, 0], 6);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
var mapheight = 16384;
 | 
					var mapheight = 16384;
 | 
				
			||||||
var mapwidth = mapheight;
 | 
					var mapwidth = mapheight;
 | 
				
			||||||
var sw = mymap.unproject([0, 0], zoom_level_real);
 | 
					var sw = mymap.unproject([0, 0], zoom_level_real);
 | 
				
			||||||
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);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
var layers = L.control.layers({}, {}).addTo(mymap);
 | 
					var layers = L.control.layers({}, {}).addTo(mymap);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function load_svg(name, url, active=1) {
 | 
					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) {
 | 
				
			||||||
			if (this.status == 200) {
 | 
						    if (this.status == 200) {
 | 
				
			||||||
				var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 | 
							var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 | 
				
			||||||
				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 = [[0, 0], [1000, 1000]];
 | 
							var svgElementBounds = [ [ 0, 0 ], [ 1000, 1000 ] ];
 | 
				
			||||||
				var overlay = L.svgOverlay(svgElement, svgElementBounds);
 | 
							var overlay = L.svgOverlay(svgElement, svgElementBounds);
 | 
				
			||||||
				layers.addOverlay(overlay, name);
 | 
							layers.addOverlay(overlay, name);
 | 
				
			||||||
				if (active)
 | 
							if (active)
 | 
				
			||||||
					overlay.addTo(mymap);
 | 
							    overlay.addTo(mymap);
 | 
				
			||||||
				return overlay;
 | 
							return overlay;
 | 
				
			||||||
			} else {
 | 
						    } else {
 | 
				
			||||||
				alert("Error: Could not load SVG map layer (" + name + ")");
 | 
							alert("Error: Could not load SVG map layer (" + name + ")");
 | 
				
			||||||
			}
 | 
						    }
 | 
				
			||||||
		}
 | 
					 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
	;
 | 
					    };
 | 
				
			||||||
	xhttp_ps.open("GET", url, true);
 | 
					    xhttp_ps.open("GET", url, true);
 | 
				
			||||||
	xhttp_ps.send();
 | 
					    xhttp_ps.send();
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function load_tiles(name, id) {
 | 
					function load_tiles(name, id) {
 | 
				
			||||||
	var satellite = L.tileLayer('https://notsyncing.net/maps.linux-forks.de/tiles/?id={id}&z={z}&x={x}&y={y}', {
 | 
					    var satellite = L.tileLayer('https://notsyncing.net/maps.linux-forks.de/tiles/?id={id}&z={z}&x={x}&y={y}', {
 | 
				
			||||||
		maxZoom: 8,
 | 
						maxZoom: 8,
 | 
				
			||||||
		maxNativeZoom: 6,
 | 
						maxNativeZoom: 6,
 | 
				
			||||||
		minNativeZoom: 0,
 | 
						minNativeZoom: 0,
 | 
				
			||||||
		minZoom: 0,
 | 
						minZoom: 0,
 | 
				
			||||||
		noWrap: true,
 | 
						noWrap: true,
 | 
				
			||||||
		attribution: 'Map data © <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' + 'All rights reserved, ',
 | 
						attribution: 'Map data © <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
 | 
				
			||||||
		id: id,
 | 
						    'All rights reserved, ',
 | 
				
			||||||
		tileSize: 256,
 | 
						id: id,
 | 
				
			||||||
		zoomOffset: 0,
 | 
						tileSize: 256,
 | 
				
			||||||
		opacity: 1.0,
 | 
						zoomOffset: 0,
 | 
				
			||||||
		bounds: layerbounds
 | 
						opacity: 1.0,
 | 
				
			||||||
	});
 | 
						bounds: layerbounds
 | 
				
			||||||
	layers.addBaseLayer(satellite, name);
 | 
					    });
 | 
				
			||||||
	return satellite;
 | 
					    layers.addBaseLayer(satellite, name);
 | 
				
			||||||
 | 
					    return satellite;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function load_geojson(name, url, iconname, iconcolor, active=1, style={}) {
 | 
					
 | 
				
			||||||
	var xhttp_ps = new XMLHttpRequest();
 | 
					
 | 
				
			||||||
	xhttp_ps.onreadystatechange = function() {
 | 
					function load_geojson(name, url, iconname, iconcolor,active=1) {
 | 
				
			||||||
		if (this.readyState == 4) {
 | 
					    var xhttp_ps = new XMLHttpRequest();
 | 
				
			||||||
			if (this.status == 200) {
 | 
					    xhttp_ps.onreadystatechange = function() {
 | 
				
			||||||
				switch (iconname) {
 | 
						if (this.readyState == 4) {
 | 
				
			||||||
				case "street":
 | 
						    if (this.status == 200) {
 | 
				
			||||||
					onEachFeature = null;
 | 
							var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), {
 | 
				
			||||||
					pointToLayer = null;
 | 
							    onEachFeature: function (feature, layer) {
 | 
				
			||||||
					break;
 | 
								label = String(feature.properties.name)
 | 
				
			||||||
				default: /* else it is a marker with the specified icon */
 | 
								layer.bindPopup(
 | 
				
			||||||
					onEachFeature = function(feature, layer) {
 | 
								    '<h1><a href="https://wiki.linux-forks.de/mediawiki/index.php/'+feature.properties.name+'">'+feature.properties.name+'</a> ('+feature.geometry.coordinates+')</h1>'+
 | 
				
			||||||
							label = String(feature.properties.name)
 | 
									'<p><img style="width:100%" src="' + feature.properties.image + '"></p>' +
 | 
				
			||||||
							layer.bindPopup('<h1><a href="https://wiki.linux-forks.de/mediawiki/index.php/' + feature.properties.name + '">' + feature.properties.name + '</a> (' + feature.geometry.coordinates + ')</h1>' + '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + '<p>' + feature.properties.description + '</p>');
 | 
									'<p>'+feature.properties.description+'</p>'
 | 
				
			||||||
							layer.bindTooltip(label, {
 | 
								);
 | 
				
			||||||
								permanent: true,
 | 
								layer.bindTooltip(label, {permanent: true, direction: "center", className: "city-names"}).openTooltip();
 | 
				
			||||||
								direction: "center",
 | 
							    },
 | 
				
			||||||
								className: "city-names"
 | 
							    pointToLayer: function(feature,latlng){
 | 
				
			||||||
							}).openTooltip();
 | 
								label = String(feature.properties.name)
 | 
				
			||||||
						};
 | 
								return new L.marker(latlng, {icon: L.AwesomeMarkers.icon({
 | 
				
			||||||
					pointToLayer = function(feature, latlng) {
 | 
								    icon: iconname,
 | 
				
			||||||
							label = String(feature.properties.name)
 | 
								    markerColor: iconcolor
 | 
				
			||||||
							return new L.marker(latlng,{
 | 
								})}).bindTooltip(label, {permanent: false, direction: "center", opacity: 0.7}).openTooltip();
 | 
				
			||||||
								icon: L.AwesomeMarkers.icon({
 | 
							    }
 | 
				
			||||||
									icon: iconname,
 | 
							});
 | 
				
			||||||
									markerColor: iconcolor
 | 
							layers.addOverlay(geojson, name);
 | 
				
			||||||
								})
 | 
							if (active)
 | 
				
			||||||
							}).bindTooltip(label, {
 | 
							    geojson.addTo(mymap);
 | 
				
			||||||
								permanent: false,
 | 
							return geojson;
 | 
				
			||||||
								direction: "center",
 | 
						    } else {
 | 
				
			||||||
								opacity: 0.7
 | 
							alert("Error: Could not load geojson map layer (" + name + ").");
 | 
				
			||||||
							}).openTooltip();
 | 
						    }
 | 
				
			||||||
						};
 | 
					 | 
				
			||||||
					break;
 | 
					 | 
				
			||||||
				}
 | 
					 | 
				
			||||||
				var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), {
 | 
					 | 
				
			||||||
					style: style,
 | 
					 | 
				
			||||||
					onEachFeature: onEachFeature,
 | 
					 | 
				
			||||||
					pointToLayer: pointToLayer
 | 
					 | 
				
			||||||
				});
 | 
					 | 
				
			||||||
				layers.addOverlay(geojson, name);
 | 
					 | 
				
			||||||
				if (active)
 | 
					 | 
				
			||||||
					geojson.addTo(mymap);
 | 
					 | 
				
			||||||
				return geojson;
 | 
					 | 
				
			||||||
			} else {
 | 
					 | 
				
			||||||
				alert("Error: Could not load geojson map layer (" + name + ").");
 | 
					 | 
				
			||||||
			}
 | 
					 | 
				
			||||||
		}
 | 
					 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
	;
 | 
					    };
 | 
				
			||||||
	xhttp_ps.open("GET", url, true);
 | 
					    xhttp_ps.open("GET", url, true);
 | 
				
			||||||
	xhttp_ps.send();
 | 
					    xhttp_ps.send();
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap);
 | 
					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_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
//load_svg("Test", "./overlay.svg", 0);
 | 
					//load_svg("Test", "./overlay.svg", 0);
 | 
				
			||||||
@ -173,12 +140,15 @@ var popup = L.popup();
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
 | 
					L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
 | 
				
			||||||
var baseballIcon = L.AwesomeMarkers.icon({
 | 
					var baseballIcon = L.AwesomeMarkers.icon({
 | 
				
			||||||
	icon: 'coffee',
 | 
					    icon: 'coffee',
 | 
				
			||||||
	markerColor: 'red'
 | 
					    markerColor: 'red'
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function onMapClick(e) {
 | 
					function onMapClick(e) {
 | 
				
			||||||
	popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
 | 
					    popup
 | 
				
			||||||
 | 
						.setLatLng(e.latlng)
 | 
				
			||||||
 | 
						.setContent("You clicked the map at " + e.latlng.toString())
 | 
				
			||||||
 | 
						.openOn(mymap);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
mymap.on('click', onMapClick);
 | 
					mymap.on('click', onMapClick);
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user