@swr-data-lab/components 1.11.2 → 1.12.0

package/src/maplibre/Tooltip/Tooltip.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import { type Listener, type LngLatLike, Popup } from 'maplibre-gl';
+	import { getMapContext } from '../context.svelte.ts';
+	import { resetPopupEventListener } from '../utils';
+
+	interface TooltipProps {
+		position: LngLatLike | undefined;
+		children?: Snippet;
+		maxWidth?: number;
+		showCloseButton?: boolean;
+		/**
+		 * Close the tooltip if the user clicks anywhere on the map
+		 */
+		closeOnClick?: boolean;
+		/**
+		 * y axis offset (px)
+		 */
+		offset?: number;
+		/**
+		 * Toggle mouse events on the tooltip element. Should be false if the tooltip appears on hover to avoid flickering.
+		 */
+		mouseEvents?: boolean;
+		onClose?: Listener | undefined;
+		onOpen?: Listener | undefined;
+	}
+
+	let {
+		position,
+		children,
+		offset = 20,
+		maxWidth = 360,
+		showCloseButton = false,
+		closeOnClick = true,
+		mouseEvents = false,
+		onClose,
+		onOpen
+	}: TooltipProps = $props();
+
+	const { map } = $derived(getMapContext());
+
+	let tooltip = new Popup({
+		closeButton: showCloseButton,
+		closeOnClick: closeOnClick,
+		maxWidth: `${maxWidth}px`,
+		offset: offset
+	});
+
+	let el: Node | undefined = $state();
+
+	$effect(() => {
+		if (position && el && map) {
+			tooltip.setLngLat(position).setDOMContent(el).addTo(map);
+		} else {
+			tooltip.remove();
+		}
+	});
+
+	// Bind events
+	$effect(() => resetPopupEventListener(tooltip, 'open', onOpen));
+	$effect(() => resetPopupEventListener(tooltip, 'close', onClose));
+
+	onDestroy(() => tooltip.remove());
+</script>
+
+<div bind:this={el} class="container" class:mouseEvents>
+	{@render children?.()}
+</div>
+
+<style>
+	.container {
+		background: white;
+		padding: 0.65em;
+		border-radius: 2px;
+		border: 1px solid rgba(0, 0, 0, 0.75);
+		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
+		pointer-events: none;
+	}
+
+	.mouseEvents {
+		pointer-events: all;
+	}
+
+	:global {
+		.maplibregl-popup {
+			top: 0;
+			left: 0;
+			display: flex;
+			position: absolute;
+			will-change: transform;
+		}
+		.maplibregl-popup-anchor-top,
+		.maplibregl-popup-anchor-top-left,
+		.maplibregl-popup-anchor-top-right {
+			flex-direction: column;
+		}
+		.maplibregl-popup-anchor-bottom,
+		.maplibregl-popup-anchor-bottom-left,
+		.maplibregl-popup-anchor-bottom-right {
+			flex-direction: column-reverse;
+		}
+
+		.maplibregl-popup-anchor-left {
+			flex-direction: row;
+		}
+		.maplibregl-popup-anchor-right {
+			flex-direction: row-reverse;
+		}
+		.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+			transform: translateY(50%) rotate(45deg);
+			align-self: center;
+		}
+		.maplibregl-popup-anchor-top .maplibregl-popup-tip {
+			transform: translateY(-50%) rotate(-135deg);
+			align-self: center;
+		}
+
+		.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+			transform: translateX(-50%) rotate(135deg);
+			align-self: center;
+		}
+		.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+			transform: translateY(1em) translateX(-50%) rotate(135deg);
+		}
+		.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+			transform: translateY(-1em) translateX(-50%) rotate(135deg);
+		}
+		.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+			transform: translateX(50%) rotate(-45deg);
+			align-self: center;
+		}
+		.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+			transform: translateX(-1em) translateY(-50%) rotate(-135deg);
+			align-self: flex-end;
+		}
+		.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+			transform: translateX(-1em) translateY(50%) rotate(45deg);
+			align-self: flex-end;
+		}
+
+		.maplibregl-popup-close-button {
+			background-color: transparent;
+			border: 0;
+			cursor: pointer;
+			position: absolute;
+			top: 0.45em;
+			right: 0.45em;
+			display: flex;
+			border-radius: var(--br-small);
+			justify-content: center;
+			align-items: center;
+			padding-bottom: 0.1em;
+			border: 1px solid var(--violet-dark-5);
+			font-size: 1.2rem;
+			width: 1em;
+			height: 1em;
+			z-index: 100;
+		}
+
+		.maplibregl-popup-close-button:hover,
+		.maplibregl-popup-close-button:focus {
+			background: rgb(245, 245, 245);
+		}
+
+		.maplibregl-popup-tip {
+			width: 0.6rem;
+			height: 0.6rem;
+			background: white;
+			position: absolute;
+			border-right: 1px solid rgba(0, 0, 0, 0.75);
+			border-bottom: 1px solid rgba(0, 0, 0, 0.75);
+			z-index: 10;
+		}
+	}
+</style>

