@swr-data-lab/components 1.11.2 → 1.12.0

package/src/maplibre/MapControl/MapControl.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import { type ControlPosition, type IControl } from 'maplibre-gl';
+	import { getMapContext } from '../context.svelte.ts';
+
+	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/MapControl/index.js

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

package/src/maplibre/MapStyle/SWRDataLabLight.mdx

@@ -0,0 +1,86 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+import Mermaid from '../../../.storybook/blocks/Mermaid';
+import SWRDataLabLight from './SWRDataLabLight';
+import * as MapStyleStories from './SWRDataLabLight.stories.svelte';
+
+<Meta of={MapStyleStories} />
+
+# SWR Data Lab Light
+
+Light-themed general-purpose basemap using SWR colours and typefaces based on
+[versatiles-greybeard](https://github.com/versatiles-org/versatiles-style).
+
+- Data sources
+  - Vector data: [versatiles-osm](https://download.versatiles.org/) in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org`
+  - Typefaces: SWR Sans served from `https://static.datenhub.net/maps/fonts/`.
+- Layer count: {SWRDataLabLight.layers.length}
+
+<Story of={MapStyleStories.Default} />
+
+<br />
+
+### Design Notes
+
+We take a two-step design approach:
+
+1. Sort the geographic data we want to present into semantic groups like "Admin Boundaries", "Roads" or "Transit" (inspired by Mapbox's [Style Components](https://docs.mapbox.com/studio-manual/guides/components/)).
+2. Derive physical layers (ie. `MapLayerSpecification`) from these groups and interleave them to produce a convincing image
+3. Use shared design tokens to style each physical layer
+
+<Mermaid chart={`
+block-beta
+columns 10
+
+classDef admin fill:#e5dbf5;
+classDef buildings fill:#FFBA35;
+classDef roads fill:#FFD584;
+classDef transit fill:#C5F0B1;
+classDef walking fill:#65D62B;
+classDef landuse fill:#eee;
+
+block:semantic:6
+columns 1
+columns 1
+s_admin["Admin"]
+s_buildings["Buildings"]
+s_roads["Roads"]
+s_transit["Transit"]
+s_walking["Walking + Cycling"]
+s_landuse["Landuse"]
+end
+
+block:actual:10
+columns 1
+a_admin_labels["Admin Labels"]
+a_walking_labels["Walking (Labels)"]
+a_transit_labels["Transit (Labels)"]
+a_roads_labels["Roads (Labels)"]
+a_admin0["Admin 0 (Countries)"]
+a_admin1["Admin 1 (States/Provinces)"]
+a_admin2["Admin 2 (Districts)"]
+a_buildings["Buildings"]
+a_walking_bridge["Walking (Bridge)"]
+a_transit_bridge["Transit (Bridge)"]
+a_roads_bridge["Roads (Bridge)"]
+a_walking_surface["Walking (Surface)"]
+a_transit_surface["Transit (Surface)"]
+a_roads_surface["Roads (Surface)"]
+a_walking_tunnel["Walking (Tunnel)"]
+a_transit_tunnel["Transit (Tunnel)"]
+a_roads_tunnel["Roads (Tunnel)"]
+a_land["Land"]
+a_ocean["Ocean"]
+a_background["Background"]
+end
+
+class s_admin,a_admin0,a_admin1,a_admin2,a_admin_labels admin
+class s_buildings,a_buildings buildings
+class s_roads,a_roads_bridge,a_roads_surface,a_roads_tunnel,a_roads_labels roads
+class s_transit,a_transit_bridge,a_transit_surface,a_transit_tunnel,a_transit_labels transit
+class s_walking,a_walking_bridge,a_walking_surface,a_walking_tunnel,a_walking_labels walking
+class s_landuse,a_land,a_ocean,a_background landuse
+`}/>
+
+### References
+
+- [Foundational Map Design | BUILD with Mapbox ](https://www.youtube.com/watch?v=QDfj9oGVZmE)

package/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte

@@ -0,0 +1,41 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Map from '../Map/Map.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+	import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
+
+	import { SWRDataLabLight } from './index';
+	const { Story } = defineMeta({
+		title: 'Maplibre/Style/SWR Data Lab Light',
+		component: Map
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="grid">
+			<div class="container">
+				<Map
+					style={SWRDataLabLight}
+					initialLocation={{ lng: 8.239451072800875, lat: 48.75692609731408, zoom: 14.99 }}
+				>
+					<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+					<AttributionControl position="bottom-left" />
+				</Map>
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+		grid-template-rows: auto;
+		height: 700px;
+	}
+	.container {
+		overflow: hidden;
+	}
+</style>

package/src/maplibre/MapStyle/SWRDataLabLight.ts

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

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

@@ -0,0 +1,23 @@
+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 };
+}