backend: Add support for streets

1 files changed, 51 insertions, 23 deletions

diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
index c8959ab..8685209 100644
--- a/htdocs/mapscript.js
+++ b/htdocs/mapscript.js
@@ -1,3 +1,19 @@
+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
 var factorx = 1 / 256 * 4;
 var factory = factorx;
@@ -28,6 +44,7 @@ L.CRS.pr = L.extend({}, L.CRS.Simple, {
 
 // Init map
 var mymap = L.map('mapid', {
+	renderer: streetLabelsRenderer,
 	crs: L.CRS.pr
 }).setView([0, 0], 6);
 
@@ -82,34 +99,45 @@ function load_tiles(name, id) {
 	return satellite;
 }
 
-function load_geojson(name, url, iconname, iconcolor, active=1) {
+function load_geojson(name, url, iconname, iconcolor, active=1, style={}) {
 	var xhttp_ps = new XMLHttpRequest();
 	xhttp_ps.onreadystatechange = function() {
 		if (this.readyState == 4) {
 			if (this.status == 200) {
+				switch (iconname) {
+				case "street":
+					onEachFeature = null;
+					pointToLayer = null;
+					break;
+				default: /* else it is a marker with the specified icon */
+					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();
+						};
+					break;
+				}
 				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();
-					}
+					style: style,
+					onEachFeature: onEachFeature,
+					pointToLayer: pointToLayer
 				});
 				layers.addOverlay(geojson, name);
 				if (active)