@swr-data-lab/components 1.13.0 → 1.13.2

package/src/maplibre/Tooltip/Tooltip.svelte

@@ -1,183 +0,0 @@
-<script lang="ts">
-	import { onDestroy, type Snippet } from 'svelte';
-	import maplibre, { type Listener, type LngLatLike } from 'maplibre-gl';
-	import { getMapContext } from '../context.svelte.js';
-	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 maplibre.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.75em;
-		border-radius: 2px;
-		border: 1px solid rgba(0, 0, 0, 0.75);
-		border-radius: var(--br-small);
-		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 {
-			position: absolute;
-			top: 0.5em;
-			right: 0.5em;
-			cursor: pointer;
-			border-radius: 2px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding-bottom: 0.15em;
-			font-size: 1.25rem;
-			width: 1.1em;
-			height: 1.1em;
-			z-index: 100;
-			background: white;
-			border: 1px solid var(--gray-dark-5);
-		}
-
-		.maplibregl-popup-close-button:hover,
-		.maplibregl-popup-close-button:focus {
-			background: var(--gray-light-5);
-		}
-
-		.maplibregl-popup-tip {
-			width: 0.65rem;
-			height: 0.65rem;
-			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/VectorLayer/VectorLayer.stories.svelte

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

@@ -1,146 +0,0 @@
-<script lang="ts">
-	import type {
-		AddLayerObject,
-		FillLayoutProps,
-		FillPaintProps,
-		LineLayoutProps,
-		CircleLayoutProps,
-		CirclePaintProps,
-		SymbolPaintProps,
-		SymbolLayoutProps,
-		LinePaintProps,
-		MapGeoJSONFeature,
-		MapLayerMouseEvent
-	} from 'maplibre-gl';
-
-	import { getMapContext } from '../context.svelte.js';
-	import { onDestroy } from 'svelte';
-	import { resetLayerEventListener } from '../utils.js';
-
-	interface VectorLayerProps {
-		id: string;
-		sourceId: string;
-		sourceLayer: string;
-		type: 'line' | 'fill' | 'circle' | 'symbol';
-		placeBelow: string;
-		visible?: boolean;
-		minZoom?: number;
-		maxZoom?: number;
-		paint?: LinePaintProps | FillPaintProps | CirclePaintProps | SymbolPaintProps;
-		layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
-		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/VectorTileSource/VectorTileSource.stories.svelte

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

@@ -1,24 +0,0 @@
-<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/WithLinkLocation/WithLinkLocation.stories.svelte

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

@@ -1,83 +0,0 @@
-<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/context.svelte.ts

@@ -1,89 +0,0 @@
-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);
-}