@swr-data-lab/components 1.11.2 → 1.12.0

package/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import maplibre from 'maplibre-gl';
+	import MaplibreGeocoder, { type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
+	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
+	import MapControl from '../MapControl/MapControl.svelte';
+	import { type GeocodingCountry, type GeocodingLanguage, type GeocodingService } from '../types';
+
+	interface GeocoderControlProps {
+		service: GeocodingService;
+		/**
+		 * API key for selected geocoding `service`
+		 */
+		key: string;
+		/**
+		 * Maximum number of suggestions to display
+		 */
+		limit?: number;
+		/**
+		 * Limit search to one or more countries
+		 */
+		countries?: GeocodingCountry | GeocodingCountry[];
+		/**
+		 * Limit search to one or more languages. The UI is localised to the first language specified if [available](https://github.com/maplibre/maplibre-gl-geocoder/blob/main/lib/localization.ts).
+		 */
+		languages?: GeocodingLanguage | GeocodingLanguage[];
+		/**
+		 * Overwrite the default input placeholder text
+		 */
+		placeholder?: string;
+	}
+
+	const {
+		key,
+		service = 'maptiler',
+		countries = 'de',
+		languages = 'en',
+		placeholder,
+		limit = 3
+	}: GeocoderControlProps = $props();
+
+	const countriesArr = Array.isArray(countries) ? countries : [countries];
+	const languagesArr = Array.isArray(languages) ? languages : [languages];
+
+	// Future: initialise a different GeocoderAPI depending on "service"
+	let geocoderAPI: MaplibreGeocoderApi = new MaptilerGeocoderAPI(key);
+
+	const geocoder = new MaplibreGeocoder(geocoderAPI, {
+		maplibregl: maplibre,
+		language: languagesArr.join(','),
+		countries: countriesArr.join(','),
+		showResultsWhileTyping: true,
+		showResultMarkers: false,
+		placeholder,
+		limit
+	});
+</script>
+
+<MapControl control={geocoder} position="top-left" />
+
+<style>
+	:global {
+		.maplibregl-ctrl-geocoder {
+			background-color: #fff;
+			position: relative;
+			width: 100%;
+			z-index: 1;
+			font-family: var(--swr-sans);
+			font-size: var(--fs-small-1);
+			border-radius: var(--br-small);
+			border: 1px solid rgba(0, 0, 0, 0.75);
+			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+		}
+
+		.maplibre-gl-geocoder--error {
+			font-size: var(--fs-small-2);
+			color: var(--gray-dark-2);
+			padding: 0.4em 0.65em;
+		}
+
+		.maplibregl-ctrl-geocoder--input {
+			width: 100%;
+			height: 100%;
+			font-family: inherit;
+			font-size: inherit;
+			background-color: transparent;
+			color: var(--gray-dark-5);
+			border: 0;
+			height: 2em;
+			padding: 0 1.85em;
+			padding-top: 0.1em;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+		.maplibregl-ctrl-geocoder--input:focus {
+			color: rgba(0, 0, 0, 0.75);
+			outline: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
+			display: none;
+			position: absolute;
+			z-index: 2;
+			right: 0.5em;
+			top: 50%;
+			transform: translateY(-50%);
+			border: 0;
+		}
+
+		/* Suggestions */
+		.maplibregl-ctrl-geocoder .suggestions {
+			background: white;
+			border: 1px solid rgba(0, 0, 0, 0.75);
+			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+			border-radius: var(--br-small);
+			left: 0;
+			list-style: none;
+			position: absolute;
+			width: 100%;
+			top: calc(100% + 0.5em);
+			z-index: 1000;
+			overflow: hidden;
+		}
+
+		.maplibregl-ctrl-bottom-left .suggestions,
+		.maplibregl-ctrl-bottom-right .suggestions {
+			top: auto;
+			bottom: 100%;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > li > a {
+			cursor: default;
+			display: block;
+			padding: 0.5em 0.75em;
+			color: var(--gray-dark-5);
+			padding-bottom: 0.5em;
+			border-bottom: 1px solid var(--gray-light-3);
+		}
+		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
+			border-bottom: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > .active > a,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
+			background: var(--gray-light-5);
+			text-decoration: none;
+			cursor: pointer;
+		}
+		.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
+			text-decoration: underline;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-info {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-match {
+			font-weight: bold;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-title,
+		.maplibregl-ctrl-geocoder--suggestion-address,
+		.maplibregl-ctrl-geocoder--result-address {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		.maplibregl-ctrl-geocoder--result-icon {
+			display: none;
+		}
+		.maplibregl-ctrl-geocoder--result-title {
+			font-weight: 600;
+			letter-spacing: 0;
+		}
+		.maplibregl-ctrl-geocoder--result-address {
+			font-size: var(--fs-small-2);
+			color: var(--gray-dark-2);
+			line-height: 1.3;
+		}
+
+		.maplibregl-ctrl-geocoder--icon {
+			display: inline-block;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			height: 1em;
+		}
+
+		.maplibregl-ctrl-geocoder--icon-close {
+			right: 0;
+		}
+		.maplibregl-ctrl-geocoder--icon-search {
+			left: 0.5em;
+			height: 1.5em;
+		}
+	}
+</style>

package/src/maplibre/GeocoderControl/index.js

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

package/src/maplibre/Map/FallbackStyle.ts

@@ -0,0 +1,18 @@
+import type { StyleSpecification } from 'maplibre-gl';
+
+const style: StyleSpecification = {
+	version: 8,
+	name: 'default',
+	sources: {},
+	layers: [
+		{
+			id: 'background',
+			type: 'background',
+			paint: {
+				'background-color': 'lightgray'
+			}
+		}
+	]
+};
+
+export default style;

package/src/maplibre/Map/Map.stories.svelte

@@ -0,0 +1,118 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { within, expect } from 'storybook/test';
+
+	import Map from './Map.svelte';
+	import ScaleControl from '../ScaleControl/ScaleControl.svelte';
+	import NavigationControl from '../NavigationControl/NavigationControl.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+	import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
+
+	import { SWRDataLabLight } from '../MapStyle';
+
+	import { eclipse } from '@versatiles/style';
+	const alternateStyle = eclipse({
+		language: 'de',
+		baseUrl: 'https://tiles.versatiles.org',
+		glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
+	});
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Map',
+		component: Map
+	});
+</script>
+
+<Story
+	asChild
+	name="Default"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const containerEl = canvas.getByTestId('map-container');
+
+		await step('Map canvas renders', async () => {
+			const mapEl = containerEl.querySelector('.maplibregl-canvas');
+			expect(mapEl).toBeTruthy();
+		});
+		await step('Scale control renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
+			expect(el).toBeTruthy();
+		});
+		await step('Scale renders expected value', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
+			expect(el).toHaveTextContent('100 km');
+		});
+		await step('Navigation control renders', async () => {
+			const zoomInEl = containerEl.querySelector('.maplibregl-ctrl-zoom-in');
+			const zoomOutEl = containerEl.querySelector('.maplibregl-ctrl-zoom-out');
+			expect(zoomInEl).toBeTruthy();
+			expect(zoomInEl).toHaveRole('button');
+			expect(zoomOutEl).toBeTruthy();
+			expect(zoomOutEl).toHaveRole('button');
+		});
+
+		await step('Attribution control renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-attrib');
+			expect(el).toBeTruthy();
+		});
+
+		await step('Geocoder control renders', async () => {
+			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
+			expect(el).toBeTruthy();
+		});
+	}}
+>
+	<div class="container">
+		<DesignTokens>
+			<Map style={SWRDataLabLight}>
+				<ScaleControl />
+				<AttributionControl />
+				<NavigationControl showCompass visualizePitch />
+				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
+
+<Story asChild name="Globe Projection">
+	<div class="container dark">
+		<DesignTokens>
+			<Map
+				style={SWRDataLabLight}
+				showDebug
+				projection={{ type: 'globe' }}
+				pitch={52}
+				initialLocation={{ lat: 51.3, lng: 10.2, zoom: 3.5 }}
+			>
+				<ScaleControl />
+				<AttributionControl />
+				<NavigationControl showCompass visualizePitch />
+				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
+
+<Story asChild name="Alternate Style">
+	<div class="container dark">
+		<DesignTokens>
+			<Map style={alternateStyle}>
+				<ScaleControl />
+				<AttributionControl />
+				<NavigationControl showCompass visualizePitch />
+				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
+
+<style>
+	.container {
+		width: 100%;
+		height: 600px;
+	}
+	.dark {
+		color: rgb(230, 230, 230);
+	}
+</style>

