layer control progress

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>