@swr-data-lab/components 1.13.0 → 1.13.2

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

@@ -1,39 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import NavigationControl from './NavigationControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-	import Map from '../Map/Map.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Control/NavigationControl',
-		component: NavigationControl
-	});
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<NavigationControl />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<Story asChild name="With compass">
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<NavigationControl showCompass visualizePitch />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 200px;
-	}
-</style>

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

@@ -1,71 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
-	import ScaleControl from './ScaleControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import Map from '../Map/Map.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Control/ScaleControl',
-		component: ScaleControl
-	});
-</script>
-
-<Story
-	asChild
-	name="Default"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-		await step('Scale control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toBeTruthy();
-		});
-		await step('Distance is rendered in metric units', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toHaveTextContent('100 m');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<ScaleControl />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<Story
-	asChild
-	name="Imperial units"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-		await step('Scale control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toBeTruthy();
-		});
-		await step('Distance is rendered in imperial units', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toHaveTextContent('300 ft');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<ScaleControl unit="imperial" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 200px;
-	}
-</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.stories.svelte

@@ -1,192 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import type { LngLatLike, MapGeoJSONFeature } from 'maplibre-gl';
-
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import Map from '../Map/Map.svelte';
-	import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
-	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
-	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-	import Tooltip from './Tooltip.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Extras/Tooltip',
-		component: Tooltip
-	});
-
-	let hovered = $state() as MapGeoJSONFeature | undefined;
-	let hovered2 = $state() as MapGeoJSONFeature | undefined;
-	let hoverCoords = $state([0, 0]) as LngLatLike;
-
-	let selected = $state() as MapGeoJSONFeature | undefined;
-	let selectCoords = $state([0, 0]) as LngLatLike;
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="container">
-			<Map
-				style={SWRDataLabLight}
-				initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
-				allowZoom={false}
-			>
-				<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"
-					onmousemove={(e) => {
-						hovered = e.features?.[0];
-						hoverCoords = e.lngLat;
-					}}
-					onmouseleave={() => (hovered = undefined)}
-					paint={{
-						'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#ffcfcc', 1.3, '#FF4D20']
-					}}
-				/>
-				<VectorLayer
-					{hovered}
-					sourceId="ev-infra-source"
-					sourceLayer="coverage"
-					id="ev-infra-outline"
-					placeBelow="label-place-city"
-					type="line"
-					layout={{
-						'line-join': 'round'
-					}}
-					paint={{
-						'line-width': [
-							'case',
-							['any', ['boolean', ['feature-state', 'hovered'], false]],
-							1.5,
-							0.5
-						],
-						'line-color': [
-							'case',
-							['any', ['boolean', ['feature-state', 'hovered'], false]],
-							'#000',
-							'#555'
-						],
-						'line-opacity': 1
-					}}
-				/>
-
-				{#if hovered}
-					<Tooltip
-						position={hoverCoords}
-						mouseEvents={false}
-						showCloseButton={false}
-						closeOnClick={false}
-					>
-						<pre>{Object.entries(hovered.properties)
-								.map(([key, val]) => `${key}: ${val}`)
-								.join('\n')}</pre>
-					</Tooltip>
-				{/if}
-				<AttributionControl position="bottom-left" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<Story asChild name="Show on Click">
-	<DesignTokens>
-		<div class="container">
-			<Map
-				style={SWRDataLabLight}
-				initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
-				allowZoom={false}
-			>
-				<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"
-					onmousemove={(e) => {
-						hovered2 = e.features?.[0];
-					}}
-					onclick={(e) => {
-						selected = e.features?.[0];
-						selectCoords = e.lngLat;
-					}}
-					onmouseleave={() => (hovered2 = undefined)}
-					paint={{
-						'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#CCDCFF', 1.3, '#6280E5']
-					}}
-				/>
-				<VectorLayer
-					hovered={hovered2}
-					{selected}
-					sourceId="ev-infra-source"
-					sourceLayer="coverage"
-					id="ev-infra-outline"
-					placeBelow="label-place-city"
-					type="line"
-					layout={{
-						'line-join': 'round'
-					}}
-					paint={{
-						'line-width': [
-							'case',
-							[
-								'any',
-								['boolean', ['feature-state', 'hovered'], false],
-								['boolean', ['feature-state', 'selected'], false]
-							],
-							2,
-							0.5
-						],
-						'line-color': [
-							'case',
-							[
-								'any',
-								['boolean', ['feature-state', 'hovered'], false],
-								['boolean', ['feature-state', 'selected'], false]
-							],
-							'#000',
-							'#555'
-						],
-						'line-opacity': 1
-					}}
-				/>
-				{#if selected}
-					<Tooltip
-						position={selectCoords}
-						mouseEvents={true}
-						showCloseButton={true}
-						onClose={() => {
-							selected = undefined;
-						}}
-					>
-						<pre class="padRight">{Object.entries(selected.properties)
-								.map(([key, val]) => `${key}: ${val}`)
-								.join('\n')}</pre>
-					</Tooltip>
-				{/if}
-				<AttributionControl position="bottom-left" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 100%;
-		height: 600px;
-	}
-
-	.padRight {
-		padding-right: 2.5em;
-	}
-</style>