manage overlay opacity

website/src/lib/assets/layers.ts

@@ -438,7 +438,7 @@ export const overlays: { [key: string]: AnySourceData; } = {
     },
 };
 
-export const opacities: { [key: string]: number; } = {
+export const defaultOpacities: { [key: string]: number; } = {
     ignFrCadastre: 0.5,
     ignSlope: 0.4,
     swisstopoSlope: 0.4,

website/src/lib/components/layer-control/LayerControl.svelte

@@ -7,7 +7,7 @@
 
 	import { Layers } from 'lucide-svelte';
 
-	import { basemaps, overlays, opacities } from '$lib/assets/layers';
+	import { basemaps, overlays } from '$lib/assets/layers';
 	import { settings } from '$lib/db';
 	import { map } from '$lib/stores';
 	import { get, writable } from 'svelte/store';
@@ -19,7 +19,8 @@
 		currentOverlays,
 		selectedBasemapTree,
 		selectedOverlayTree,
-		customLayers
+		customLayers,
+		opacities
 	} = settings;
 
 	$: if ($map) {
@@ -33,6 +34,7 @@
 	}
 
 	$: if ($map && $currentOverlays) {
+		console.log($currentOverlays);
 		// Add or remove overlay layers depending on the current overlays
 		let overlayLayers = getLayers($currentOverlays);
 		Object.keys(overlayLayers).forEach((id) => {
@@ -79,10 +81,10 @@
 							type: overlay.type === 'raster' ? 'raster' : 'line',
 							source: id,
 							paint: {
-								...(id in opacities
+								...(id in $opacities
 									? overlay.type === 'raster'
-										? { 'raster-opacity': opacities[id] }
+										? { 'raster-opacity': $opacities[id] }
-										: { 'line-opacity': opacities[id] }
+										: { 'line-opacity': $opacities[id] }
 									: {})
 							}
 						},

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -7,8 +7,10 @@
 	import * as Accordion from '$lib/components/ui/accordion';
 	import { Label } from '$lib/components/ui/label';
 	import * as Select from '$lib/components/ui/select';
+	import { Slider } from '$lib/components/ui/slider';
 
-	import { basemapTree, overlayTree } from '$lib/assets/layers';
+	import { basemapTree, overlays, overlayTree } from '$lib/assets/layers';
+	import { isSelected } from '$lib/components/layer-control/utils';
 	import { settings } from '$lib/db';
 
 	import { _ } from 'svelte-i18n';
@@ -17,11 +19,37 @@
 	import { browser } from '$app/environment';
 	import CustomLayers from './CustomLayers.svelte';
 
-	const { selectedBasemapTree, selectedOverlayTree, stravaHeatmapColor, currentOverlays } =
+	const {
-		settings;
+		selectedBasemapTree,
+		selectedOverlayTree,
+		stravaHeatmapColor,
+		currentOverlays,
+		customLayers,
+		opacities
+	} = settings;
 
 	export let open: boolean;
 
+	let selectedOverlay = writable(undefined);
+	let overlayOpacity = writable([1]);
+
+	function setOpacityFromSelection() {
+		if ($selectedOverlay) {
+			let overlayId = $selectedOverlay.value;
+			if ($opacities.hasOwnProperty(overlayId)) {
+				$overlayOpacity = [$opacities[overlayId]];
+			} else {
+				$overlayOpacity = [1];
+			}
+		} else {
+			$overlayOpacity = [1];
+		}
+	}
+
+	$: if ($selectedOverlay) {
+		setOpacityFromSelection();
+	}
+
 	const heatmapColors = [
 		{ value: '', label: '' },
 		{ value: 'blue', label: $_('layers.color.blue') },
@@ -120,13 +148,61 @@
 					</Accordion.Content>
 				</Accordion.Item>
 				<Accordion.Item value="item-3">
+					<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+					<Accordion.Content class="flex flex-col gap-3 overflow-visible">
+						<Label class="flex flex-row gap-2 items-center">
+							{$_('layers.custom_layers.overlay')}
+							<Select.Root bind:selected={$selectedOverlay}>
+								<Select.Trigger class="h-8 mr-1">
+									<Select.Value />
+								</Select.Trigger>
+								<Select.Content>
+									{#each Object.keys(overlays) as id}
+										{#if isSelected($selectedOverlayTree, id)}
+											<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
+										{/if}
+									{/each}
+									{#each Object.entries($customLayers) as [id, layer]}
+										{#if layer.layerType === 'overlay'}
+											<Select.Item value={id}>{layer.name}</Select.Item>
+										{/if}
+									{/each}
+								</Select.Content>
+							</Select.Root>
+						</Label>
+						<Label class="flex flex-row gap-2 items-center">
+							{$_('menu.style.opacity')}
+							<div class="p-2 pr-3 grow">
+								<Slider
+									bind:value={$overlayOpacity}
+									min={0.1}
+									max={1}
+									step={0.1}
+									disabled={$selectedOverlay === undefined}
+									onValueChange={() => {
+										if ($selectedOverlay) {
+											$opacities[$selectedOverlay.value] = $overlayOpacity[0];
+											if ($map) {
+												if ($map.getLayer($selectedOverlay.value)) {
+													$map.removeLayer($selectedOverlay.value);
+													$currentOverlays = $currentOverlays;
+												}
+											}
+										}
+									}}
+								/>
+							</div>
+						</Label>
+					</Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="item-4">
 					<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
 					<Accordion.Content class="overflow-visible">
 						<Label class="flex flex-row items-center justify-between gap-4"
 							>{$_('menu.style.color')}
 							<Select.Root bind:selected={$selectedHeatmapColor}>
 								<Select.Trigger class="h-8 mr-1">
-									<Select.Value placeholder="Theme" />
+									<Select.Value />
 								</Select.Trigger>
 								<Select.Content>
 									{#each heatmapColors as { value, label }}
@@ -137,7 +213,7 @@
 						</Label>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-4">
+				<Accordion.Item value="item-5">
 					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
 					<Accordion.Content></Accordion.Content>
 				</Accordion.Item>

website/src/lib/components/layer-control/utils.ts

@@ -24,4 +24,16 @@ export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean
         }
     });
     return layers;
+}
+
+export function isSelected(node: LayerTreeType, id: string) {
+    return Object.keys(node).some((key) => {
+        if (key === id) {
+            return node[key];
+        }
+        if (typeof node[key] !== "boolean" && isSelected(node[key], id)) {
+            return true;
+        }
+        return false;
+    });
 }

website/src/lib/db.ts

@@ -4,7 +4,7 @@ import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDra
 import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
 import { gpxStatistics, initTargetMapBounds, splitAs, updateTargetMapBounds } from './stores';
 import { mode } from 'mode-watcher';
-import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer } from './assets/layers';
+import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities } from './assets/layers';
 import { applyToOrderedItemsFromFile, applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection';
 import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList';
 import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
@@ -104,6 +104,7 @@ export const settings = {
     currentOverlays: dexieUninitializedSettingStore('currentOverlays', defaultOverlays),
     previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
     selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
+    opacities: dexieSettingStore('opacities', defaultOpacities),
     customLayers: dexieSettingStore<Record<string, CustomLayer>>('customLayers', {}),
     directionMarkers: dexieSettingStore('directionMarkers', false),
     distanceMarkers: dexieSettingStore('distanceMarkers', false),

website/src/locales/en.json

@@ -211,6 +211,7 @@
             "create": "Create layer",
             "update": "Update layer"
         },
+        "opacity": "Overlay opacity",
         "heatmap": "Strava Heatmap",
         "pois": "Points of interest",
         "label": {