mapcomplete/UI/ShowDataLayer.ts

177 lines
6.4 KiB
TypeScript
Raw Normal View History

/**
* The data layer shows all the given geojson elements with the appropriate icon etc
*/
import {UIEventSource} from "../Logic/UIEventSource";
import * as L from "leaflet"
2021-01-04 18:55:10 +01:00
import "leaflet.markercluster"
import LayerConfig from "../Customizations/JSON/LayerConfig";
import State from "../State";
import LazyElement from "./Base/LazyElement";
import Hash from "../Logic/Web/Hash";
import {GeoOperations} from "../Logic/GeoOperations";
import FeatureInfoBox from "./Popup/FeatureInfoBox";
2021-01-04 18:55:10 +01:00
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
2021-01-25 04:21:22 +01:00
import {UIElement} from "./UIElement";
import Combine from "./Base/Combine";
import ScrollableFullScreen from "./Base/ScrollableFullScreen";
2021-01-04 18:55:10 +01:00
export default class ShowDataLayer {
private readonly _layerDict;
private readonly _leafletMap: UIEventSource<L.Map>;
2021-01-04 23:36:02 +01:00
private readonly _onSelectedTrigger: any = {}; // osmId+geometry.type+matching_layer_id --> () => void
constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
leafletMap: UIEventSource<L.Map>,
2021-01-04 18:55:10 +01:00
layoutToUse: LayoutConfig) {
this._leafletMap = leafletMap;
const self = this;
let oldGeoLayer: L.Layer = undefined;
this._layerDict = {};
2021-01-04 18:55:10 +01:00
for (const layer of layoutToUse.layers) {
this._layerDict[layer.id] = layer;
}
function update() {
if (features.data === undefined) {
return;
}
if (leafletMap.data === undefined) {
return;
}
const mp = leafletMap.data;
const feats = features.data.map(ff => ff.feature);
2021-01-04 18:55:10 +01:00
let geoLayer = self.CreateGeojsonLayer(feats)
if (layoutToUse.clustering.minNeededElements <= features.data.length) {
2021-01-25 03:12:09 +01:00
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
const cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
cluster.addLayer(geoLayer);
geoLayer = cluster;
2021-01-04 20:09:07 +01:00
}
2021-01-04 18:55:10 +01:00
if (oldGeoLayer) {
mp.removeLayer(oldGeoLayer);
}
2021-01-04 04:36:21 +01:00
mp.addLayer(geoLayer);
oldGeoLayer = geoLayer;
}
features.addCallbackAndRun(() => update());
leafletMap.addCallback(() => update());
2021-01-04 23:36:02 +01:00
State.state.selectedElement.addCallback(feature => {
2021-01-25 03:12:09 +01:00
if (feature === undefined) {
2021-01-04 23:36:02 +01:00
return;
}
2021-01-25 03:12:09 +01:00
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
2021-01-04 23:36:02 +01:00
const action = self._onSelectedTrigger[id];
2021-01-25 03:12:09 +01:00
if (action) {
2021-01-04 23:36:02 +01:00
action();
}
});
update();
}
private createStyleFor(feature) {
const tagsSource = State.state.allElements.getEventSourceFor(feature);
// Every object is tied to exactly one layer
const layer = this._layerDict[feature._matching_layer_id];
return layer.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined);
}
private pointToLayer(feature, latLng): L.Layer {
// Leaflet cannot handle geojson points natively
// We have to convert them to the appropriate icon
// Click handling is done in the next step
const tagSource = State.state.allElements.addOrGetElement(feature)
2021-01-04 18:55:10 +01:00
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
const style = layer.GenerateLeafletStyle(tagSource, !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0));
return L.marker(latLng, {
icon: L.divIcon({
html: style.icon.html.Render(),
className: style.icon.className,
iconAnchor: style.icon.iconAnchor,
iconUrl: style.icon.iconUrl,
popupAnchor: style.icon.popupAnchor,
iconSize: style.icon.iconSize
})
});
}
2021-01-04 18:55:10 +01:00
private postProcessFeature(feature, leafletLayer: L.Layer) {
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
if (layer.title === undefined && (layer.tagRenderings ?? []).length === 0) {
// No popup action defined -> Don't do anything
return;
}
2021-01-04 18:55:10 +01:00
const popup = L.popup({
autoPan: true,
closeOnEscapeKey: true,
}, leafletLayer);
const tags = State.state.allElements.getEventSourceFor(feature);
2021-01-25 04:21:22 +01:00
const uiElement: LazyElement<UIElement> = new LazyElement(() =>new Combine([ new FeatureInfoBox(tags, layer, () => {
2021-01-25 03:12:09 +01:00
console.log("Closing the popup!")
State.state.selectedElement.setData(undefined);
popup.remove();
2021-01-25 04:21:22 +01:00
})]),
"<div style='height: 90vh'>Rendering</div>");
popup.setContent(uiElement.Render());
2021-01-05 16:59:12 +01:00
popup.on('remove', () => {
2021-01-25 04:21:22 +01:00
ScrollableFullScreen.RestoreLeaflet(); // Just in case...
2021-01-25 03:12:09 +01:00
if (!popup.isOpen()) {
2021-01-21 23:39:31 +01:00
return;
}
2021-01-25 03:12:09 +01:00
State.state.selectedElement.setData(undefined);
2021-01-05 02:59:29 +01:00
});
leafletLayer.bindPopup(popup);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
2021-01-25 03:12:09 +01:00
leafletLayer.on("click", () => {
// We set the element as selected...
2021-01-25 03:12:09 +01:00
2021-01-05 16:59:12 +01:00
uiElement.Activate();
State.state.selectedElement.setData(feature);
});
2021-01-25 03:12:09 +01:00
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
2021-01-04 23:36:02 +01:00
this._onSelectedTrigger[id]
2021-01-25 03:12:09 +01:00
= () => {
if (popup.isOpen()) {
2021-01-05 16:59:12 +01:00
return;
}
2021-01-04 23:36:02 +01:00
leafletLayer.openPopup();
2021-01-25 04:21:22 +01:00
uiElement.Activate();
2021-01-06 13:18:33 +01:00
State.state.selectedElement.setData(feature);
2021-01-04 23:36:02 +01:00
}
2021-01-25 03:12:09 +01:00
this._onSelectedTrigger[feature.properties.id.replace("/", "_")] = this._onSelectedTrigger[id];
}
private CreateGeojsonLayer(features: any[]): L.Layer {
const self = this;
const data = {
type: "FeatureCollection",
features: features
}
return L.geoJSON(data, {
style: feature => self.createStyleFor(feature),
pointToLayer: (feature, latLng) => self.pointToLayer(feature, latLng),
onEachFeature: (feature, leafletLayer) => self.postProcessFeature(feature, leafletLayer)
});
}
}