From 9c671f47350b545785223475aaf23a623c610f62 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Fri, 25 Sep 2020 23:10:40 +0200
Subject: [PATCH] Fix bug with weird clipping behaviour (cause of #125)

---
 Logic/FilteredLayer.ts | 52 ++++++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts
index ba994b9..ff84209 100644
--- a/Logic/FilteredLayer.ts
+++ b/Logic/FilteredLayer.ts
@@ -52,12 +52,20 @@ export class FilteredLayer {
 
         this._wayHandling = layerDef.wayHandling;
         this._showOnPopup = showOnPopup;
-        this._style = layerDef.style;
-        if (this._style === undefined) {
-            this._style = function () {
+        this._style = (tags) => {
+            if(layerDef.style === undefined){
                 return {icon: {iconUrl: "./assets/bug.svg"}, color: "#000"};
             }
-        }
+            
+            const obj = layerDef.style(tags);
+            if(obj.weight && typeof (obj.weight) === "string"){
+                obj.weight = Number(obj.weight);// Weight MUST be a number, otherwise leaflet does weird things. see https://github.com/Leaflet/Leaflet/issues/6075
+                if(isNaN(obj.weight)){
+                    obj.weight = undefined;
+                }
+            }
+            return obj;
+        };
         this.name = name;
         this.filters = layerDef.overpassFilter;
         this._maxAllowedOverlap = layerDef.maxAllowedOverlapPercentage;
@@ -215,26 +223,26 @@ export class FilteredLayer {
             pointToLayer: function (feature, latLng) {
                 const style = self._style(feature.properties);
                 let marker;
-               if (style.icon === undefined) {
-                   marker = L.circle(latLng, {
-                       radius: 25,
-                       color: style.color
-                   });
+                if (style.icon === undefined) {
+                    marker = L.circle(latLng, {
+                        radius: 25,
+                        color: style.color
+                    });
 
-               } else if (style.icon.iconUrl.startsWith("$circle")) {
-                   marker = L.circle(latLng, {
-                       radius: 25,
-                       color: style.color
-                   });
-               } else {
-                   if (style.icon.iconSize === undefined) {
-                       style.icon.iconSize = [50, 50]
-                   }
+                } else if (style.icon.iconUrl.startsWith("$circle")) {
+                    marker = L.circle(latLng, {
+                        radius: 25,
+                        color: style.color
+                    });
+                } else {
+                    if (style.icon.iconSize === undefined) {
+                        style.icon.iconSize = [50, 50]
+                    }
 
-                   marker = L.marker(latLng, {
-                       icon: new L.icon(style.icon),
-                   });
-               }
+                    marker = L.marker(latLng, {
+                        icon: new L.icon(style.icon),
+                    });
+                }
                 let eventSource = State.state.allElements.addOrGetElement(feature);
                 const popup = L.popup({}, marker);
                 let uiElement: UIElement;