309 lines
11 KiB
TypeScript
309 lines
11 KiB
TypeScript
import { Store, UIEventSource } from "../UIEventSource"
|
|
import Attribution from "../../UI/BigComponents/Attribution"
|
|
import BaseUIElement from "../../UI/BaseUIElement"
|
|
import FilteredLayer, { FilterState } from "../../Models/FilteredLayer"
|
|
import TilesourceConfig from "../../Models/ThemeConfig/TilesourceConfig"
|
|
import { QueryParameters } from "../Web/QueryParameters"
|
|
import ShowOverlayLayer from "../../UI/ShowDataLayer/ShowOverlayLayer"
|
|
import { FeatureSourceForLayer, Tiled } from "../FeatureSource/FeatureSource"
|
|
import { LocalStorageSource } from "../Web/LocalStorageSource"
|
|
import TitleHandler from "../Actors/TitleHandler"
|
|
import { BBox } from "../BBox"
|
|
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
|
import StaticFeatureSource, {
|
|
TiledStaticFeatureSource,
|
|
} from "../FeatureSource/Sources/StaticFeatureSource"
|
|
import { OsmConnection } from "../Osm/OsmConnection"
|
|
import { Feature } from "geojson"
|
|
import { Map as MlMap } from "maplibre-gl"
|
|
import { GlobalFilter } from "../../Models/GlobalFilter"
|
|
import { MapProperties } from "../../Models/MapProperties"
|
|
import ShowDataLayer from "../../UI/Map/ShowDataLayer"
|
|
|
|
/**
|
|
* Contains all the leaflet-map related state
|
|
*/
|
|
export default class MapState {
|
|
|
|
|
|
/**
|
|
* Last location where a click was registered
|
|
*/
|
|
public readonly LastClickLocation: UIEventSource<{
|
|
lat: number
|
|
lon: number
|
|
}> = new UIEventSource<{ lat: number; lon: number }>(undefined)
|
|
|
|
/**
|
|
* The bounds of the current map view
|
|
*/
|
|
public currentView: FeatureSourceForLayer & Tiled
|
|
|
|
/**
|
|
* A builtin layer which contains the selected element.
|
|
* Loads 'selected_element.json'
|
|
* This _might_ contain multiple points, e.g. every center of a multipolygon
|
|
*/
|
|
public selectedElementsLayer: FeatureSourceForLayer & Tiled
|
|
|
|
public readonly mainMapObject: BaseUIElement
|
|
|
|
/**
|
|
* Which layers are enabled in the current theme and what filters are applied onto them
|
|
*/
|
|
public filteredLayers: UIEventSource<FilteredLayer[]> = new UIEventSource<FilteredLayer[]>(
|
|
[],
|
|
"filteredLayers"
|
|
)
|
|
|
|
/**
|
|
* Filters which apply onto all layers
|
|
*/
|
|
public globalFilters: UIEventSource<GlobalFilter[]> = new UIEventSource([], "globalFilters")
|
|
|
|
/**
|
|
* Which overlays are shown
|
|
*/
|
|
public overlayToggles: { config: TilesourceConfig; isDisplayed: UIEventSource<boolean> }[]
|
|
|
|
constructor() {
|
|
this.availableBackgroundLayers = AvailableBaseLayers.AvailableLayersAt(this.locationControl)
|
|
|
|
let defaultLayer = AvailableBaseLayers.osmCarto
|
|
const available = this.availableBackgroundLayers.data
|
|
for (const layer of available) {
|
|
if (this.backgroundLayerId.data === layer.id) {
|
|
defaultLayer = layer
|
|
}
|
|
}
|
|
const self = this
|
|
this.backgroundLayer = new UIEventSource<BaseLayer>(defaultLayer)
|
|
this.backgroundLayer.addCallbackAndRunD((layer) => self.backgroundLayerId.setData(layer.id))
|
|
|
|
// Will write into this.leafletMap
|
|
this.mainMapObject = Minimap.createMiniMap({
|
|
background: this.backgroundLayer,
|
|
location: this.locationControl,
|
|
leafletMap: this.leafletMap,
|
|
bounds: this.currentBounds,
|
|
attribution: attr,
|
|
lastClickLocation: this.LastClickLocation,
|
|
})
|
|
|
|
this.overlayToggles =
|
|
this.layoutToUse?.tileLayerSources
|
|
?.filter((c) => c.name !== undefined)
|
|
?.map((c) => ({
|
|
config: c,
|
|
isDisplayed: QueryParameters.GetBooleanQueryParameter(
|
|
"overlay-" + c.id,
|
|
c.defaultState,
|
|
"Wether or not the overlay " + c.id + " is shown"
|
|
),
|
|
})) ?? []
|
|
this.filteredLayers = new UIEventSource<FilteredLayer[]>(
|
|
MapState.InitializeFilteredLayers(this.layoutToUse, this.osmConnection)
|
|
)
|
|
|
|
this.AddAllOverlaysToMap(this.leafletMap)
|
|
|
|
this.initCurrentView()
|
|
this.initSelectedElement()
|
|
|
|
new TitleHandler(this)
|
|
}
|
|
|
|
public AddAllOverlaysToMap(leafletMap: UIEventSource<any>) {
|
|
const initialized = new Set()
|
|
for (const overlayToggle of this.overlayToggles) {
|
|
new ShowOverlayLayer(overlayToggle.config, leafletMap, overlayToggle.isDisplayed)
|
|
initialized.add(overlayToggle.config)
|
|
}
|
|
|
|
for (const tileLayerSource of this.layoutToUse?.tileLayerSources ?? []) {
|
|
if (initialized.has(tileLayerSource)) {
|
|
continue
|
|
}
|
|
new ShowOverlayLayer(tileLayerSource, leafletMap)
|
|
}
|
|
}
|
|
|
|
|
|
private initCurrentView() {
|
|
let currentViewLayer: FilteredLayer = this.filteredLayers.data.filter(
|
|
(l) => l.layerDef.id === "current_view"
|
|
)[0]
|
|
|
|
if (currentViewLayer === undefined) {
|
|
// This layer is not needed by the theme and thus unloaded
|
|
return
|
|
}
|
|
|
|
let i = 0
|
|
const self = this
|
|
const features: Store<Feature[]> = this.currentBounds.map((bounds) => {
|
|
if (bounds === undefined) {
|
|
return []
|
|
}
|
|
i++
|
|
const feature = {
|
|
type: "Feature",
|
|
properties: {
|
|
id: "current_view-" + i,
|
|
current_view: "yes",
|
|
zoom: "" + self.locationControl.data.zoom,
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [
|
|
[
|
|
[bounds.maxLon, bounds.maxLat],
|
|
[bounds.minLon, bounds.maxLat],
|
|
[bounds.minLon, bounds.minLat],
|
|
[bounds.maxLon, bounds.minLat],
|
|
[bounds.maxLon, bounds.maxLat],
|
|
],
|
|
],
|
|
},
|
|
}
|
|
return [feature]
|
|
})
|
|
|
|
this.currentView = new TiledStaticFeatureSource(features, currentViewLayer)
|
|
}
|
|
|
|
private initSelectedElement() {
|
|
const layerDef: FilteredLayer = this.filteredLayers.data.filter(
|
|
(l) => l.layerDef.id === "selected_element"
|
|
)[0]
|
|
const empty = []
|
|
const store = this.selectedElement.map((feature) => {
|
|
if (feature === undefined || feature === null) {
|
|
return empty
|
|
}
|
|
return [
|
|
{
|
|
feature: {
|
|
type: "Feature",
|
|
properties: {
|
|
selected: "yes",
|
|
id: "selected" + feature.properties.id,
|
|
},
|
|
geometry: feature.geometry,
|
|
},
|
|
freshness: new Date(),
|
|
},
|
|
]
|
|
})
|
|
this.selectedElementsLayer = new TiledStaticFeatureSource(store, layerDef)
|
|
}
|
|
|
|
private static getPref(
|
|
osmConnection: OsmConnection,
|
|
key: string,
|
|
layer: LayerConfig
|
|
): UIEventSource<boolean> {
|
|
return osmConnection.GetPreference(key, layer.shownByDefault + "").sync(
|
|
(v) => {
|
|
if (v === undefined) {
|
|
return undefined
|
|
}
|
|
return v === "true"
|
|
},
|
|
[],
|
|
(b) => {
|
|
if (b === undefined) {
|
|
return undefined
|
|
}
|
|
return "" + b
|
|
}
|
|
)
|
|
}
|
|
|
|
public static InitializeFilteredLayers(
|
|
layoutToUse: { layers: LayerConfig[]; id: string },
|
|
osmConnection: OsmConnection
|
|
): FilteredLayer[] {
|
|
if (layoutToUse === undefined) {
|
|
return []
|
|
}
|
|
const flayers: FilteredLayer[] = []
|
|
for (const layer of layoutToUse.layers) {
|
|
let isDisplayed: UIEventSource<boolean>
|
|
if (layer.syncSelection === "local") {
|
|
isDisplayed = LocalStorageSource.GetParsed(
|
|
layoutToUse.id + "-layer-" + layer.id + "-enabled",
|
|
layer.shownByDefault
|
|
)
|
|
} else if (layer.syncSelection === "theme-only") {
|
|
isDisplayed = MapState.getPref(
|
|
osmConnection,
|
|
layoutToUse.id + "-layer-" + layer.id + "-enabled",
|
|
layer
|
|
)
|
|
} else if (layer.syncSelection === "global") {
|
|
isDisplayed = MapState.getPref(
|
|
osmConnection,
|
|
"layer-" + layer.id + "-enabled",
|
|
layer
|
|
)
|
|
} else {
|
|
isDisplayed = QueryParameters.GetBooleanQueryParameter(
|
|
"layer-" + layer.id,
|
|
layer.shownByDefault,
|
|
"Wether or not layer " + layer.id + " is shown"
|
|
)
|
|
}
|
|
|
|
const flayer: FilteredLayer = {
|
|
isDisplayed,
|
|
layerDef: layer,
|
|
appliedFilters: new UIEventSource<Map<string, FilterState>>(
|
|
new Map<string, FilterState>()
|
|
),
|
|
}
|
|
layer.filters.forEach((filterConfig) => {
|
|
const stateSrc = filterConfig.initState()
|
|
|
|
stateSrc.addCallbackAndRun((state) =>
|
|
flayer.appliedFilters.data.set(filterConfig.id, state)
|
|
)
|
|
flayer.appliedFilters
|
|
.map((dict) => dict.get(filterConfig.id))
|
|
.addCallback((state) => stateSrc.setData(state))
|
|
})
|
|
|
|
flayers.push(flayer)
|
|
}
|
|
|
|
for (const layer of layoutToUse.layers) {
|
|
if (layer.filterIsSameAs === undefined) {
|
|
continue
|
|
}
|
|
const toReuse = flayers.find((l) => l.layerDef.id === layer.filterIsSameAs)
|
|
if (toReuse === undefined) {
|
|
throw (
|
|
"Error in layer " +
|
|
layer.id +
|
|
": it defines that it should be use the filters of " +
|
|
layer.filterIsSameAs +
|
|
", but this layer was not loaded"
|
|
)
|
|
}
|
|
console.warn(
|
|
"Linking filter and isDisplayed-states of " +
|
|
layer.id +
|
|
" and " +
|
|
layer.filterIsSameAs
|
|
)
|
|
const selfLayer = flayers.findIndex((l) => l.layerDef.id === layer.id)
|
|
flayers[selfLayer] = {
|
|
isDisplayed: toReuse.isDisplayed,
|
|
layerDef: layer,
|
|
appliedFilters: toReuse.appliedFilters,
|
|
}
|
|
}
|
|
|
|
return flayers
|
|
}
|
|
}
|