Typing and refactoring of FilteredLayer
This commit is contained in:
Pieter Vander Vennet
parent
649b273b97
commit
e16a210ee1
|
|
@ -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]
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
Loading…
Reference in a new issue