layer selection

This commit is contained in:
vcoppe
2024-05-05 18:59:09 +02:00
parent b3d016e2af
commit a261193267
8 changed files with 295 additions and 197 deletions

View File

@@ -12,6 +12,7 @@
import { settings } from '$lib/db';
import { map } from '$lib/stores';
import { get, writable } from 'svelte/store';
import { getLayers } from './utils';
const {
currentBasemap,
@@ -30,21 +31,21 @@
$: if ($map) {
// Add or remove overlay layers depending on the current overlays
// Object.keys(overlays).forEach((id) => {
// if ($currentOverlays.includes(id)) {
// if (!addOverlayLayer.hasOwnProperty(id)) {
// addOverlayLayer[id] = addOverlayLayerForId(id);
// }
// if (!$map.getLayer(id)) {
// addOverlayLayer[id]();
// $map.on('style.load', addOverlayLayer[id]);
// }
// } else if ($map.getLayer(id)) {
// $map.removeLayer(id);
// $map.off('style.load', addOverlayLayer[id]);
// }
// });
console.log($currentOverlays);
let overlayLayers = getLayers($currentOverlays);
Object.keys(overlayLayers).forEach((id) => {
if (overlayLayers[id]) {
if (!addOverlayLayer.hasOwnProperty(id)) {
addOverlayLayer[id] = addOverlayLayerForId(id);
}
if (!$map.getLayer(id)) {
addOverlayLayer[id]();
$map.on('style.load', addOverlayLayer[id]);
}
} else if ($map.getLayer(id)) {
$map.removeLayer(id);
$map.off('style.load', addOverlayLayer[id]);
}
});
}
let selectedBasemap = writable(get(currentBasemap));
@@ -60,18 +61,6 @@
selectedBasemap.set(value);
});
let selectedOverlays = writable(get(currentOverlays));
selectedOverlays.subscribe((value) => {
// Updates coming from checkboxes
if (value != get(currentOverlays)) {
currentOverlays.set(value);
}
});
currentOverlays.subscribe((value) => {
// Updates coming from the database, or from the user toggling overlays
selectedOverlays.set(value);
});
let addOverlayLayer: { [key: string]: () => void } = {};
function addOverlayLayerForId(id: string) {
return () => {
@@ -124,7 +113,7 @@
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$selectedOverlays}
bind:checked={$currentOverlays}
/>
</div>
<Separator class="w-full" />