package/src/maplibre/Tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip.svelte';
+export default Tooltip;

package/src/maplibre/VectorLayer/VectorLayer.stories.svelte

@@ -0,0 +1,65 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Map from '../Map/Map.svelte';
+	import VectorLayer from './VectorLayer.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+	import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
+
+	import { SWRDataLabLight } from '../MapStyle';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Layer/VectorLayer',
+		component: VectorLayer
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight}>
+				<VectorTileSource
+					id="ev-infra-source"
+					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
+				/>
+				<VectorLayer
+					sourceId="ev-infra-source"
+					type="fill"
+					id="coverage-fill"
+					sourceLayer="coverage"
+					placeBelow="street-residential"
+					paint={{
+						'fill-color': [
+							'step',
+							['get', 'coverage_2025'],
+							'white',
+							1,
+							'lightgray',
+							1.3,
+							'lightgreen'
+						]
+					}}
+				/>
+				<VectorLayer
+					sourceId="ev-infra-source"
+					sourceLayer="coverage"
+					id="ev-infra-outline"
+					type="line"
+					paint={{
+						'line-width': 0.5,
+						'line-color': 'purple',
+						'line-opacity': 1
+					}}
+				/>
+				<AttributionControl />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 100%;
+		height: 600px;
+	}
+</style>

