Fancy icons, shops, stations

Added fancy actions (TODO: include script to install) * added fetcher script for shops * added fetcher script for stations * fixed thumbnails
author: Gabriel Pérez-Cerezo <gabriel@gpcf.eu> 2020-04-15 01:08:31 +0200
committer: Gabriel Pérez-Cerezo <gabriel@gpcf.eu> 2020-04-15 01:08:31 +0200
commit: 19435b1d99c94a06459d6fb62e3f2b35085d0d25 (patch)
tree: a0553e3d2e793d2a31e35823356aae97faade4d6
parent: 3d006119c069809af189abc589e5afc4edcd9500 (diff)
download: lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.tar.gz
lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.tar.bz2
lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.zip
5 files changed, 178 insertions, 143 deletions
diff --git a/htdocs/index.html b/htdocs/index.html
index 44e65ac..f4fda26 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -7,8 +7,11 @@
 	<meta charset="utf-8" />
 	<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>
@@ -25,144 +28,6 @@
 		text-shadow: 0px 0px 5px black;
 	}
 	</style>
-	<script>
-		// Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
-		var factorx = 1/256 * 4;
-		var factory = factorx;
-		var originx = 7000;
-		var originy = 7000;
-		var zoom_level_real = 6;
-		
-		L.CRS.pr = L.extend({}, L.CRS.Simple, {
-			projection: L.Projection.LonLat,
-			transformation: new L.Transformation(factorx, factorx * originx, -factory, factory * originy),
-			
-			scale: function(zoom) {
-				return Math.pow(2, zoom);
-			},
-
-			zoom: function(scale) {
-				return Math.log(scale) / Math.LN2;
-			},
-
-			distance: function(latlng1, latlng2) {
-				var dx = latlng2.lng - latlng1.lng,
-				dy = latlng2.lat - latlng1.lat;
-		
-				return Math.sqrt(dx * dx + dy * dy);
-			},
-			infinite: true
-		});
-
-		// Init map
-		var mymap = L.map('mapid', {
-		    crs: L.CRS.pr
-		}).setView([0, 0], 6);
-
-		var mapheight = 16384;
-		var mapwidth = mapheight;
-		var sw = mymap.unproject([0, 0], zoom_level_real);
-		var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real);
-		var layerbounds = new L.LatLngBounds(sw, ne);
-		
-		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) {
-					if (this.status == 200) {
-						var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-						svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
-						svgElement.setAttribute('viewBox', "0 0 16384 16384");
-						svgElement.innerHTML = xhttp_ps.responseText;
-						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 (" + name + ")");
-					}
-				}
-			};
-			xhttp_ps.open("GET", url, true);
-			xhttp_ps.send();
-		}
-
-		function load_tiles(name, id) {
-			var satellite = L.tileLayer('tiles/?id={id}&z={z}&x={x}&y={y}', {
-				maxZoom: 8,
-				maxNativeZoom: 6,
-				minNativeZoom: 0,
-				minZoom: 0,
-				noWrap: true,
-				attribution: 'Map data &copy; <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
-					'All rights reserved, ',
-				id: id,
-				tileSize: 256,
-				zoomOffset: 0,
-				opacity: 1.0,
-				bounds: layerbounds
-			});
-			layers.addBaseLayer(satellite, name);
-			return satellite;
-		}
-		
-		function load_geojson(name, url, active=1) {
-			var xhttp_ps = new XMLHttpRequest();
-			xhttp_ps.onreadystatechange = function() {
-				if (this.readyState == 4) {
-					if (this.status == 200) {
-						var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), {
-						  onEachFeature: function (feature, layer) {
-						    label = String(feature.properties.name)
-						    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>'
-						    	);
-						    layer.bindTooltip(label, {permanent: true, direction: "center", className: "city-names"}).openTooltip();
-						  }/*,
-						  pointToLayer: function(feature,latlng){
-							    label = String(feature.properties.name)
-							    return new L.CircleMarker(latlng, {
-							    	radius: 1,
-							    }).bindTooltip(label, {permanent: true, direction: "center", opacity: 0.7}).openTooltip();
-							    }*/
-						});
-						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.send();
-		}
-
-		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);
-
-		var popup = L.popup();
-
-		function onMapClick(e) {
-			popup
-				.setLatLng(e.latlng)
-				.setContent("You clicked the map at " + e.latlng.toString())
-				.openOn(mymap);
-		}
-
-		mymap.on('click', onMapClick);
-	</script>
+	<script src="mapscript.js">	</script>
 	</body>
 </html>
diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
new file mode 100644
index 0000000..8292140
--- /dev/null
+++ b/htdocs/mapscript.js
@@ -0,0 +1,148 @@
+// Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
+var factorx = 1/256 * 4;
+var factory = factorx;
+var originx = 7000;
+var originy = 7000;
+var zoom_level_real = 6;
+
+L.CRS.pr = L.extend({}, L.CRS.Simple, {
+    projection: L.Projection.LonLat,
+    transformation: new L.Transformation(factorx, factorx * originx, -factory, factory * originy),
+    
+    scale: function(zoom) {
+	return Math.pow(2, zoom);
+    },
+
+    zoom: function(scale) {
+	return Math.log(scale) / Math.LN2;
+    },
+
+    distance: function(latlng1, latlng2) {
+	var dx = latlng2.lng - latlng1.lng,
+	    dy = latlng2.lat - latlng1.lat;
+	
+	return Math.sqrt(dx * dx + dy * dy);
+    },
+    infinite: true
+});
+
+// Init map
+var mymap = L.map('mapid', {
+    crs: L.CRS.pr
+}).setView([0, 0], 6);
+
+var mapheight = 16384;
+var mapwidth = mapheight;
+var sw = mymap.unproject([0, 0], zoom_level_real);
+var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real);
+var layerbounds = new L.LatLngBounds(sw, ne);
+
+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) {
+	    if (this.status == 200) {
+		var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+		svgElement.setAttribute('viewBox', "0 0 16384 16384");
+		svgElement.innerHTML = xhttp_ps.responseText;
+		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 (" + name + ")");
+	    }
+	}
+    };
+    xhttp_ps.open("GET", url, true);
+    xhttp_ps.send();
+}
+
+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}', {
+	maxZoom: 8,
+	maxNativeZoom: 6,
+	minNativeZoom: 0,
+	minZoom: 0,
+	noWrap: true,
+	attribution: 'Map data &copy; <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' +
+	    'All rights reserved, ',
+	id: id,
+	tileSize: 256,
+	zoomOffset: 0,
+	opacity: 1.0,
+	bounds: layerbounds
+    });
+    layers.addBaseLayer(satellite, name);
+    return satellite;
+}
+
+
+
+function load_geojson(name, url, iconname, iconcolor,active=1) {
+    var xhttp_ps = new XMLHttpRequest();
+    xhttp_ps.onreadystatechange = function() {
+	if (this.readyState == 4) {
+	    if (this.status == 200) {
+		var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), {
+		    onEachFeature: function (feature, layer) {
+			label = String(feature.properties.name)
+			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>'
+			);
+			layer.bindTooltip(label, {permanent: true, direction: "center", className: "city-names"}).openTooltip();
+		    },
+		    pointToLayer: function(feature,latlng){
+			label = String(feature.properties.name)
+			return new L.marker(latlng, {icon: L.AwesomeMarkers.icon({
+			    icon: iconname,
+			    markerColor: iconcolor
+			})}).bindTooltip(label, {permanent: false, direction: "center", opacity: 0.7}).openTooltip();
+		    }
+		});
+		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.send();
+}
+
+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", "city", "red");
+load_geojson("Stations", "./geojson/stations.json", "train", "blue");
+load_geojson("Stations", "./geojson/shops.json", "shopping-cart", "green");
+
+L.control.scale().addTo(mymap);
+
+var popup = L.popup();
+
+L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
+var baseballIcon = L.AwesomeMarkers.icon({
+    icon: 'coffee',
+    markerColor: 'red'
+});
+
+function onMapClick(e) {
+    popup
+	.setLatLng(e.latlng)
+	.setContent("You clicked the map at " + e.latlng.toString())
+	.openOn(mymap);
+}
+
+mymap.on('click', onMapClick);
diff --git a/scripts/geojson/fetch_shops.sh b/scripts/geojson/fetch_shops.sh
new file mode 100755
index 0000000..84a9f3f
--- /dev/null
+++ b/scripts/geojson/fetch_shops.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+json=`curl 'https://wiki.linux-forks.de/mediawiki/api.php?action=query&format=json&list=categorymembers&cmtitle=Category:Shops&cmlimit=1000' 2>/dev/null`
+cities=`echo "$json" | json_reformat | sed -n 's/.*"title":\s*"\([^"]*\).*/\1/p' | tr ' ' '_' | tr '\n' ' '`
+
+echo "["
+for city in $cities; do
+	./fetch_single.sh "$city"
+done
+echo "{}]"
diff --git a/scripts/geojson/fetch_single.sh b/scripts/geojson/fetch_single.sh
index 61ab79d..e669f68 100755
--- a/scripts/geojson/fetch_single.sh
+++ b/scripts/geojson/fetch_single.sh
@@ -1,9 +1,11 @@
 #!/bin/bash
