layer control progress

website/src/lib/assets/layers.ts

@@ -369,4 +369,36 @@ export const opacities: { [key: string]: number; } = {
     ignFrCadastre: 0.5,
     ignSlope: 0.4,
     swisstopoSlope: 0.4,
-};
+};
+
+export const basemapTree = {
+    world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
+    countries: {
+        bulgaria: ['bgMountains'],
+        finland: ['finlandTopo'],
+        france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
+        newZealand: ['linz', 'linzTopo'],
+        norway: ['norwayTopo'],
+        spain: ['ignEs'],
+        sweden: ['swedenTopo'],
+        switzerland: ['swisstopo'],
+        unitedKingdom: ['ordnanceSurvey'],
+        unitedStates: ['usgs'],
+    },
+}
+
+export const overlayTree = {
+    world: {
+        cyclOSM: ['cyclOSMlite'],
+        waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
+    },
+    countries: {
+        france: ['ignFrCadastre', 'ignSlope'],
+        switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
+    },
+}
+
+export const defaultBasemap = 'mapboxOutdoors';
+
+export const defaultAvailableBasemaps = ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'];
+export const defaultAvailableOverlays = ['cyclOSMlite', 'waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter'];

website/src/lib/components/LayerControl.svelte

@@ -5,16 +5,22 @@
 	import Fa from 'svelte-fa';
 	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 
-	import { Label } from '$lib/components/ui/label';
+	import {
-	import * as RadioGroup from '$lib/components/ui/radio-group';
+		basemaps,
-	import { Checkbox } from '$lib/components/ui/checkbox';
+		basemapTree,
-
+		overlays,
-	import { basemaps, overlays, opacities } from '$lib/assets/layers';
+		overlayTree,
+		opacities,
+		defaultBasemap,
+		defaultAvailableBasemaps,
+		defaultAvailableOverlays
+	} from '$lib/assets/layers';
+	import LayerTree from './LayerTree.svelte';
 
 	export let map: mapboxgl.Map | null;
 
 	$: if (map) {
-		map?.setStyle(basemaps['mapboxOutdoors']);
+		map?.setStyle(basemaps[defaultBasemap]);
 	}
 </script>
 
@@ -22,50 +28,32 @@
 	<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
 		<Fa icon={faLayerGroup} size="1.4x" />
 	</div>
-	<div class="hidden group-hover:block p-2">
+	<LayerTree
-		<RadioGroup.Root
+		{basemaps}
-			value="mapboxOutdoors"
+		{overlays}
-			onValueChange={(id) => {
+		onBasemapChange={(id) => {
-				map.setStyle(basemaps[id]);
+			map.setStyle(basemaps[id]);
-			}}
+		}}
-		>
+		onOverlayChange={(id, checked) => {
-			{#each Object.keys(basemaps) as id}
+			if (checked) {
-				<div class="flex items-center space-x-2">
+				if (!map.getSource(id)) {
-					<RadioGroup.Item value={id} {id} />
+					map.addSource(id, overlays[id]);
-					<Label for={id}>{id}</Label>
+				}
-				</div>
+				map.addLayer({
-			{/each}
+					id,
-		</RadioGroup.Root>
+					type: overlays[id].type === 'raster' ? 'raster' : 'line',
-		<div class="flex flex-col">
+					source: id,
-			{#each Object.keys(overlays) as id}
+					paint: {
-				<div>
+						...(id in opacities
-					<Checkbox
+							? overlays[id].type === 'raster'
-						{id}
+								? { 'raster-opacity': opacities[id] }
-						onCheckedChange={(checked) => {
+								: { 'line-opacity': opacities[id] }
-							if (checked) {
+							: {})
-								if (!map.getSource(id)) {
+					}
-									map.addSource(id, overlays[id]);
+				});
-								}
+			} else {
-								map.addLayer({
+				map.removeLayer(id);
-									id,
+			}
-									type: overlays[id].type === 'raster' ? 'raster' : 'line',
+		}}
-									source: id,
+	/>
-									paint: {
-										...(id in opacities
-											? overlays[id].type === 'raster'
-												? { 'raster-opacity': opacities[id] }
-												: { 'line-opacity': opacities[id] }
-											: {})
-									}
-								});
-							} else {
-								map.removeLayer(id);
-							}
-						}}
-					/>
-					<Label for={id}>{id}</Label>
-				</div>
-			{/each}
-		</div>
-	</div>
 </CustomControl>

website/src/lib/components/LayerTree.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+
+	export let basemaps;
+	export let overlays;
+
+	export let onBasemapChange: (id: string) => void;
+	export let onOverlayChange: (id: string, checked: boolean) => void;
+</script>
+
+<div class="hidden group-hover:block p-2 space-y-2">
+	<RadioGroup.Root value="mapboxOutdoors" onValueChange={onBasemapChange}>
+		{#each Object.keys(basemaps) as id}
+			<div class="flex items-center space-x-2">
+				<RadioGroup.Item value={id} {id} />
+				<Label for={id}>{id}</Label>
+			</div>
+		{/each}
+	</RadioGroup.Root>
+	<div class="flex flex-col">
+		{#each Object.keys(overlays) as id}
+			<div>
+				<Checkbox
+					{id}
+					onCheckedChange={(checked) => {
+						onOverlayChange(id, checked === 'indeterminate' ? false : checked);
+					}}
+				/>
+				<Label for={id}>{id}</Label>
+			</div>
+		{/each}
+	</div>
+</div>

website/src/lib/components/Map.svelte

@@ -19,7 +19,7 @@
 		map = new mapboxgl.Map({
 			container: 'map',
 			style: { version: 8, sources: {}, layers: [] },
-			projection: 'mercator',
+			projection: { name: 'mercator' },
 			hash: true,
 			language: 'auto',
 			attributionControl: false,