fix updating overlay opacity

This commit is contained in:
vcoppe
2024-10-14 16:42:05 +02:00
parent 60f24f8757
commit 65cbf5e751
3 changed files with 20 additions and 16 deletions

View File

@@ -758,7 +758,7 @@ export const overpassTree: LayerTreeType = {
export const defaultBasemap = 'mapboxOutdoors'; export const defaultBasemap = 'mapboxOutdoors';
// Default overlays used (none) // Default overlays used (none)
export const defaultOverlays = { export const defaultOverlays: LayerTreeType = {
overlays: { overlays: {
world: { world: {
waymarked_trails: { waymarked_trails: {

View File

@@ -84,18 +84,21 @@
} }
function updateOverlays() { function updateOverlays() {
if ($map && $currentOverlays) { if ($map && $currentOverlays && $opacities) {
let overlayLayers = getLayers($currentOverlays); let overlayLayers = getLayers($currentOverlays);
try { try {
let activeOverlays = $map let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
.getStyle() if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
.imports.filter((i) => i.id !== 'basemap' && i.id !== 'overlays'); acc[i.id] = i;
let toRemove = activeOverlays.filter((i) => !overlayLayers[i.id]); }
toRemove.forEach((i) => { return acc;
$map.removeImport(i.id); }, {});
let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
toRemove.forEach((id) => {
$map.removeImport(id);
}); });
let toAdd = Object.entries(overlayLayers) let toAdd = Object.entries(overlayLayers)
.filter(([id, selected]) => selected && !activeOverlays.some((j) => j.id === id)) .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
.map(([id]) => id); .map(([id]) => id);
toAdd.forEach((id) => { toAdd.forEach((id) => {
addOverlay(id); addOverlay(id);
@@ -106,7 +109,7 @@
} }
} }
$: if ($map && $currentOverlays) { $: if ($map && $currentOverlays && $opacities) {
updateOverlays(); updateOverlays();
} }

View File

@@ -157,15 +157,16 @@
max={1} max={1}
step={0.1} step={0.1}
disabled={$selectedOverlay === undefined} disabled={$selectedOverlay === undefined}
onValueChange={() => { onValueChange={(value) => {
if ($selectedOverlay) { if ($selectedOverlay) {
$opacities[$selectedOverlay.value] = $overlayOpacity[0]; if ($map && isSelected($currentOverlays, $selectedOverlay.value)) {
if ($map) { try {
if ($map.getLayer($selectedOverlay.value)) { $map.removeImport($selectedOverlay.value);
$map.removeLayer($selectedOverlay.value); } catch (e) {
$currentOverlays = $currentOverlays; // No reliable way to check if the map is ready to remove sources and layers
} }
} }
$opacities[$selectedOverlay.value] = value[0];
} }
}} }}
/> />