2020-10-02 17:00:24 +00:00
|
|
|
import * as L from "leaflet";
|
2020-11-06 03:02:53 +00:00
|
|
|
import Svg from "../../Svg";
|
2021-01-02 20:03:40 +00:00
|
|
|
import {UIEventSource} from "../UIEventSource";
|
2021-01-02 23:19:42 +00:00
|
|
|
import Img from "../../UI/Base/Img";
|
2021-02-25 01:23:26 +00:00
|
|
|
import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen";
|
2020-06-29 01:12:44 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
|
|
|
|
* Shows the given uiToShow-element in the messagebox
|
|
|
|
*/
|
2021-01-04 03:06:21 +00:00
|
|
|
export default class StrayClickHandler {
|
2020-06-29 01:12:44 +00:00
|
|
|
private _lastMarker;
|
|
|
|
|
|
|
|
constructor(
|
2021-01-04 03:06:21 +00:00
|
|
|
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
|
2021-01-02 20:03:40 +00:00
|
|
|
selectedElement: UIEventSource<string>,
|
2021-01-04 03:06:21 +00:00
|
|
|
filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
|
2021-01-02 20:03:40 +00:00
|
|
|
leafletMap: UIEventSource<L.Map>,
|
2021-02-25 01:23:26 +00:00
|
|
|
uiToShow: ScrollableFullScreen) {
|
2020-06-29 01:12:44 +00:00
|
|
|
const self = this;
|
2021-01-02 20:03:40 +00:00
|
|
|
filteredLayers.data.forEach((filteredLayer) => {
|
2020-09-17 21:53:57 +00:00
|
|
|
filteredLayer.isDisplayed.addCallback(isEnabled => {
|
2021-01-04 03:06:21 +00:00
|
|
|
if (isEnabled && self._lastMarker && leafletMap.data !== undefined) {
|
2020-09-17 21:53:57 +00:00
|
|
|
// When a layer is activated, we remove the 'last click location' in order to force the user to reclick
|
|
|
|
// This reclick might be at a location where a feature now appeared...
|
2021-01-04 03:06:21 +00:00
|
|
|
leafletMap.data.removeLayer(self._lastMarker);
|
2020-09-17 21:53:57 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
2021-01-04 03:06:21 +00:00
|
|
|
|
2021-01-02 20:03:40 +00:00
|
|
|
lastClickLocation.addCallback(function (lastClick) {
|
2021-01-21 23:40:15 +00:00
|
|
|
|
2020-06-29 01:12:44 +00:00
|
|
|
if (self._lastMarker !== undefined) {
|
2021-01-02 20:03:40 +00:00
|
|
|
leafletMap.data?.removeLayer(self._lastMarker);
|
2020-06-29 01:12:44 +00:00
|
|
|
}
|
2021-01-21 23:40:15 +00:00
|
|
|
|
|
|
|
if(lastClick === undefined){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
selectedElement.setData(undefined);
|
2020-07-25 16:00:08 +00:00
|
|
|
self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
|
|
|
|
icon: L.icon({
|
2020-11-06 03:02:53 +00:00
|
|
|
iconUrl: Img.AsData(Svg.add),
|
2020-07-30 23:45:54 +00:00
|
|
|
iconSize: [50, 50],
|
|
|
|
iconAnchor: [25, 50],
|
|
|
|
popupAnchor: [0, -45]
|
2020-07-25 16:00:08 +00:00
|
|
|
})
|
|
|
|
});
|
2021-02-25 01:23:26 +00:00
|
|
|
const popup = L.popup().setContent(uiToShow.Render());
|
2021-01-02 20:03:40 +00:00
|
|
|
self._lastMarker.addTo(leafletMap.data);
|
2020-09-05 13:27:35 +00:00
|
|
|
self._lastMarker.bindPopup(popup);
|
2020-06-29 14:21:36 +00:00
|
|
|
|
2020-07-01 00:12:33 +00:00
|
|
|
self._lastMarker.on("click", () => {
|
2021-02-25 01:23:26 +00:00
|
|
|
uiToShow.Activate();
|
|
|
|
uiToShow.Update();
|
2020-07-01 00:12:33 +00:00
|
|
|
});
|
2020-06-29 01:12:44 +00:00
|
|
|
});
|
|
|
|
|
2021-01-02 20:03:40 +00:00
|
|
|
selectedElement.addCallback(() => {
|
2020-06-29 01:12:44 +00:00
|
|
|
if (self._lastMarker !== undefined) {
|
2021-01-02 20:03:40 +00:00
|
|
|
leafletMap.data.removeLayer(self._lastMarker);
|
2020-06-29 01:12:44 +00:00
|
|
|
this._lastMarker = undefined;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|