From e16a210ee1a99e41608fee39e42553abb5971f5d Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 30 Sep 2020 23:34:44 +0200 Subject: [PATCH] Typing and refactoring of FilteredLayer --- Customizations/LayerDefinition.ts | 6 ++--- Logic/FilteredLayer.ts | 31 +++++++++++++++--------- assets/themes/ghostbikes/ghostbikes.json | 2 +- createLayouts.ts | 6 ++--- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/Customizations/LayerDefinition.ts b/Customizations/LayerDefinition.ts index 369c59d..77e1ef3 100644 --- a/Customizations/LayerDefinition.ts +++ b/Customizations/LayerDefinition.ts @@ -76,9 +76,9 @@ export class LayerDefinition { weight?: number, icon: { iconUrl: string, - iconSize?: number[], - popupAnchor?: number[], - iconAnchor?: number[] + iconSize?: [number, number], + popupAnchor?: [number,number], + iconAnchor?: [number,number] }, }; diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index c5d37eb..7d0c4ab 100644 --- a/Logic/FilteredLayer.ts +++ b/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,26 +292,30 @@ 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 } const uiElement = self._showOnPopup(eventSource, feature); - + L.popup({ autoPan: true, }).setContent(uiElement.Render()) .setLatLng(e.latlng) .openOn(State.state.bm.map); uiElement.Update(); - L.DomEvent.stop(e); // Marks the event as consumed - }); + if (e) { + L.DomEvent.stop(e); // Marks the event as consumed + } + } + + layer.on("click", openPopup); } }); diff --git a/assets/themes/ghostbikes/ghostbikes.json b/assets/themes/ghostbikes/ghostbikes.json index 330f599..3c4c5cc 100644 --- a/assets/themes/ghostbikes/ghostbikes.json +++ b/assets/themes/ghostbikes/ghostbikes.json @@ -13,7 +13,7 @@ "nl": "Een Witte Fiets of Spookfiets 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.

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 Geisterrad 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.

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, diff --git a/createLayouts.ts b/createLayouts.ts index 49fda8c..586042c 100644 --- a/createLayouts.ts +++ b/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})