layer control progress

website/src/lib/assets/layers.ts

@@ -371,7 +371,9 @@ export const opacities: { [key: string]: number; } = {
     swisstopoSlope: 0.4,
 };
 
-export const basemapTree = {
+export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
+
+export const basemapTree: LayerTreeType = {
     world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
     countries: {
         bulgaria: ['bgMountains'],
@@ -387,7 +389,7 @@ export const basemapTree = {
     },
 }
 
-export const overlayTree = {
+export const overlayTree: LayerTreeType = {
     world: {
         cyclOSM: ['cyclOSMlite'],
         waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']

website/src/lib/components/LayerControl.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	import mapboxgl from 'mapbox-gl';
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
-
-	import Fa from 'svelte-fa';
-	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
-
-	import {
-		basemaps,
-		basemapTree,
-		overlays,
-		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[defaultBasemap]);
-	}
-</script>
-
-<CustomControl {map} class="group">
-	<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
-		<Fa icon={faLayerGroup} size="1.4x" />
-	</div>
-	<LayerTree
-		{basemaps}
-		{overlays}
-		onBasemapChange={(id) => {
-			map.setStyle(basemaps[id]);
-		}}
-		onOverlayChange={(id, checked) => {
-			if (checked) {
-				if (!map.getSource(id)) {
-					map.addSource(id, overlays[id]);
-				}
-				map.addLayer({
-					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);
-			}
-		}}
-	/>
-</CustomControl>

website/src/lib/components/LayerTree.svelte

@@ -1,35 +0,0 @@
-<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

@@ -6,7 +6,7 @@
 
 	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-	import LayerControl from './LayerControl.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 
 	mapboxgl.accessToken =
 		'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import mapboxgl from 'mapbox-gl';
+
+	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+	import LayerTree from './LayerTree.svelte';
+
+	import Fa from 'svelte-fa';
+	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+
+	import {
+		basemaps,
+		basemapTree,
+		overlays,
+		overlayTree,
+		opacities,
+		defaultBasemap
+	} from '$lib/assets/layers';
+
+	export let map: mapboxgl.Map | null;
+
+	$: if (map) {
+		map?.setStyle(basemaps[defaultBasemap]);
+	}
+</script>
+
+<CustomControl {map} class="group">
+	<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 space-y-2">
+		<LayerTree
+			layerTree={basemapTree}
+			name="basemaps"
+			onValueChange={(id) => {
+				if (map) {
+					map.setStyle(basemaps[id]);
+				}
+			}}
+		/>
+		<LayerTree
+			layerTree={overlayTree}
+			name="overlays"
+			multiple={true}
+			onValueChange={(id, checked) => {
+				if (map) {
+					if (checked) {
+						if (!map.getSource(id)) {
+							map.addSource(id, overlays[id]);
+						}
+						map.addLayer({
+							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);
+					}
+				}
+			}}
+		/>
+	</div>
+</CustomControl>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import LayerTreeNode from './LayerTreeNode.svelte';
+	import { type LayerTreeType } from '$lib/assets/layers';
+
+	export let layerTree: LayerTreeType;
+	export let name: string;
+	export let multiple: boolean = false;
+
+	export let onValueChange: (id: string, checked: boolean) => void;
+</script>
+
+<fieldset>
+	<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
+</fieldset>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { type LayerTreeType } from '$lib/assets/layers';
+
+	export let name: string;
+	export let node: LayerTreeType;
+	export let multiple: boolean = false;
+
+	export let onValueChange: (id: string, checked: boolean) => void;
+</script>
+
+<div class="flex flex-col">
+	{#if Array.isArray(node)}
+		{#each node as id}
+			<div>
+				{#if multiple}
+					<input
+						type="checkbox"
+						{id}
+						{name}
+						value={id}
+						on:change={(e) => {
+							onValueChange(id, e.target.checked);
+						}}
+					/>
+				{:else}
+					<input
+						type="radio"
+						{id}
+						{name}
+						value={id}
+						on:change={() => {
+							onValueChange(id, true);
+						}}
+					/>
+				{/if}
+				<label for={id}>{id}</label>
+			</div>
+		{/each}
+	{:else}
+		{#each Object.keys(node) as id}
+			<div class="ml-2">
+				<span>{id}</span>
+				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
+			</div>
+		{/each}
+	{/if}
+</div>

website/src/routes/+page.svelte

@@ -10,5 +10,5 @@
 		<Toolbar />
 		<Map class="h-full" />
 	</div>
-	<div class="h-1/3">Test</div>
+	<div class="h-12">Test</div>
 </div>