@swr-data-lab/components 1.13.0 → 1.13.2

package/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -1,211 +0,0 @@
-<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 2px rgba(0, 0, 0, 0.075);
-		}
-
-		.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: 1.85em;
-			padding: 0 1.85em;
-			padding-top: 0.1em;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-		.maplibregl-ctrl-geocoder--input::placeholder {
-			opacity: 1;
-			color: var(--gray-dark-2);
-		}
-		.maplibregl-ctrl-geocoder--input:focus {
-			color: var(--gray-dark-5);
-			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/Map/FallbackStyle.ts

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

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

@@ -1,287 +0,0 @@
-<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.js';
-	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}
-		<pre class="debug">
-{Object.entries({ ...center, zoom, allowZoom, allowRotation })
-				.map(([key, val]) => `${key}: ${val}`)
-				.join('\n')}</pre>
-	{/if}
-</div>
-
-<style>
-	.container {
-		width: 100%;
-		height: 100%;
-	}
-
-	.debug {
-		position: absolute;
-		top: 0;
-		right: 0;
-		background: rgba(0, 0, 0, 0.9);
-		color: white;
-		z-index: 1000;
-		padding: 2px;
-		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: white;
-			border: 1px solid rgba(0, 0, 0, 0.75);
-			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
-			border-radius: var(--br-small);
-			overflow: hidden;
-		}
-
-		.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.5;
-		}
-
-		.maplibregl-ctrl button:not(:disabled):hover {
-			background-color: var(--gray-light-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/MapControl/MapControl.stories.svelte

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