MapComplete/UI/Map/RasterLayerPicker.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="h-full w-full flex flex-col">
        <button on:click={() => {mapproperties.rasterLayer.setData(rasterLayer.data);
            dispatch("appliedLayer")
        }} class="w-full h-full m-0 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}