From cfeafc11d9b31d692730feb1813f72136756afb3 Mon Sep 17 00:00:00 2001
From: Markus Koch <markus@notsyncing.net>
Date: Mon, 20 Apr 2020 18:39:48 +0200
Subject: [PATCH] Update street width depending on zoom level

---
 htdocs/leafletjs/Leaflet.streetlabels.js |  2 +-
 htdocs/mapscript.js                      | 32 ++++++++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/htdocs/leafletjs/Leaflet.streetlabels.js b/htdocs/leafletjs/Leaflet.streetlabels.js
index 724c585..91bd596 100644
--- a/htdocs/leafletjs/Leaflet.streetlabels.js
+++ b/htdocs/leafletjs/Leaflet.streetlabels.js
@@ -130,7 +130,7 @@ L.StreetLabels = L.LabelTextCollision
                     if (layer._parts) {
                         ctx.textAlign = "center";
                         ctx.textBaseline = "middle";
-                        ctx.lineWidth = 3;
+                        //ctx.lineWidth = 3;
                         layer._parts.forEach(function (part) {
                             //Build the points list for the first part
                             var pathPoints = [];
diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js
index 03aa222..e450af9 100644
--- a/htdocs/mapscript.js
+++ b/htdocs/mapscript.js
@@ -4,13 +4,17 @@ var streetLabelsRenderer = new L.StreetLabels({
 	collisionFlg: true,
 	propertyName: 'name',
 	showLabelIf: function (layer) {
-		return (layer.geometry.type == "LineString"|| layer.geometry.type == "Polygon");
+		if (!(layer.geometry.type == "LineString"|| layer.geometry.type == "Polygon"))
+			return false;
+		if (mymap.getZoom() <= 5)
+			return false;
+		return true;
 	},
 	fontStyle: {
 		dynamicFontSize: true,
-		fontSize: 11,
+		fontSize: 10,
 		fontSizeUnit: "px",
-		lineWidth: 4.0,
+		lineWidth: 3.0,
 		fillStyle: "black",
 		strokeStyle: "white",
 	},
@@ -18,10 +22,10 @@ var streetLabelsRenderer = new L.StreetLabels({
 
 streetLabelsRenderer._getDynamicFontSize = function () {
 	zoom = mymap.getZoom();
-	if (zoom <= 7)
+	if (zoom <= 8)
 		return 11;
 	else
-		return 2**(zoom - 8) * 11;
+		return 2**(zoom - 9) * 11;
 }
 
 
@@ -375,8 +379,25 @@ function update_aa_status() {
 		document.getElementById('mapid').classList.remove("no-aa");
 }
 
+function update_street_width() {
+	zoom = mymap.getZoom();
+	var w;
+	if (zoom <= 6) {
+		w = 2;
+	} else {
+		w = 2**zoom * 0.016 * 2;
+	}
+	var myStyle = {weight: w, opacity: 0.7};
+	for (var i = 0; i < layers._layers.length; i++) {
+		if (!layers._layers[i].layer._layers)
+			continue;
+		layers._layers[i].layer.setStyle(myStyle);
+	}
+}
+
 mymap.on('zoomend', function () {is_user_drag = 1; update_hash_from_position();});
 mymap.on('zoomend', update_aa_status);
+mymap.on('zoomend', update_street_width);
 mymap.on('moveend', update_hash_from_position);
 mymap.on('dragstart', function () { is_user_drag = 1;});
 mymap.on('keydown', function (e) { if (e.originalEvent.code.match(/Arrow.*/)) is_user_drag = 1;});
@@ -397,3 +418,4 @@ function onHashChange(e, hash=null) {
 
 window.addEventListener("hashchange", onHashChange, false);
 onHashChange(null);
+update_street_width();