forked from MapComplete/MapComplete
92 lines
2.5 KiB
Svelte
92 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import type { RasterLayerPolygon } from "../../Models/RasterLayers"
|
|
import OverlayMap from "./OverlayMap.svelte"
|
|
import type { MapProperties } from "../../Models/MapProperties"
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
|
import { Map as MlMap } from "maplibre-gl"
|
|
import { createEventDispatcher, onDestroy } from "svelte"
|
|
|
|
/***
|
|
* Chooses a background-layer out of available options
|
|
*/
|
|
export let availableLayers: Store<RasterLayerPolygon[]>
|
|
export let mapproperties: MapProperties
|
|
export let map: Store<MlMap>
|
|
|
|
export let visible: Store<boolean> = undefined
|
|
|
|
let dispatch = createEventDispatcher<{ appliedLayer }>()
|
|
|
|
export let favourite: UIEventSource<string> | undefined = undefined
|
|
|
|
let rasterLayer = new UIEventSource<RasterLayerPolygon>(availableLayers.data?.[0])
|
|
let hasLayers = true
|
|
onDestroy(
|
|
availableLayers.addCallbackAndRun((layers) => {
|
|
if (layers === undefined || layers.length === 0) {
|
|
hasLayers = false
|
|
return
|
|
}
|
|
hasLayers = true
|
|
rasterLayer.setData(layers[0])
|
|
})
|
|
)
|
|
|
|
if (favourite) {
|
|
onDestroy(
|
|
favourite.addCallbackAndRunD((favourite) => {
|
|
const fav = availableLayers.data?.find((l) => l.properties.id === favourite)
|
|
if (!fav) {
|
|
return
|
|
}
|
|
rasterLayer.setData(fav)
|
|
})
|
|
)
|
|
|
|
onDestroy(
|
|
rasterLayer.addCallbackAndRunD((selected) => {
|
|
favourite?.setData(selected.properties.id)
|
|
})
|
|
)
|
|
}
|
|
|
|
let rasterLayerOnMap = UIEventSource.feedFrom(rasterLayer)
|
|
|
|
if (visible) {
|
|
onDestroy(
|
|
visible?.addCallbackAndRunD((visible) => {
|
|
if (visible) {
|
|
rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers.data[0])
|
|
} else {
|
|
rasterLayerOnMap.setData(undefined)
|
|
}
|
|
})
|
|
)
|
|
}
|
|
</script>
|
|
|
|
{#if hasLayers}
|
|
<div class="flex h-full w-full flex-col">
|
|
<button
|
|
on:click={() => {
|
|
mapproperties.rasterLayer.setData(rasterLayer.data)
|
|
dispatch("appliedLayer")
|
|
}}
|
|
class="m-0 h-full w-full p-0"
|
|
>
|
|
<OverlayMap
|
|
rasterLayer={rasterLayerOnMap}
|
|
placedOverMap={map}
|
|
placedOverMapProperties={mapproperties}
|
|
{visible}
|
|
/>
|
|
</button>
|
|
<select bind:value={$rasterLayer} class="w-full">
|
|
{#each $availableLayers as availableLayer}
|
|
<option value={availableLayer}>
|
|
{availableLayer.properties.name}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
{/if}
|