package/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type {
+		AddLayerObject,
+		FillLayoutProps,
+		FillPaintProps,
+		LineLayoutProps,
+		LinePaintProps,
+		MapGeoJSONFeature,
+		MapLayerMouseEvent
+	} from 'maplibre-gl';
+
+	import { getMapContext } from '../context.svelte.ts';
+	import { onDestroy } from 'svelte';
+	import { resetLayerEventListener } from '../utils.ts';
+
+	interface VectorLayerProps {
+		id: string;
+		sourceId: string;
+		sourceLayer: string;
+		type: 'line' | 'fill';
+		placeBelow: string;
+		visible?: boolean;
+		minZoom?: number;
+		maxZoom?: number;
+		paint?: LinePaintProps | FillPaintProps;
+		layout?: LineLayoutProps | FillLayoutProps;
+		hovered?: MapGeoJSONFeature | undefined;
+		selected?: MapGeoJSONFeature | undefined;
+
+		onclick: (e: MapLayerMouseEvent) => any;
+		onmousemove: (e: MapLayerMouseEvent) => any;
+		onmouseleave: (e: MapLayerMouseEvent) => any;
+	}
+	const {
+		id,
+		sourceId,
+		sourceLayer,
+		visible = true,
+		placeBelow = 'label-place-capital',
+		type,
+		paint,
+		layout,
+		hovered = $bindable(),
+		selected = $bindable(),
+		minZoom = 0,
+		maxZoom = 24,
+		onclick,
+		onmousemove,
+		onmouseleave
+	}: VectorLayerProps = $props();
+
+	const { map, styleLoaded } = $derived(getMapContext());
+	let beforeId: string | undefined = $state();
+	let prevSelected: string | number | undefined = $state();
+	let prevHovered: string | number | undefined = $state();
+
+	const layerSpec = {
+		id,
+		type,
+		source: sourceId,
+		'source-layer': sourceLayer,
+		layout: $state.snapshot(layout) ?? {},
+		paint: $state.snapshot(paint) ?? {},
+		minzoom: minZoom,
+		maxzoom: maxZoom
+	} as AddLayerObject;
+
+	$effect(() => {
+		if (map && styleLoaded) {
+			const style = map.getStyle();
+			beforeId = style.layers.find((l) => {
+				return l.id === placeBelow;
+			})?.id;
+		}
+	});
+
+	$effect(() => {
+		if (map && styleLoaded && beforeId) {
+			map.addLayer(layerSpec, beforeId);
+		}
+	});
+
+	$effect(() => resetLayerEventListener(map, 'click', id, onclick));
+	$effect(() => resetLayerEventListener(map, 'mousemove', id, onmousemove));
+	$effect(() => resetLayerEventListener(map, 'mouseleave', id, onmouseleave));
+
+	// Set hovered feature state
+	$effect(() => {
+		if (styleLoaded) {
+			if (hovered) {
+				if (prevHovered) {
+					map?.setFeatureState(
+						{ source: sourceId, sourceLayer: sourceLayer, id: prevHovered },
+						{ hovered: false }
+					);
+				}
+				map?.setFeatureState(
+					{ source: sourceId, sourceLayer: sourceLayer, id: hovered.id },
+					{ hovered: true }
+				);
+				prevHovered = hovered.id;
+			} else {
+				if (prevHovered) {
+					map?.setFeatureState(
+						{ source: sourceId, sourceLayer: sourceLayer, id: prevHovered },
+						{ hovered: false }
+					);
+				}
+			}
+		}
+	});
+
+	// Set selected feature state
+	$effect(() => {
+		if (styleLoaded) {
+			if (selected) {
+				if (prevSelected) {
+					map?.setFeatureState(
+						{ source: sourceId, sourceLayer: sourceLayer, id: prevSelected },
+						{ selected: false }
+					);
+				}
+				map?.setFeatureState(
+					{ source: sourceId, sourceLayer: sourceLayer, id: selected.id },
+					{ selected: true }
+				);
+				prevSelected = selected.id;
+			} else {
+				if (prevSelected) {
+					map?.setFeatureState(
+						{ source: sourceId, sourceLayer: sourceLayer, id: prevSelected },
+						{ selected: false }
+					);
+				}
+			}
+		}
+	});
+
+	onDestroy(() => {
+		if (map && map.getLayer(id)) map.removeLayer(id);
+	});
+</script>

package/src/maplibre/VectorLayer/index.js

@@ -0,0 +1,2 @@
+import VectorLayer from './VectorLayer.svelte';
+export default VectorLayer;

package/src/maplibre/VectorTileSource/VectorTileSource.mdx

@@ -0,0 +1,19 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as VectorTileSourceStories from './VectorTileSource.stories.svelte';
+
+<Meta of={VectorTileSourceStories} />
+
+# VectorTileSource
+
+Loads tiled vector data from a tileserver. Any mablibre-supported tileserver will work, but we'll typically use tiles served by `versatiles-rs` or `versatiles-node-static-proxy`.
+
+```jsx
+<Map>
+	<VectorTileSource
+		url="https://static.datenhub.net/rent_merged.versatiles?tiles/{z}/{x}/{y}"
+		id="chargers"
+	/>
+	<VectorLayer sourceId="chargers" />
+</Map>
+```

package/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte

