@swr-data-lab/components 1.12.5 → 1.13.1

package/src/maplibre/MapStyle/tokens.ts

@@ -1,21 +0,0 @@
-const tokens = {
-	sans_regular: ['SWR Sans Regular'],
-	sans_medium: ['SWR Sans Medium'],
-	sans_bold: ['SWR Sans Bold'],
-	background: 'hsl(0, 0%, 100%)',
-	water: 'hsl(210, 41%, 87%)',
-	water_light: 'hsl(210, 41%, 90%)',
-	marsh: 'hsl(200, 14%, 97%)',
-	grass: 'hsl(149, 37%, 97%)',
-	grass_dark: 'hsl(149, 37%, 93%)',
-	street_primary: 'hsl(0, 0%, 95%)',
-	street_primary_outline: 'hsla(0, 0%, 0%, 20%)',
-	street_secondary: 'hsl(0, 0%, 95%)',
-	street_secondary_outline: 'hsl(0, 0%, 50%)',
-	street_tertiary: 'hsl(0, 0%, 95%)',
-	street_tertiary_outline: 'hsl(0, 0%, 50%)',
-	label_primary: 'rgb(10, 10, 11)',
-	label_secondary: 'hsl(240, 2%, 20%)'
-};
-
-export default tokens;

package/src/maplibre/NavigationControl/NavigationControl.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import maplibre, { type ControlPosition } from 'maplibre-gl';
-	import MapControl from '../MapControl/MapControl.svelte';
-
-	interface NavigationControlProps {
-		showCompass?: boolean;
-		/**
-		 * Show 3d tilt in the compass control. Requires `showCompass` to be `true`
-		 */
-		visualizePitch?: boolean;
-		position?: ControlPosition;
-	}
-	const {
-		showCompass = false,
-		visualizePitch = false,
-		position = 'bottom-left'
-	}: NavigationControlProps = $props();
-</script>
-
-<MapControl control={new maplibre.NavigationControl({ showCompass, visualizePitch })} {position} />
-
-<style>
-	:global {
-		button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
-			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
-		}
-
-		button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
-			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
-		}
-
-		button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
-			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
-		}
-	}
-</style>

package/src/maplibre/ScaleControl/ScaleControl.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import maplibre, { type ControlPosition, type Unit } from 'maplibre-gl';
-	import MapControl from '../MapControl/MapControl.svelte';
-
-	interface ScaleControlProps {
-		maxWidth?: number | undefined;
-		position?: ControlPosition;
-		unit?: Unit;
-	}
-	let { maxWidth = 100, unit = 'metric', position = 'bottom-left' }: ScaleControlProps = $props();
-</script>
-
-<MapControl control={new maplibre.ScaleControl({ maxWidth, unit })} {position} />
-
-<style>
-	:global {
-		.maplibregl-ctrl-scale {
-			color: inherit;
-			border-bottom: 1px solid currentColor;
-			font-weight: 400;
-			font-size: var(--fs-small-3);
-			font-family: var(--swr-text);
-		}
-	}
-</style>

package/src/maplibre/Source/MapSource.stories.svelte

@@ -1,9 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import MapSource from './MapSource.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/MapSource',
-		component: MapSource
-	});
-</script>