-
-json=`curl "https://wiki.linux-forks.de/mediawiki/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=$1&rvsection=0&rvslots=main" | sed -s "s/\\\\\\\\n//g"`
+json=`curl "https://wiki.linux-forks.de/mediawiki/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=$1&rvsection=0&rvslots=main" 2>/dev/null | sed -s "s/\\\\\\\\n//g"`
 
 title=`echo $json | sed -n 's/.*"title":\s*"\([^"]\+\).*/\1/p'`
-image=`echo "$json" | sed -n "s/.*image = \([^|]*\).*/\1/p"`
+
+img=$(curl "https://wiki.linux-forks.de/mediawiki/index.php/$1" 2>/dev/null | sed s/\"/\\n/g | grep /thumb/ | head -n 1)
+
+image="https://wiki.linux-forks.de$img"
 
 coords=`echo "$json" | sed -n "s/.*coordinates = {{Co|\([^}]*\).*/\1/p"`
 coord_x=`echo "$coords" | sed -n "s/\([^|]\+\).*/\1/p"`
@@ -19,7 +21,7 @@ if [[ "$coord_x" != "" && "$coord_y" != "" ]]; then
 		\"name\": \"$title\",\
 		\"amenity\": \"City\",\
 		\"description\": \"$description\",\
-		\"image\": \"https://wiki.linux-forks.de/mediawiki/images/thumb/0/0e/$image/250px-$image\"\
+		\"image\": \"$image\"\
 		},\
 		\"geometry\": {\
 		\"type\": \"Point\",\
diff --git a/scripts/geojson/fetch_stations.sh b/scripts/geojson/fetch_stations.sh
new file mode 100755
index 0000000..8b76428
--- /dev/null
+++ b/scripts/geojson/fetch_stations.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+json=`curl 'https://wiki.linux-forks.de/mediawiki/api.php?action=query&format=json&list=categorymembers&cmtitle=Category:Stations&cmlimit=1000' 2>/dev/null`
+cities=`echo "$json" | json_reformat | sed -n 's/.*"title":\s*"\([^"]*\).*/\1/p' | tr ' ' '_' | tr '\n' ' '`
+
+echo "["
+for city in $cities; do
+	./fetch_single.sh "$city"
+done
+echo "{}]"
author	Gabriel Pérez-Cerezo <gabriel@gpcf.eu>	2020-04-15 01:08:31 +0200
committer	Gabriel Pérez-Cerezo <gabriel@gpcf.eu>	2020-04-15 01:08:31 +0200
commit	19435b1d99c94a06459d6fb62e3f2b35085d0d25 (patch)
tree	a0553e3d2e793d2a31e35823356aae97faade4d6
parent	3d006119c069809af189abc589e5afc4edcd9500 (diff)
download	lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.tar.gz lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.tar.bz2 lifomapserver-19435b1d99c94a06459d6fb62e3f2b35085d0d25.zip