@@ -0,0 +1,46 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import VectorTileSource from './VectorTileSource.svelte';
+	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
+	import Map from '../Map/Map.svelte';
+	import { SWRDataLabLight } from '../MapStyle/';
+	import AttributionControl from '../AttributionControl';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Source/VectorTileSource',
+		component: VectorTileSource
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight}>
+				<VectorTileSource
+					id="ev-infra-source"
+					url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
+				/>
+				<VectorLayer
+					sourceId="ev-infra-source"
+					sourceLayer="coverage"
+					id="ev-infra-outline"
+					type="line"
+					paint={{
+						'line-width': 0.5,
+						'line-color': 'purple',
+						'line-opacity': 1
+					}}
+				/>
+				<AttributionControl />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 100%;
+		height: 600px;
+	}
+</style>

package/src/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import { type SourceSpecification } from 'maplibre-gl';
+	import MapSource from '../Source/MapSource.svelte';
+
+	interface VectorTileSourceProps {
+		id: string;
+		url: string;
+		minZoom?: number;
+		maxZoom?: number;
+		children?: Snippet;
+	}
+
+	const { minZoom = 0, maxZoom = 24, id, url }: VectorTileSourceProps = $props();
+
+	const sourceSpec: SourceSpecification = {
+		type: 'vector',
+		tiles: [url],
+		maxzoom: maxZoom,
+		minzoom: minZoom
+	};
+</script>
+
+<MapSource {id} {sourceSpec} />

package/src/maplibre/VectorTileSource/index.js

@@ -0,0 +1,2 @@
+import VectorTileSource from './VectorTileSource.svelte';
+export default VectorTileSource;

package/src/maplibre/WithLinkLocation/WithLinkLocation.mdx

@@ -0,0 +1,11 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as WithLinkLocationStories from './WithLinkLocation.stories.svelte';
+
+<Meta of={WithLinkLocationStories} />
+
+# WithLinkLocation
+
+<Controls />
+
+<Stories />

package/src/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import WithLinkLocation from './WithLinkLocation.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import Map from '../Map/Map.svelte';
+	import { SWRDataLabLight } from '../MapStyle';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Extras/WithLinkLocation',
+		component: WithLinkLocation
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<WithLinkLocation countries="de" languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA">
+				<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}></Map>
+			</WithLinkLocation>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>