package/src/maplibre/Source/MapSource.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { onDestroy, type Snippet } from 'svelte';
-	import { type Map, type SourceSpecification } from 'maplibre-gl';
-	import { getMapContext, createSourceContext } from '../context.svelte.js';
-
-	type Source = maplibregl.VectorTileSource;
-
-	interface MapSourceProps {
-		id: string;
-		sourceSpec: SourceSpecification;
-		source?: Source;
-		onLoad?: (map: Map, url?: string, data?: string) => undefined;
-		children?: Snippet;
-	}
-
-	let { id, sourceSpec, source = $bindable(), children }: MapSourceProps = $props();
-	let firstRun = true;
-
-	// Get map context
-	const { map, styleLoaded } = $derived(getMapContext());
-
-	// Create source context
-	const sourceContext = createSourceContext();
-
-	// 1. Add the source to the map using the spec, then get the
-	// actual source object back from the map instance
-	$effect(() => {
-		if (map && styleLoaded) {
-			// See: https://svelte.dev/docs/svelte/$state#$state.snapshot
-			map.addSource(id, $state.snapshot(sourceSpec) as SourceSpecification);
-			source = map.getSource(id);
-			firstRun = true;
-		}
-	});
-
-	// 2. Do extra stuff with the source object
-	$effect(() => {
-		if (source) {
-		}
-	});
-
-	$effect(() => {
-		source;
-		firstRun = false;
-	});
-
-	onDestroy(() => {
-		if (map && styleLoaded) {
-			const layers = map?.getStyle().layers;
-			layers
-				.filter((l) => l.type !== 'background' && l.source == id)
-				.forEach((l) => {
-					map?.removeLayer(l.id);
-				});
-			map.removeSource(id);
-			source = undefined;
-		}
-	});
-</script>
-
-{@render children?.()}

package/src/maplibre/Source/source.ts

@@ -1,89 +0,0 @@
-import type { Map, SourceSpecification } from 'maplibre-gl';
-import { tick } from 'svelte';
-
-/**
- * Add a source to the map.
- *
- * @param map - The map instance
- * @param sourceId - The ID of the source to add
- * @param source - The source specification object
- * @param okToAdd - Callback to check if the source should still be added
- * @param cb - Callback when the source has been added
- *
- * This properly handles the case where an old source with the same ID is still being removed.
- */
-export function addSource(
-	map: Map,
-	sourceId: string,
-	source: SourceSpecification,
-	okToAdd: (sourceId: string) => boolean,
-	cb: () => void
-) {
-	// If there was an old source with the same ID, then remove it. This can happen when removing a source and adding a new source in quick succession.
-	let removed = false;
-	if (map.getSource(sourceId)) {
-		removed = true;
-		map.removeSource(sourceId);
-	}
-
-	const doAddSource = () => {
-		if (!okToAdd(sourceId)) {
-			// in case the component was destroyed or the id changed while waiting to call this
-			return;
-		}
-
-		map.addSource(sourceId, source);
-		cb();
-	};
-
-	if (removed) {
-		// Source removal happens quickly but asynchronously, and we have no way to really interlock on when it happens, so just loop until it does.
-		const waitForRemoval = () => {
-			if (!sourceId) {
-				return;
-			}
-
-			if (map.getSource(sourceId)) {
-				// The source hasn't been removed yet, so keep waiting.
-				setTimeout(waitForRemoval, 1);
-			} else {
-				doAddSource();
-			}
-		};
-
-		waitForRemoval();
-	} else {
-		// If we don't have an existing source to remove (i.e. the normal case) then
-		// just add the source right away.
-		doAddSource();
-	}
-}
-
-/**
- * A helper function that removes a source from the map after all of the layers inside it have
- * had a chance to remove themselves.
- *
- * @param {Readable<Map|undefined>} mapStore - The store containing the Map instance
- * @param {string} sourceId - The ID of the source to remove
- * @param {unknown} sourceObj - The source object that was originally added
- *
- * Waits one tick to ensure layers have a chance to be removed, then checks if the
- * source with the given ID is still the same object as was originally added.
- *
- * If so, it removes the source from the map. This avoids removing a source that was
- * already replaced by another source reusing the same ID.
- */
-export function removeSource(map: Map, sourceId: string, sourceObj: unknown) {
-	tick().then(() => {
-		// Wait a tick so that the layers inside this source can all be removed.
-		// But make sure that the source wasn't already replaced with another source with the same ID.
-		if (!map.loaded()) {
-			return;
-		}
-
-		let remainingSource = map.getSource(sourceId);
-		if (remainingSource === sourceObj) {
-			map.removeSource(sourceId);
-		}
-	});
-}

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.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">
-	import type {
-		AddLayerObject,
-		FillLayoutProps,
-		FillPaintProps,
-		LineLayoutProps,
-		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;
-		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/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>