@swr-data-lab/components 1.12.5 → 1.13.1

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>

package/src/maplibre/MapControl/MapControl.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { type Snippet } from 'svelte';
-	import { type ControlPosition, type IControl } from 'maplibre-gl';
-	import { getMapContext } from '../context.svelte.js';
-
-	interface MapControlProps {
-		position: ControlPosition;
-		control?: IControl;
-		className?: string;
-		children?: Snippet;
-	}
-
-	let { position, control, className, children }: MapControlProps = $props();
-	let el: HTMLDivElement | undefined = $state();
-
-	const { map } = $derived(getMapContext());
-
-	let ctrl = $derived.by(() => {
-		return control
-			? control
-			: {
-					onAdd: () => el!,
-					onRemove: () => el?.parentNode?.removeChild(el)
-				};
-	});
-
-	$effect(() => {
-		if (map && ctrl) {
-			map.addControl(ctrl, position);
-		}
-		return () => {
-			map?.removeControl(control);
-		};
-	});
-</script>
-
-<div bind:this={el} class={`maplibregl-ctrl ${className}`}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>

package/src/maplibre/MapStyle/SWRDataLabLight.ts

@@ -1,72 +0,0 @@
-import type { StyleSpecification } from 'maplibre-gl';
-
-import makeAdmin from './components/Admin';
-import makeBuildings from './components/Buildings';
-import makeLanduse from './components/Landuse';
-import makeTransit from './components/Transit';
-import makePlaceLabels from './components/PlaceLabels';
-import makeWalking from './components/Walking';
-import makeRoads from './components/Roads';
-
-const { buildings } = makeBuildings();
-const { landuse } = makeLanduse();
-const { placeLabels } = makePlaceLabels();
-const { admin } = makeAdmin();
-const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit();
-const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking();
-const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads();
-
-const style: StyleSpecification = {
-	version: 8,
-	name: 'swr-datalab-light',
-	metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
-	glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
-	sources: {
-		'versatiles-osm': {
-			attribution:
-				'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-			tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
-			bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
-			type: 'vector',
-			scheme: 'xyz',
-			minzoom: 0,
-			maxzoom: 14
-		}
-	},
-	sky: {
-		'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
-	},
-	layers: [
-		// 1. Landuse
-		...landuse,
-		...airports,
-
-		// 2. Buildings
-		...buildings,
-
-		// 3. Tunnels
-		...walkingTunnels,
-		...roadTunnels,
-		...transitTunnels,
-
-		// 4. Surface ways
-		...walkingSurface,
-		...roadSurface,
-		...transitSurface,
-
-		// 5. Bridges ways
-		...walkingBridges,
-		...roadBridges,
-		...transitBridges,
-
-		// 6. Admin boundaries
-		...admin,
-
-		// 7. Labels
-		...walkingLabels,
-		...roadLabels,
-		...placeLabels
-	]
-};
-
-export default style;

package/src/maplibre/MapStyle/components/Admin.ts

@@ -1,173 +0,0 @@
-import tokens from '../tokens';
-import { type Layer } from '../../types';
-
-export default function makeAdmin(): any {
-	const admin: Layer[] = [
-		{
-			id: 'boundary-country:outline',
-			filter: [
-				'all',
-				['==', 'admin_level', 2],
-				['!=', 'maritime', true],
-				['!=', 'disputed', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-color': tokens.background,
-				'line-blur': 1,
-				'line-width': {
-					stops: [
-						[2, 0],
-						[3, 2],
-						[10, 8]
-					]
-				},
-				'line-opacity': 0.75
-			},
-			layout: {
-				'line-cap': 'round',
-				'line-join': 'round'
-			}
-		},
-		{
-			id: 'boundary-country-disputed:outline',
-			filter: [
-				'all',
-				['==', 'admin_level', 2],
-				['==', 'disputed', true],
-				['!=', 'maritime', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-width': {
-					stops: [
-						[2, 0],
-						[3, 2],
-						[10, 8]
-					]
-				},
-				'line-opacity': 0.75,
-				'line-color': tokens.background
-			}
-		},
-		{
-			id: 'boundary-state:outline',
-			filter: [
-				'all',
-				['==', 'admin_level', 4],
-				['!=', 'maritime', true],
-				['!=', 'disputed', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-color': tokens.background,
-				'line-blur': 1,
-				'line-width': {
-					stops: [
-						[7, 0],
-						[8, 2],
-						[10, 4]
-					]
-				},
-				'line-opacity': 0.75
-			},
-			layout: {
-				'line-cap': 'round',
-				'line-join': 'round'
-			}
-		},
-		{
-			id: 'boundary-country',
-			filter: [
-				'all',
-				['==', 'admin_level', 2],
-				['!=', 'maritime', true],
-				['!=', 'disputed', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-color': {
-					stops: [
-						[7, '#cecdcd'],
-						[10, 'black']
-					]
-				},
-
-				'line-width': {
-					stops: [
-						[2, 0],
-						[5, 1],
-						[8, 1],
-						[12, 3]
-					]
-				}
-			},
-			layout: {
-				'line-cap': 'round',
-				'line-join': 'round'
-			}
-		},
-		{
-			id: 'boundary-country-disputed',
-			filter: [
-				'all',
-				['==', 'admin_level', 2],
-				['==', 'disputed', true],
-				['!=', 'maritime', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-width': {
-					stops: [
-						[2, 0],
-						[3, 1],
-						[10, 4]
-					]
-				},
-				'line-color': 'hsl(246,0%,77%)',
-				'line-dasharray': [2, 1]
-			},
-			layout: {
-				'line-cap': 'square'
-			}
-		},
-		{
-			id: 'boundary-state',
-			filter: [
-				'all',
-				['==', 'admin_level', 4],
-				['!=', 'maritime', true],
-				['!=', 'disputed', true],
-				['!=', 'coastline', true]
-			],
-			paint: {
-				'line-color': 'hsl(37, 34%, 79%)',
-				'line-width': {
-					stops: [
-						[7, 1],
-						[8, 1.5]
-					]
-				},
-				'line-opacity': {
-					stops: [
-						[7, 0],
-						[8, 1]
-					]
-				}
-			},
-			layout: {
-				'line-cap': 'round',
-				'line-join': 'round'
-			}
-		}
-	].map((el) => {
-		return {
-			source: 'versatiles-osm',
-			'source-layer': 'boundaries',
-			type: 'line',
-			...el
-		} as Layer;
-	});
-
-	return { admin };
-}

package/src/maplibre/MapStyle/components/Buildings.ts

@@ -1,23 +0,0 @@
-import { type Layer } from '../../types';
-
-export default function makeBuildings(): any {
-	const buildings: Layer[] = [
-		{
-			id: 'building-fill',
-			type: 'fill',
-			source: 'versatiles-osm',
-			'source-layer': 'buildings',
-			paint: {
-				'fill-color': 'hsl(240, 4%, 95%)',
-				'fill-opacity': {
-					stops: [
-						[14, 0],
-						[15, 1]
-					]
-				}
-			}
-		}
-	];
-
-	return { buildings };
-}