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

<script lang="ts">
	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
	import LayerTree from './LayerTree.svelte';
	import LayerControlSettings from './LayerControlSettings.svelte';

	import { Separator } from '$lib/components/ui/separator';
	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';

	import { Layers } from 'lucide-svelte';

	import {
		basemaps,
		basemapTree,
		overlays,
		overlayTree,
		opacities,
		defaultBasemap
	} from '$lib/assets/layers';

	import { map } from '$lib/stores';

	$: if ($map) {
		$map.on('load', () => {
			$map.setStyle(basemaps[defaultBasemap]);
		});
	}

	let addOverlayLayer: { [key: string]: () => void } = {};

	function addOverlayLayerForId(id: string) {
		return () => {
			if ($map) {
				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] }
							: {})
					}
				});
			}
		};
	}
</script>

<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
	<div
		class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
	>
		<Layers size="20" />
	</div>
	<div
		class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr] h-full"
	>
		<ScrollArea>
			<div class="h-fit">
				<div class="p-2">
					<LayerTree
						layerTree={basemapTree}
						name="basemaps"
						onValueChange={(id) => {
							if ($map) {
								$map.setStyle(basemaps[id], {
									diff: false
								});
							}
						}}
					/>
				</div>
				<Separator class="w-full" />
				<div class="p-2">
					<LayerTree
						layerTree={overlayTree}
						name="overlays"
						multiple={true}
						onValueChange={(id, checked) => {
							if (!addOverlayLayer.hasOwnProperty(id)) {
								addOverlayLayer[id] = addOverlayLayerForId(id);
							}
							if ($map) {
								if (checked) {
									addOverlayLayer[id]();
									$map.on('style.load', addOverlayLayer[id]);
								} else {
									$map.removeLayer(id);
									$map.off('style.load', addOverlayLayer[id]);
								}
							}
						}}
					/>
				</div>
				<Separator class="w-full" />
				<div class="p-2">
					<LayerControlSettings />
				</div>
			</div>
		</ScrollArea>
	</div>
</CustomControl>