package/src/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { onMount, setContext, type Snippet } from 'svelte';
+	import { MaptilerGeocoderAPI } from '../GeocoderControl/GeocoderAPIs';
+	import {
+		type GeocodingCountry,
+		type GeocodingLanguage,
+		type GeocodingService,
+		type Location
+	} from '../types';
+
+	import type {
+		MaplibreGeocoderApi,
+		MaplibreGeocoderApiConfig
+	} from '@maplibre/maplibre-gl-geocoder';
+
+	interface WithLinkLocationProps {
+		service?: GeocodingService;
+		/**
+		 * API key for selected geocoding `service`
+		 */
+		key: string;
+		/**
+		 * Limit search to one or more countries
+		 */
+		countries?: GeocodingLanguage | GeocodingCountry[];
+		languages?: GeocodingLanguage | GeocodingLanguage[];
+		urlParameter?: string;
+		children: Snippet;
+	}
+
+	const {
+		key,
+		service = 'maptiler',
+		countries = 'de',
+		languages = 'de',
+		urlParameter = 'location',
+		children
+	}: WithLinkLocationProps = $props();
+
+	const countriesArr = Array.isArray(countries) ? countries : [countries];
+	const languagesArr = Array.isArray(languages) ? languages : [languages];
+
+	let geocoder: MaplibreGeocoderApi;
+	if (service === 'maptiler') {
+		geocoder = new MaptilerGeocoderAPI(key);
+	}
+
+	let location: Location | boolean | undefined = $state();
+
+	function bboxToArea(bbox: [number, number, number, number]) {
+		return (bbox[2] - bbox[0]) * (bbox[3] - bbox[1]);
+	}
+
+	onMount(async () => {
+		const params = new URLSearchParams(window.location.search);
+		if (params.has(urlParameter)) {
+			const config: MaplibreGeocoderApiConfig = {
+				countries: countriesArr.join(','),
+				language: languagesArr.join(','),
+				query: params.get(urlParameter)?.toString(),
+				limit: 1
+			};
+			const res = await geocoder.forwardGeocode(config);
+			if (res.features[0].bbox && res.features[0].geometry.type === 'Point') {
+				location = {
+					lat: res.features[0].geometry.coordinates[1],
+					lng: res.features[0].geometry.coordinates[0],
+					zoom: 11 - bboxToArea(res.features[0].bbox) * 5.5
+				};
+			}
+		} else {
+			location = false;
+		}
+	});
+
+	$effect.pre(() => {
+		setContext('initialLocation', location);
+	});
+</script>
+
+{#if location !== undefined}
+	{@render children?.()}
+{/if}

package/src/maplibre/WithLinkLocation/index.js

@@ -0,0 +1,2 @@
+import WithLinkLocation from './WithLinkLocation.svelte';
+export default WithLinkLocation;

package/src/maplibre/context.svelte.ts

@@ -0,0 +1,89 @@
+import type { Map as MapLibre, Marker, LayerSpecification } from 'maplibre-gl';
+import { getContext, setContext } from 'svelte';
+
+const MAP_CONTEXT_KEY = Symbol.for('map-context');
+const SOURCE_CONTEXT_KEY = Symbol.for('source-context');
+const LAYER_CONTEXT_KEY = Symbol.for('layer-context');
+const POPUP_TARGET_KEY = Symbol.for('popup-target');
+
+export class Box<T> {
+	value = $state() as T;
+
+	constructor(initialValue: T) {
+		this.value = initialValue;
+	}
+}
+
+export class MapContext {
+	_map = $state(null) as MapLibre | null;
+	minzoom = $state(0);
+	maxzoom = $state(24);
+	styleLoaded = $state(false);
+	private _listener?: maplibregl.Listener = undefined;
+
+	get map() {
+		return this._map;
+	}
+
+	set map(value: maplibregl.Map | null) {
+		// Unbind any old event listeners
+		if (this._listener) {
+			this._map?.off('styledata', this._listener);
+			this._listener = undefined;
+		}
+		// Set new map instance and bind new event listeners
+		this._map = value;
+		if (this._map) {
+			this._listener = this._onstyledata.bind(this);
+			this._map.on('styledata', this._listener);
+		}
+	}
+
+	private _onstyledata(e: maplibregl.MapStyleDataEvent) {
+		this.styleLoaded = true;
+	}
+}
+
+export class SourceContext {
+	_source = $state();
+	loaded = $state(false);
+	minzoom = $state(0);
+	maxzoom = $state(24);
+
+	get source() {
+		return this._source;
+	}
+}
+export class LayerContext {
+	layer = $state() as LayerSpecification;
+}
+
+export function setPopupTarget(value: Box<Marker | string | undefined>) {
+	setContext(POPUP_TARGET_KEY, value);
+}
+
+export function getPopupTarget(): Box<Marker | string> | undefined {
+	return getContext(POPUP_TARGET_KEY);
+}
+
+export function createMapContext(): MapContext {
+	return setContext(MAP_CONTEXT_KEY, new MapContext());
+}
+export function getMapContext(): MapContext {
+	return getContext(MAP_CONTEXT_KEY);
+}
+
+export function createSourceContext(): SourceContext {
+	return setContext(SOURCE_CONTEXT_KEY, new SourceContext());
+}
+export function getSourceContext(): SourceContext {
+	return getContext(SOURCE_CONTEXT_KEY);
+}
+
+export function getLayerContext(): LayerContext {
+	return getContext(LAYER_CONTEXT_KEY);
+}
+
+export function setLayerContext(value: string) {
+	setContext(LAYER_CONTEXT_KEY, value);
+}