forked from MapComplete/MapComplete
74 lines
2.9 KiB
Svelte
74 lines
2.9 KiB
Svelte
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* The RasterLayerOverview shows the available 4 categories of maps with a RasterLayerPicker
|
||
|
|
*/
|
||
|
|
import {Store, UIEventSource} from "../../Logic/UIEventSource";
|
||
|
|
import type {RasterLayerPolygon} from "../../Models/RasterLayers";
|
||
|
|
import type {MapProperties} from "../../Models/MapProperties";
|
||
|
|
import {Map as MlMap} from "maplibre-gl";
|
||
|
|
import RasterLayerPicker from "./RasterLayerPicker.svelte";
|
||
|
|
import type {EliCategory} from "../../Models/RasterLayerProperties";
|
||
|
|
import UserRelatedState from "../../Logic/State/UserRelatedState";
|
||
|
|
import Translations from "../i18n/Translations";
|
||
|
|
import Tr from "../Base/Tr.svelte";
|
||
|
|
|
||
|
|
export let availableLayers: Store<RasterLayerPolygon[]>
|
||
|
|
export let mapproperties: MapProperties
|
||
|
|
export let userstate: UserRelatedState
|
||
|
|
export let map: Store<MlMap>
|
||
|
|
/**
|
||
|
|
* Used to toggle the background layers on/off
|
||
|
|
*/
|
||
|
|
export let visible: UIEventSource<boolean> = undefined
|
||
|
|
|
||
|
|
type CategoryType = "photo" | "map" | "other" | "osmbasedmap"
|
||
|
|
const categories: Record<CategoryType, EliCategory[]> = {
|
||
|
|
"photo": ["photo", "historicphoto"],
|
||
|
|
"map": ["map", "historicmap"],
|
||
|
|
"other": ["other", "elevation"],
|
||
|
|
"osmbasedmap": ["osmbasedmap"]
|
||
|
|
}
|
||
|
|
|
||
|
|
function availableForCategory(type: CategoryType): Store<RasterLayerPolygon[]> {
|
||
|
|
const keywords = categories[type]
|
||
|
|
return availableLayers.mapD(available => available.filter(layer =>
|
||
|
|
keywords.indexOf(<EliCategory>layer.properties.category) >= 0
|
||
|
|
))
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapLayers = availableForCategory("map")
|
||
|
|
const osmbasedmapLayers = availableForCategory("osmbasedmap")
|
||
|
|
const photoLayers = availableForCategory("photo")
|
||
|
|
const otherLayers = availableForCategory("other")
|
||
|
|
|
||
|
|
function onApply() {
|
||
|
|
visible.setData(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPref(type: CategoryType): UIEventSource<string> {
|
||
|
|
return userstate.osmConnection.GetPreference("preferred-layer-" + type)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="h-full flex flex-col">
|
||
|
|
<slot name="title">
|
||
|
|
<h2>
|
||
|
|
<Tr t={Translations.t.general.backgroundMap}/>
|
||
|
|
</h2>
|
||
|
|
</slot>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 h-full w-full">
|
||
|
|
<RasterLayerPicker availableLayers={photoLayers} favourite={getPref("photo")} {map} {mapproperties}
|
||
|
|
on:appliedLayer={onApply} {visible}/>
|
||
|
|
<RasterLayerPicker availableLayers={mapLayers} favourite={getPref("map")} {map} {mapproperties}
|
||
|
|
on:appliedLayer={onApply} {visible}/>
|
||
|
|
<RasterLayerPicker availableLayers={osmbasedmapLayers} favourite={getPref("osmbasedmap")}
|
||
|
|
{map} {mapproperties} on:appliedLayer={onApply} {visible}/>
|
||
|
|
<RasterLayerPicker availableLayers={otherLayers} favourite={getPref("other")} {map} {mapproperties}
|
||
|
|
on:appliedLayer={onApply} {visible}/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|