mapcomplete/Logic/FilteredLayer.ts

336 lines
12 KiB
TypeScript
Raw Normal View History

import {TagsFilter, TagUtils} from "./Tags";
import {UIEventSource} from "./UIEventSource";
import * as L from "leaflet"
import {Layer} from "leaflet"
import {GeoOperations} from "./GeoOperations";
import {UIElement} from "../UI/UIElement";
import {LayerDefinition} from "../Customizations/LayerDefinition";
import codegrid from "codegrid-js";
import State from "../State";
2020-07-30 09:59:30 +02:00
2020-06-24 00:35:19 +02:00
/***
* A filtered layer is a layer which offers a 'set-data' function
* It is initialized with a tagfilter.
*
* When geojson-data is given to 'setData', all the geojson matching the filter, is rendered on this layer.
* If it is not rendered, it is returned in a 'leftOver'-geojson; which can be consumed by the next layer.
*
* This also makes sure that no objects are rendered twice if they are applicable on two layers
*/
export class FilteredLayer {
2020-07-22 00:50:30 +02:00
public readonly name: string | UIElement;
2020-06-24 00:35:19 +02:00
public readonly filters: TagsFilter;
public readonly isDisplayed: UIEventSource<boolean> = new UIEventSource(true);
private readonly combinedIsDisplayed : UIEventSource<boolean>;
2020-07-22 11:01:25 +02:00
public readonly layerDef: LayerDefinition;
2020-06-28 23:33:48 +02:00
private readonly _maxAllowedOverlap: number;
2020-06-24 00:35:19 +02:00
private readonly _style: (properties) => { color: string, weight?: number, icon: { iconUrl: string, iconSize?: [number, number], popupAnchor?: [number,number], iconAnchor?: [number,number] } };
2020-06-24 00:35:19 +02:00
/** The featurecollection from overpass
*/
private _dataFromOverpass: any[];
private readonly _wayHandling: number;
2020-06-24 00:35:19 +02:00
/** List of new elements, geojson features
*/
private _newElements = [];
/**
* The leaflet layer object which should be removed on rerendering
*/
private _geolayer;
2020-09-14 20:16:03 +02:00
private _showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement;
2020-06-24 00:35:19 +02:00
2020-09-26 01:11:17 +02:00
private static readonly grid = codegrid.CodeGrid("./tiles/");
2020-06-24 00:35:19 +02:00
constructor(
2020-07-22 11:01:25 +02:00
layerDef: LayerDefinition,
showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
2020-06-29 16:21:36 +02:00
) {
2020-07-22 11:01:25 +02:00
this.layerDef = layerDef;
2020-07-22 11:05:04 +02:00
this._wayHandling = layerDef.wayHandling;
2020-06-29 16:21:36 +02:00
this._showOnPopup = showOnPopup;
this._style = (tags) => {
if(layerDef.style === undefined){
return {icon: {iconUrl: "./assets/bug.svg"}, color: "#000"};
2020-06-24 00:35:19 +02:00
}
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;
};
2020-06-24 00:35:19 +02:00
this.name = name;
2020-07-22 11:01:25 +02:00
this.filters = layerDef.overpassFilter;
this._maxAllowedOverlap = layerDef.maxAllowedOverlapPercentage;
const self = this;
this.combinedIsDisplayed = this.isDisplayed.map<boolean>(isDisplayed => {
return isDisplayed && State.state.locationControl.data.zoom >= self.layerDef.minzoom
},
[State.state.locationControl]
);
this.combinedIsDisplayed.addCallback(function (isDisplayed) {
const map = State.state.bm.map;
if (self._geolayer !== undefined && self._geolayer !== null) {
if (isDisplayed) {
self._geolayer.addTo(map);
} else {
map.removeLayer(self._geolayer);
}
}
})
2020-06-24 00:35:19 +02:00
}
static fromDefinition(
definition,
showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
FilteredLayer {
return new FilteredLayer(
definition, showOnPopup);
}
2020-06-24 00:35:19 +02:00
/**
* The main function to load data into this layer.
* The data that is NOT used by this layer, is returned as a geojson object; the other data is rendered
*/
public SetApplicableData(geojson: any): any {
const leftoverFeatures = [];
const selfFeatures = [];
2020-07-22 00:50:30 +02:00
for (let feature of geojson.features) {
2020-06-24 00:35:19 +02:00
// feature.properties contains all the properties
const tags = TagUtils.proprtiesToKV(feature.properties);
2020-06-24 00:35:19 +02:00
if (this.filters.matches(tags)) {
const centerPoint = GeoOperations.centerpoint(feature);
feature.properties["_surface"] = "" + GeoOperations.surfaceAreaInSqMeters(feature);
const lat = centerPoint.geometry.coordinates[1];
const lon = centerPoint.geometry.coordinates[0]
feature.properties["_lon"] = "" + lat; // We expect a string here for lat/lon
feature.properties["_lat"] = "" + lon;
// But the codegrid SHOULD be a number!
FilteredLayer.grid.getCode(lat, lon, (error, code) => {
if (error === null) {
feature.properties["_country"] = code;
} else {
console.warn("Could not determine country for", feature.properties.id, error);
}
})
2020-07-22 11:05:04 +02:00
if (feature.geometry.type !== "Point") {
if (this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_AND_WAY) {
selfFeatures.push(centerPoint);
2020-07-22 11:05:04 +02:00
} else if (this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_ONLY) {
feature = centerPoint;
2020-07-22 00:50:30 +02:00
}
}
2020-06-24 00:35:19 +02:00
selfFeatures.push(feature);
} else {
leftoverFeatures.push(feature);
}
}
this.RenderLayer({
type: "FeatureCollection",
features: selfFeatures
})
const notShadowed = [];
for (const feature of leftoverFeatures) {
if (this._maxAllowedOverlap !== undefined && this._maxAllowedOverlap > 0) {
2020-06-28 23:33:48 +02:00
if (GeoOperations.featureIsContainedInAny(feature, selfFeatures, this._maxAllowedOverlap)) {
2020-06-24 00:35:19 +02:00
// This feature is filtered away
continue;
}
}
notShadowed.push(feature);
}
return {
type: "FeatureCollection",
features: notShadowed
};
}
public AddNewElement(element) {
this._newElements.push(element);
this.RenderLayer({features: this._dataFromOverpass}, element); // Update the layer
2020-06-24 00:35:19 +02:00
}
private RenderLayer(data, openPopupOf = undefined) {
2020-06-24 00:35:19 +02:00
let self = this;
if (this._geolayer !== undefined && this._geolayer !== null) {
// Remove the old geojson layer from the map - we'll reshow all the elements later on anyway
State.state.bm.map.removeLayer(this._geolayer);
2020-06-24 00:35:19 +02:00
}
const oldData = this._dataFromOverpass ?? [];
// We keep track of all the ids that are freshly loaded in order to avoid adding duplicates
const idsFromOverpass: Set<number> = new Set<number>();
// A list of all the features to show
2020-06-24 00:35:19 +02:00
const fusedFeatures = [];
// First, we add all the fresh data:
2020-06-24 00:35:19 +02:00
for (const feature of data.features) {
idsFromOverpass.add(feature.properties.id);
fusedFeatures.push(feature);
}
// Now we add all the stale data
for (const feature of oldData) {
if (idsFromOverpass.has(feature.properties.id)) {
continue; // Feature already loaded and a fresher version is available
}
idsFromOverpass.add(feature.properties.id);
2020-06-24 00:35:19 +02:00
fusedFeatures.push(feature);
}
2020-09-02 11:37:34 +02:00
this._dataFromOverpass = fusedFeatures;
2020-06-24 00:35:19 +02:00
for (const feature of this._newElements) {
2020-09-02 11:37:34 +02:00
if (!idsFromOverpass.has(feature.properties.id)) {
2020-06-24 00:35:19 +02:00
// This element is not yet uploaded or not yet visible in overpass
// We include it in the layer
fusedFeatures.push(feature);
}
}
2020-06-24 00:35:19 +02:00
// We use a new, fused dataset
data = {
type: "FeatureCollection",
features: fusedFeatures
}
// The data is split in two parts: the poinst and the rest
// The points get a special treatment in order to render them properly
// Note that some features might get a point representation as well
const runWhenAdded: (() => void)[] = []
2020-06-24 00:35:19 +02:00
this._geolayer = L.geoJSON(data, {
style: function (feature) {
return self._style(feature.properties);
},
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
});
} 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]
}
// @ts-ignore
marker = L.marker(latLng, {
icon: L.icon(style.icon),
});
}
let eventSource = State.state.allElements.addOrGetElement(feature);
const popup = L.popup({}, marker);
let uiElement: UIElement;
let content = undefined;
let p = marker.bindPopup(popup)
.on("popupopen", () => {
if (content === undefined) {
uiElement = self._showOnPopup(eventSource, feature);
// Lazily create the content
content = uiElement.Render();
}
popup.setContent(content);
uiElement.Update();
});
if (feature === openPopupOf) {
runWhenAdded.push(() => {
p.openPopup();
})
}
2020-06-24 00:35:19 +02:00
return marker;
},
onEachFeature: function (feature, layer:Layer) {
2020-08-07 16:01:18 +02:00
// We monky-patch the feature element with an update-style
function updateStyle () {
// @ts-ignore
if (layer.setIcon) {
2020-09-18 12:00:38 +02:00
const style = self._style(feature.properties);
const icon = style.icon;
if (icon.iconUrl) {
2020-09-18 12:00:38 +02:00
if (icon.iconUrl.startsWith("$circle")) {
// pass
} else {
// @ts-ignore
2020-09-18 12:00:38 +02:00
layer.setIcon(L.icon(icon))
}
}
} else {
2020-08-07 16:01:18 +02:00
self._geolayer.setStyle(function (featureX) {
2020-09-09 18:42:13 +02:00
return self._style(featureX.properties);
});
}
}
let eventSource = State.state.allElements.addOrGetElement(feature);
eventSource.addCallback(updateStyle);
2020-06-29 16:21:36 +02:00
function openPopup(e) {
State.state.selectedElement.setData({feature: feature});
updateStyle()
2020-07-26 23:28:31 +02:00
if (feature.geometry.type === "Point") {
return; // Points bind there own popups
}
const uiElement = self._showOnPopup(eventSource, feature);
L.popup({
autoPan: true,
}).setContent(uiElement.Render())
2020-07-07 15:08:52 +02:00
.setLatLng(e.latlng)
.openOn(State.state.bm.map);
2020-09-14 20:16:03 +02:00
uiElement.Update();
if (e) {
L.DomEvent.stop(e); // Marks the event as consumed
}
}
layer.on("click", openPopup);
2020-06-24 00:35:19 +02:00
}
});
if (this.combinedIsDisplayed.data) {
this._geolayer.addTo(State.state.bm.map);
for (const f of runWhenAdded) {
f();
}
}
2020-06-24 00:35:19 +02:00
}
}