package/src/maplibre/Map/Map.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import maplibre, { type ProjectionSpecification, type StyleSpecification } from 'maplibre-gl';
+	import { onMount, onDestroy, type Snippet, getContext, hasContext } from 'svelte';
+	import { createMapContext } from '../context.svelte';
+	import { type Location } from '../types';
+	import FallbackStyle from './FallbackStyle';
+
+	interface MapProps {
+		style?: StyleSpecification | string;
+		initialLocation?: Location;
+		allowRotation?: boolean;
+		allowZoom?: boolean;
+		minZoom?: number;
+		maxZoom?: number;
+		zoom?: number;
+		center?: maplibre.LngLat;
+		pitch?: number;
+		bearing?: number;
+		loading?: boolean;
+		projection?: ProjectionSpecification;
+		showDebug?: boolean;
+		options?: any;
+		children?: Snippet;
+	}
+
+	let {
+		children,
+		options,
+		style = FallbackStyle,
+		minZoom = 0,
+		maxZoom = 14.99,
+		zoom = $bindable(),
+		center = $bindable(),
+		pitch = $bindable(0),
+		bearing = $bindable(0),
+		loading = $bindable(true),
+		projection = { type: 'mercator' },
+		allowRotation = false,
+		allowZoom = true,
+		showDebug = false,
+		initialLocation = { lat: 51.3, lng: 10.2, zoom: 5 }
+	}: MapProps = $props();
+
+	let container: HTMLElement;
+
+	const mapContext = createMapContext();
+	if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
+		initialLocation = getContext('initialLocation');
+	}
+
+	onMount(() => {
+		mapContext.map = new maplibre.Map({
+			container,
+			style,
+			minZoom,
+			maxZoom,
+			pitch,
+			bearing,
+			attributionControl: false, // Added via component
+			center: [initialLocation.lng, initialLocation.lat],
+			zoom: initialLocation.zoom,
+			...options
+		});
+
+		mapContext.map.on('load', () => {
+			zoom = mapContext.map?.getZoom();
+			center = mapContext.map?.getCenter();
+			pitch = mapContext.map?.getPitch();
+			bearing = mapContext.map?.getBearing();
+		});
+
+		mapContext.map.on('moveend', () => {
+			zoom = mapContext.map?.getZoom();
+			center = mapContext.map?.getCenter();
+			pitch = mapContext.map?.getPitch();
+			bearing = mapContext.map?.getBearing();
+		});
+	});
+
+	onDestroy(async () => {
+		if (mapContext.map) mapContext.map.remove();
+	});
+
+	$effect(() => {
+		if (mapContext.map) mapContext.map.setStyle(style);
+	});
+	$effect(() => {
+		if (mapContext.styleLoaded) {
+			mapContext.map?.setProjection(projection);
+		}
+	});
+
+	$effect(() => {
+		if (allowZoom === false) {
+			mapContext.map?.scrollZoom.disable();
+		} else {
+			mapContext.map?.scrollZoom.enable();
+		}
+	});
+</script>
+
+<div bind:this={container} class="container" data-testid="map-container">
+	{#if mapContext.map}
+		{#if children}
+			{@render children()}
+		{/if}
+	{/if}
+	{#if showDebug}
+		<div class="debug">
+			{JSON.stringify({ ...center, zoom, allowZoom, allowRotation })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+
+	.debug {
+		position: absolute;
+		top: 0;
+		right: 0;
+		background: black;
+		color: white;
+		z-index: 1000;
+		font-family: monospace;
+	}
+	:global {
+		.maplibregl-map {
+			overflow: hidden;
+			position: relative;
+		}
+
+		.maplibregl-canvas {
+			left: 0;
+			position: absolute;
+			top: 0;
+		}
+
+		.maplibregl-map:fullscreen {
+			height: 100%;
+			width: 100%;
+		}
+
+		.maplibregl-canvas-container.maplibregl-interactive {
+			cursor: grab;
+			user-select: none;
+		}
+
+		.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
+			cursor: pointer;
+		}
+
+		.maplibregl-canvas-container.maplibregl-interactive:active {
+			cursor: grabbing;
+		}
+
+		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
+		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
+			touch-action: pan-x pan-y;
+		}
+
+		.maplibregl-canvas-container.maplibregl-touch-drag-pan,
+		.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
+			touch-action: pinch-zoom;
+		}
+
+		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
+		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan
+			.maplibregl-canvas {
+			touch-action: none;
+		}
+		.maplibregl-ctrl-bottom-left,
+		.maplibregl-ctrl-bottom-right,
+		.maplibregl-ctrl-top-left,
+		.maplibregl-ctrl-top-right {
+			position: absolute;
+			z-index: 2;
+			display: flex;
+			flex-flow: column;
+			gap: 0.75em;
+			align-items: flex-start;
+		}
+
+		.maplibregl-ctrl-top-left {
+			left: 0.5em;
+			top: 0.5em;
+		}
+
+		.maplibregl-ctrl-top-right {
+			right: 0;
+			top: 0;
+		}
+
+		.maplibregl-ctrl-bottom-left {
+			bottom: 0.5em;
+			left: 0.5em;
+		}
+
+		.maplibregl-ctrl-bottom-right {
+			bottom: 0.5em;
+			right: 0.5em;
+		}
+
+		.maplibregl-ctrl {
+			pointer-events: auto;
+			transform: translate(0);
+		}
+
+		.maplibregl-ctrl-group {
+			background: #fff;
+			border-radius: var(--br-small);
+			border: 1px solid var(--violet-dark-5);
+		}
+
+		.maplibregl-ctrl-group button {
+			background-color: transparent;
+			border: 0;
+			box-sizing: border-box;
+			cursor: pointer;
+			display: block;
+			height: 29px;
+			outline: none;
+			padding: 0;
+			width: 29px;
+		}
+
+		.maplibregl-ctrl-group button + button {
+			border-top: 1px solid rgba(0, 0, 0, 0.35);
+		}
+
+		.maplibregl-ctrl button .maplibregl-ctrl-icon {
+			background-position: 50%;
+			background-repeat: no-repeat;
+			display: block;
+			height: 100%;
+			width: 100%;
+		}
+
+		.maplibregl-ctrl button:disabled {
+			cursor: not-allowed;
+		}
+
+		.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
+			opacity: 0.25;
+		}
+
+		.maplibregl-ctrl button:not(:disabled):hover {
+			background-color: rgb(0 0 0/5%);
+		}
+
+		.maplibregl-ctrl-group button:focus:focus-visible {
+			box-shadow: 0 0 2px 2px #0096ff;
+		}
+
+		.maplibregl-ctrl-group button:focus:not(:focus-visible) {
+			box-shadow: none;
+		}
+
+		.maplibregl-ctrl-group button:focus:first-child {
+			border-radius: 4px 4px 0 0;
+		}
+
+		.maplibregl-ctrl-group button:focus:last-child {
+			border-radius: 0 0 4px 4px;
+		}
+
+		.maplibregl-ctrl-group button:focus:only-child {
+			border-radius: inherit;
+		}
+		.maplibregl-marker {
+			left: 0;
+			top: 0;
+			position: absolute;
+			will-change: transform;
+		}
+		.maplibregl-marker path {
+			fill: var(--violet-dark-5);
+		}
+	}
+</style>

