@swr-data-lab/components 1.11.3 → 1.12.0

package/src/maplibre/MapStyle/index.js

@@ -0,0 +1,2 @@
+import SWRDataLabLight from './SWRDataLabLight';
+export { SWRDataLabLight };

package/src/maplibre/MapStyle/tokens.ts

@@ -0,0 +1,21 @@
+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/Maplibre.mdx

@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+import * as MapStories from './Map/Map.stories.svelte';
+import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte';
+
+<Meta title="Maplibre" />
+
+# Maplibre
+
+Lightweight svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack.
+
+Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
+
+<Story of={MapStyleStories.Default} />
+
+<br />
+
+## Usage
+
+This example initialises a map using the SWRDataLabLight style, adds an additional vector tile source and renders it as a vector layer.
+
+```jsx
+<script>
+  import {
+    Map,
+    VectorLayer,
+    AttributionControl,
+    VectorTileSource,
+    SWRDataLabLight,
+    DesignTokens
+  } from '@swr-data-lab/components';
+</script>
+
+<DesignTokens>
+  <div class='container'>
+    <Map 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}'>
+      </VectorTileSource>
+      <VectorLayer
+        sourceId='ev-infra-source'
+        sourceLayer='coverage'
+        id='ev-infra-outline'
+        type='line'
+        paint={{'line-width': 1, 'line-color': 'red'}}>
+      </VectorLayer>
+      <AttributionControl />
+    </Map>
+  </div>
+</DesignTokens>
+
+<style>
+  .container {
+    width: 100%;
+    height: 600px;
+  }
+</style>
+```
+
+## Available components
+
+### Sources
+
+- **[VectorTileSource](?path=/docs/maplibre-source-vectortilesource--docs)**: Loads a vector tile source supplied by a tileserver
+
+### Layers
+
+- **[VectorLayer](?path=/docs/maplibre-layer-vectorlayer--docs)**: Renders a layer from a vector tile source.
+
+### Controls
+
+- **[ScaleControl](?path=/docs/maplibre-control-scalecontrol--docs)**: Renders a dynamic scalebar
+- **[NavigationControl](?path=/docs/maplibre-control-navigationcontrol--docs)**: Renders zoom buttons and optional compass
+- **[GeocoderControl](?path=/docs/maplibre-control-geocodercontrol--docs)**: Renders a search input using [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) and any supported forward geocoding service (currently [maptiler](https://www.maptiler.com/) only)
+- **[AttributionControl](?path=/docs/maplibre-control-attributioncontrol--docs)**: Renders maplibre's default attribution control
+- **[Custom controls](?path=/docs/maplibre-control-mapcontrol--docs)**: Renders arbitrary HTML inside maplibre's layout
+
+### Misc
+
+- **[Tooltip](?path=/docs/maplibre-extras-tooltip--docs)**
+- **[WithLinkLocation](?path=/docs/maplibre-extras-withlinklocation--docs)**: Derive the maps `initialLocation` from a URL parameter via forward geocoding
+
+### Styles
+
+- **[SWR Data Lab Light](?path=/docs/maplibre-style-swr-data-lab-light--docs)**: Light-themed basemap using SWR colours and typefaces
+- Any valid MapLibre style specification, such as [versatiles-style](https://github.com/versatiles-org/versatiles-style) (see [demo](?path=/story/map-map--alternate-style))
+
+## Known issues
+
+- Firefox throws warning `WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads`: Known [upstream mapligre-gl issue](https://github.com/maplibre/maplibre-gl-js/issues/2030) (safe to ignore)

package/src/maplibre/NavigationControl/NavigationControl.stories.svelte

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { type ControlPosition, NavigationControl } 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 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/NavigationControl/index.js

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

package/src/maplibre/ScaleControl/ScaleControl.stories.svelte

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

@@ -0,0 +1,25 @@
+<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/ScaleControl/index.js

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

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

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import { type Map, type SourceSpecification } from 'maplibre-gl';
+	import { getMapContext, createSourceContext } from '../context.svelte.ts';
+
+	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/index.js

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

package/src/maplibre/Source/source.ts

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

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