Typing and refactoring of FilteredLayer

Customizations/LayerDefinition.ts

@@ -76,9 +76,9 @@ export class LayerDefinition {
         weight?: number,
         icon: {
             iconUrl: string, 
-            iconSize?: number[], 
+            iconSize?: [number, number], 
-            popupAnchor?: number[], 
+            popupAnchor?: [number,number], 
-            iconAnchor?: number[]
+            iconAnchor?: [number,number]
         },
     };
 

Logic/FilteredLayer.ts

@@ -1,6 +1,7 @@
 import {TagsFilter, TagUtils} from "./Tags";
 import {UIEventSource} from "./UIEventSource";
-import L from "leaflet"
+import * as L from "leaflet"
+import {Layer} from "leaflet"
 import {GeoOperations} from "./GeoOperations";
 import {UIElement} from "../UI/UIElement";
 import {LayerDefinition} from "../Customizations/LayerDefinition";
@@ -25,7 +26,7 @@ export class FilteredLayer {
     public readonly layerDef: LayerDefinition;
     private readonly _maxAllowedOverlap: number;
 
-    private readonly _style: (properties) => { color: string, weight?: number, icon: { iconUrl: string, iconSize? : number[], popupAnchor?: number[], iconAnchor?:number[] } };
+    private readonly _style: (properties) => { color: string, weight?: number, icon: { iconUrl: string, iconSize?: [number, number], popupAnchor?:  [number,number], iconAnchor?: [number,number] } };
 
 
     /** The featurecollection from overpass
@@ -242,8 +243,9 @@ export class FilteredLayer {
                         style.icon.iconSize = [50, 50]
                     }
 
+                    // @ts-ignore
                     marker = L.marker(latLng, {
-                        icon: new L.icon(style.icon),
+                        icon: L.icon(style.icon),
                     });
                 }
                 let eventSource = State.state.allElements.addOrGetElement(feature);
@@ -260,13 +262,15 @@ export class FilteredLayer {
                         popup.setContent(content);
                         uiElement.Update();
                     });
+
                 return marker;
             },
 
-            onEachFeature: function (feature, layer) {
+            onEachFeature: function (feature, layer:Layer) {
 
                 // We monky-patch the feature element with an update-style
-                feature.updateStyle = () => {
+                function updateStyle () {
+                    // @ts-ignore
                     if (layer.setIcon) {
                         const style = self._style(feature.properties);
                         const icon = style.icon;
@@ -274,6 +278,7 @@ export class FilteredLayer {
                             if (icon.iconUrl.startsWith("$circle")) {
                                 // pass
                             } else {
+                                // @ts-ignore
                                 layer.setIcon(L.icon(icon))
                             }
                         }
@@ -287,12 +292,12 @@ export class FilteredLayer {
                 let eventSource = State.state.allElements.addOrGetElement(feature);
 
 
-                eventSource.addCallback(feature.updateStyle);
+                eventSource.addCallback(updateStyle);
 
-                layer.on("click", function (e) {
+                function openPopup(e) {
                     State.state.selectedElement.data?.feature.updateStyle();
                     State.state.selectedElement.setData({feature: feature});
-                    feature.updateStyle()
+                    updateStyle()
                     if (feature.geometry.type === "Point") {
                         return; // Points bind there own popups
                     }
@@ -305,8 +310,12 @@ export class FilteredLayer {
                         .setLatLng(e.latlng)
                         .openOn(State.state.bm.map);
                     uiElement.Update();
+                    if (e) {
                         L.DomEvent.stop(e); // Marks the event as consumed
-                });
+                    }
+                }
+
+                layer.on("click", openPopup);
             }
         });
 

assets/themes/ghostbikes/ghostbikes.json

@@ -13,7 +13,7 @@
     "nl": "Een <b>Witte Fiets</b> of <b>Spookfiets</b> is een aandenken aan een fietser die bij een verkeersongeval om het leven kwam. Het gaat om een fiets die volledig wit is geschilderd en in de buurt van het ongeval werd geinstalleerd.<br/><br/>Op deze kaart zie je alle witte fietsen die door OpenStreetMap gekend zijn. Ontbreekt er een Witte Fiets of wens je informatie aan te passen? Meld je dan aan met een (gratis) OpenStreetMap account.",
     "de": "Ein <b>Geisterrad</b> ist ein Denkmal für einen Radfahrer, der bei einem Verkehrsunfall ums Leben kam, in Form eines weißen Fahrrades, das dauerhaft in der Nähe des Unfallortes aufgestellt ist.<br/><br/> Auf dieser Karte kann man alle Geisterräder sehen, die OpenStreetMap kennt. Fehlt ein Geisterrad? Jeder kann hier Informationen hinzufügen oder aktualisieren - Sie benötigen lediglich einen (kostenlosen) OpenStreetMap-Account."
   },
-  "icon": "./assets/themes/ghost_bike/logo.svg",
+  "icon": "./assets/themes/ghostbikes/logo.svg",
   "startZoom": 1,
   "startLat": 0,
   "startLon": 0,

createLayouts.ts

@@ -1,9 +1,7 @@
 import {UIElement} from "./UI/UIElement";
 // We HAVE to mark this while importing
 UIElement.runningFromConsole = true;
-
 import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
-import {FromJSON} from "./Customizations/JSON/FromJSON";
 import {Layout} from "./Customizations/Layout";
 import {readFileSync, writeFile, writeFileSync} from "fs";
 import Locale from "./UI/i18n/Locale";
@@ -136,8 +134,10 @@ function createIcon(iconPath: string, size: number) {
         // Errors are normal here if this file exists
     }
 
-    console.log("Creating icon ", name, newname)
     try {
+        console.log("Creating icon ", name, newname)
+        // We already read to file, in order to crash here if the file is not found
+        readFileSync(iconPath); 
         svg2img(iconPath,
             // @ts-ignore
             {width: size, height: size, preserveAspectRatio: true})