package/src/maplibre/Map/index.js

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

package/src/maplibre/MapControl/MapControl.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+import * as MapControlStories from './MapControl.stories.svelte';
+
+<Meta of={MapControlStories} />
+
+# MapControl
+
+Base component used by all other built-in control components. Also useful for building application-specific controls (see demo below).
+
+<Stories />
+<Controls />

package/src/maplibre/MapControl/MapControl.stories.svelte

@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import MapControl from './MapControl.svelte';
+	import { SWRDataLabLight } from '../MapStyle';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import Switcher from '../../Switcher/Switcher.svelte';
+	import Map from '../Map/Map.svelte';
+
+	type ThemeMap = {
+		[key: string]: StyleSpecification;
+	};
+
+	import { eclipse } from '@versatiles/style';
+	import type { StyleSpecification } from 'maplibre-gl';
+	const eclipseStyle = eclipse({
+		language: 'de',
+		baseUrl: 'https://tiles.versatiles.org',
+		glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
+	});
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Control/MapControl',
+		component: MapControl
+	});
+
+	const themes: ThemeMap = {
+		'SWRDL Light': SWRDataLabLight,
+		Eclipse: eclipseStyle
+	};
+
+	let currentTheme = $state('SWRDL Light');
+</script>
+
+<Story asChild name="Custom HTML Control">
+	<DesignTokens>
+		<div class="container">
+			<Map style={themes[currentTheme]} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<MapControl position="top-left">
+					<Switcher
+						options={Object.keys(themes)}
+						bind:value={currentTheme}
+						label="Select theme"
+						size="small"
+					/>
+				</MapControl>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>