From 75df460311bbed301a9a28bde7da59515cc34ffc Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 21 Jul 2025 19:57:31 +0200
Subject: [PATCH 1/6] Block out 3d buildings

---
 components/src/maplibre/Map/Map.svelte        |  18 ++-
 .../src/maplibre/MapStyle/SWRDataLabLight.mdx |   3 +-
 .../MapStyle/SWRDataLabLight.stories.svelte   |  25 +++-
 .../src/maplibre/MapStyle/SWRDataLabLight.ts  | 127 +++++++++++-------
 .../maplibre/MapStyle/components/Buildings.ts |  44 +++---
 components/src/maplibre/MapStyle/tokens.ts    |   3 +-
 components/src/maplibre/types.ts              |  12 +-
 7 files changed, 161 insertions(+), 71 deletions(-)

diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index a6c92c6c..c5b7557f 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -20,6 +20,7 @@
 		projection?: ProjectionSpecification;
 		showDebug?: boolean;
 		options?: any;
+		enableBuildingExtrusions?: boolean;
 		children?: Snippet;
 	}
 
@@ -38,11 +39,22 @@
 		allowRotation = false,
 		allowZoom = true,
 		showDebug = false,
-		initialLocation = { lat: 51.3, lng: 10.2, zoom: 5 }
+		enableBuildingExtrusions = false,
+		initialLocation: receivedInitialLocation
 	}: MapProps = $props();
 
 	let container: HTMLElement;
 
+	// Merge initial location with default object so individual
+	// properties (like pitch) can be omitted by the caller
+	let initialLocation = {
+		lat: 51.3,
+		lng: 10.2,
+		zoom: 5,
+		pitch: 0,
+		...receivedInitialLocation
+	};
+
 	const mapContext = createMapContext();
 	if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
 		initialLocation = getContext('initialLocation');
@@ -54,11 +66,11 @@
 			style,
 			minZoom,
 			maxZoom,
-			pitch,
 			bearing,
 			attributionControl: false, // Added via component
 			center: [initialLocation.lng, initialLocation.lat],
 			zoom: initialLocation.zoom,
+			pitch: initialLocation.pitch,
 			...options
 		});
 
@@ -107,7 +119,7 @@
 	{/if}
 	{#if showDebug}
 		<pre class="debug">
-{Object.entries({ ...center, zoom, allowZoom, allowRotation })
+{Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation })
 				.map(([key, val]) => `${key}: ${val}`)
 				.join('\n')}</pre>
 	{/if}
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
index 5e50951a..0236ad73 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
@@ -12,8 +12,9 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
 
 - Data sources
   - Vector data: [versatiles-osm](https://download.versatiles.org/) in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org`
+  - Building footprints with heights: [basemap-de](https://basemap.de/produkte-und-dienste/web-vektor/) vector tiles served from `sgx.geodatenzentrum.de`
   - Typefaces: SWR Sans served from `https://static.datenhub.net/maps/fonts/`.
-- Layer count: {SWRDataLabLight.layers.length}
+- Layer count: {SWRDataLabLight({enableBuildingExtrusions: true}).layers.length} (including building extrusions)
 
 <Story of={MapStyleStories.Default} />
 
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte
index 60848f94..256b001e 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte
@@ -17,7 +17,7 @@
 		<div class="grid">
 			<div class="container">
 				<Map
-					style={SWRDataLabLight}
+					style={SWRDataLabLight()}
 					initialLocation={{ lng: 8.239451072800875, lat: 48.75692609731408, zoom: 14.99 }}
 				>
 					<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
@@ -27,6 +27,29 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story asChild name="Building Extrusions">
+	<DesignTokens>
+		<div class="grid">
+			<div class="container">
+				<Map
+					showDebug
+					style={SWRDataLabLight({ enableBuildingExtrusions: true })}
+					enableBuildingExtrusions
+					maxZoom={20}
+					initialLocation={{
+						lng: 9.180503103314436,
+						lat: 48.77521391139953,
+						zoom: 16,
+						pitch: 45
+					}}
+				>
+					<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+					<AttributionControl position="bottom-left" />
+				</Map>
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
 
 <style>
 	.grid {
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
index 87b1ecca..b350aed5 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
@@ -1,4 +1,4 @@
-import type { StyleSpecification } from 'maplibre-gl';
+import type { Style, StyleSpecification } from 'maplibre-gl';
 
 import makeAdmin from './components/Admin';
 import makeBuildings from './components/Buildings';
@@ -8,7 +8,7 @@ import makePlaceLabels from './components/PlaceLabels';
 import makeWalking from './components/Walking';
 import makeRoads from './components/Roads';
 
-const { buildings } = makeBuildings();
+const { buildingFootprints, buildingExtrusions } = makeBuildings();
 const { landuse } = makeLanduse();
 const { placeLabels } = makePlaceLabels();
 const { admin } = makeAdmin();
@@ -16,57 +16,90 @@ 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,
+interface StyleOptions {
+	enableBuildingExtrusions?: boolean;
+}
 
-		// 2. Buildings
-		...buildings,
+interface styleFunction {
+	(options?: StyleOptions): StyleSpecification;
+}
 
-		// 3. Tunnels
-		...walkingTunnels,
-		...roadTunnels,
-		...transitTunnels,
+const style: styleFunction = (opts) => {
+	const options = {
+		enableBuildingExtrusions: false,
+		...opts
+	} as StyleOptions;
 
-		// 4. Surface ways
-		...walkingSurface,
-		...roadSurface,
-		...transitSurface,
+	return {
+		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
+			},
+			...(options.enableBuildingExtrusions && {
+				'basemap-de': {
+					attribution: 'GeoBasis-DE',
+					type: 'vector',
+					bounds: [5.8, 47.2, 15.1, 55.1],
+					maxzoom: 15,
+					minzoom: 0,
+					scheme: 'xyz',
+					tiles: [
+						'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v2/bm_web_de_3857/{z}/{x}/{y}.pbf'
+					]
+				}
+			})
+		},
+		sky: {
+			'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
+		},
+		light: { anchor: 'viewport', color: 'white', intensity: 0.15 },
+		layers: [
+			// 1. Landuse
+			...landuse,
+			...airports,
 
-		// 5. Bridges ways
-		...walkingBridges,
-		...roadBridges,
-		...transitBridges,
+			// 2. Buildings
+			buildingFootprints,
 
-		// 6. Admin boundaries
-		...admin,
+			// 3. Tunnels
+			...walkingTunnels,
+			...roadTunnels,
+			...transitTunnels,
 
-		// 7. Labels
-		...walkingLabels,
-		...roadLabels,
-		...placeLabels
-	]
+			// 4. Surface ways
+			...walkingSurface,
+			...roadSurface,
+			...transitSurface,
+
+			// 5. Bridges ways
+			...walkingBridges,
+			...roadBridges,
+			...transitBridges,
+
+			// 6. Admin boundaries
+			...admin,
+
+			// 7. Labels
+			...walkingLabels,
+			...roadLabels,
+
+			// Extrusions
+			...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
+
+			...placeLabels
+		]
+	};
 };
 
 export default style;
diff --git a/components/src/maplibre/MapStyle/components/Buildings.ts b/components/src/maplibre/MapStyle/components/Buildings.ts
index 8b3f8078..cfcfddfb 100644
--- a/components/src/maplibre/MapStyle/components/Buildings.ts
+++ b/components/src/maplibre/MapStyle/components/Buildings.ts
@@ -1,23 +1,35 @@
 import { type Layer } from '../../types';
+import tokens from '../tokens';
 
 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]
-					]
-				}
+	const buildingFootprints: Layer = {
+		id: 'building-footprints',
+		type: 'fill',
+		source: 'versatiles-osm',
+		'source-layer': 'buildings',
+		paint: {
+			'fill-color': tokens.building,
+			'fill-opacity': {
+				stops: [
+					[14, 0],
+					[15, 1]
+				]
 			}
 		}
-	];
+	};
+	const buildingExtrusions: Layer = {
+		id: 'building-extrusions',
+		source: 'basemap-de',
+		'source-layer': 'Gebaeudeflaeche',
+		type: 'fill-extrusion',
+		minzoom: 14,
+		maxzoom: 20,
+		paint: {
+			'fill-extrusion-color': tokens.building,
+			'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
+			'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
+		}
+	};
 
-	return { buildings };
+	return { buildingFootprints, buildingExtrusions };
 }
diff --git a/components/src/maplibre/MapStyle/tokens.ts b/components/src/maplibre/MapStyle/tokens.ts
index 207e6d95..eb309670 100644
--- a/components/src/maplibre/MapStyle/tokens.ts
+++ b/components/src/maplibre/MapStyle/tokens.ts
@@ -15,7 +15,8 @@ const tokens = {
 	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%)'
+	label_secondary: 'hsl(240, 2%, 20%)',
+	building: '#ecebeb'
 };
 
 export default tokens;
diff --git a/components/src/maplibre/types.ts b/components/src/maplibre/types.ts
index 7bd5efab..c52e9237 100644
--- a/components/src/maplibre/types.ts
+++ b/components/src/maplibre/types.ts
@@ -1,6 +1,13 @@
-import type { FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
+import type {
+	FillExtrusionLayerSpecification,
+	FillLayerSpecification,
+	LineLayerSpecification
+} from 'maplibre-gl';
 
-export type Layer = LineLayerSpecification | FillLayerSpecification;
+export type Layer =
+	| LineLayerSpecification
+	| FillLayerSpecification
+	| FillExtrusionLayerSpecification;
 export type GeocodingService = 'maptiler';
 export type GeocodingCountry = 'de' | 'at';
 export type GeocodingLanguage = 'de' | 'en';
@@ -9,4 +16,5 @@ export interface Location {
 	lat: number;
 	lng: number;
 	zoom: number;
+	pitch?: number;
 }

From e5f064f2f84ee04cea46a8a970412e4275c38403 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 21 Jul 2025 20:11:54 +0200
Subject: [PATCH 2/6] Change object reference to function call

---
 .../AttributionControl/AttributionControl.stories.svelte    | 2 +-
 .../maplibre/GeocoderControl/GeocoderControl.stories.svelte | 6 +++---
 components/src/maplibre/Maplibre.mdx                        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/src/maplibre/AttributionControl/AttributionControl.stories.svelte b/components/src/maplibre/AttributionControl/AttributionControl.stories.svelte
index f474f8b4..7dd19dd8 100644
--- a/components/src/maplibre/AttributionControl/AttributionControl.stories.svelte
+++ b/components/src/maplibre/AttributionControl/AttributionControl.stories.svelte
@@ -14,7 +14,7 @@
 <Story asChild name="Default">
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 4b1fee48..dd08e38f 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -33,7 +33,7 @@
 >
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</div>
@@ -58,7 +58,7 @@
 >
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl
 					placeholder="My placeholder text"
 					languages="de"
@@ -73,7 +73,7 @@
 <Story asChild name="Long input">
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl
 					placeholder="This is an input with a very long placeholder text"
 					languages="de"
diff --git a/components/src/maplibre/Maplibre.mdx b/components/src/maplibre/Maplibre.mdx
index dee8c30c..06889000 100644
--- a/components/src/maplibre/Maplibre.mdx
+++ b/components/src/maplibre/Maplibre.mdx
@@ -33,7 +33,7 @@ This example initialises a map using the SWRDataLabLight style, adds an addition
 
 <DesignTokens>
   <div class='container'>
-    <Map style={SWRDataLabLight}>
+    <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}'>

From 61636cf03d3ff926d668c52a7a31194055f8a24c Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 21 Jul 2025 20:15:16 +0200
Subject: [PATCH 3/6] Change more object references to function calls

---
 components/src/maplibre/Map/Map.stories.svelte                | 4 ++--
 components/src/maplibre/MapControl/MapControl.stories.svelte  | 2 +-
 .../NavigationControl/NavigationControl.stories.svelte        | 4 ++--
 .../src/maplibre/ScaleControl/ScaleControl.stories.svelte     | 4 ++--
 components/src/maplibre/Tooltip/Tooltip.stories.svelte        | 4 ++--
 .../src/maplibre/VectorLayer/VectorLayer.stories.svelte       | 2 +-
 .../maplibre/VectorTileSource/VectorTileSource.stories.svelte | 2 +-
 .../maplibre/WithLinkLocation/WithLinkLocation.stories.svelte | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index b35bca28..12be5e7d 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -65,7 +65,7 @@
 >
 	<div class="container">
 		<DesignTokens>
-			<Map style={SWRDataLabLight}>
+			<Map style={SWRDataLabLight()}>
 				<ScaleControl />
 				<AttributionControl />
 				<NavigationControl showCompass visualizePitch />
@@ -79,7 +79,7 @@
 	<div class="container dark">
 		<DesignTokens>
 			<Map
-				style={SWRDataLabLight}
+				style={SWRDataLabLight()}
 				showDebug
 				projection={{ type: 'globe' }}
 				pitch={52}
diff --git a/components/src/maplibre/MapControl/MapControl.stories.svelte b/components/src/maplibre/MapControl/MapControl.stories.svelte
index dd223829..6c6aefad 100644
--- a/components/src/maplibre/MapControl/MapControl.stories.svelte
+++ b/components/src/maplibre/MapControl/MapControl.stories.svelte
@@ -24,7 +24,7 @@
 	});
 
 	const themes: ThemeMap = {
-		'SWRDL Light': SWRDataLabLight,
+		'SWRDL Light': SWRDataLabLight(),
 		Eclipse: eclipseStyle
 	};
 
diff --git a/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte b/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
index e6cab33d..d1615ef5 100644
--- a/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
+++ b/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
@@ -14,7 +14,7 @@
 <Story asChild name="Default">
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<NavigationControl />
 			</Map>
 		</div>
@@ -24,7 +24,7 @@
 <Story asChild name="With compass">
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<NavigationControl showCompass visualizePitch />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/ScaleControl/ScaleControl.stories.svelte b/components/src/maplibre/ScaleControl/ScaleControl.stories.svelte
index e10fc6b8..cac2f68f 100644
--- a/components/src/maplibre/ScaleControl/ScaleControl.stories.svelte
+++ b/components/src/maplibre/ScaleControl/ScaleControl.stories.svelte
@@ -31,7 +31,7 @@
 >
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<ScaleControl />
 			</Map>
 		</div>
@@ -56,7 +56,7 @@
 >
 	<DesignTokens>
 		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<ScaleControl unit="imperial" />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/Tooltip/Tooltip.stories.svelte b/components/src/maplibre/Tooltip/Tooltip.stories.svelte
index 0240c8ec..f7d0a531 100644
--- a/components/src/maplibre/Tooltip/Tooltip.stories.svelte
+++ b/components/src/maplibre/Tooltip/Tooltip.stories.svelte
@@ -27,7 +27,7 @@
 	<DesignTokens>
 		<div class="container">
 			<Map
-				style={SWRDataLabLight}
+				style={SWRDataLabLight()}
 				initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
 				allowZoom={false}
 			>
@@ -99,7 +99,7 @@
 	<DesignTokens>
 		<div class="container">
 			<Map
-				style={SWRDataLabLight}
+				style={SWRDataLabLight()}
 				initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
 				allowZoom={false}
 			>
diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index 184b3226..bf3104ee 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
@@ -17,7 +17,7 @@
 <Story asChild name="Default">
 	<DesignTokens>
 		<div class="container">
-			<Map showDebug={true} style={SWRDataLabLight}>
+			<Map showDebug={true} 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}`}
diff --git a/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte b/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte
index 0ba9476a..b36a3c6c 100644
--- a/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte
+++ b/components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte
@@ -16,7 +16,7 @@
 <Story asChild name="Default">
 	<DesignTokens>
 		<div class="container">
-			<Map showDebug={true} style={SWRDataLabLight}>
+			<Map showDebug={true} 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}`}
diff --git a/components/src/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte b/components/src/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte
index 7a0bc95b..945b7bb6 100644
--- a/components/src/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte
+++ b/components/src/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte
@@ -15,7 +15,7 @@
 	<DesignTokens>
 		<div class="container">
 			<WithLinkLocation countries="de" languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA">
-				<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}></Map>
+				<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}></Map>
 			</WithLinkLocation>
 		</div>
 	</DesignTokens>

From d89c58bd5e4b51abfc563d0e36a53b9301e55aa5 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 22 Jul 2025 12:01:41 +0200
Subject: [PATCH 4/6] Add structure extrusions

---
 .../src/maplibre/MapStyle/SWRDataLabLight.ts  | 10 +++---
 .../maplibre/MapStyle/components/Buildings.ts | 36 ++++++++++++-------
 components/src/maplibre/MapStyle/tokens.ts    |  2 +-
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
index b350aed5..34ff0728 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
@@ -8,7 +8,7 @@ import makePlaceLabels from './components/PlaceLabels';
 import makeWalking from './components/Walking';
 import makeRoads from './components/Roads';
 
-const { buildingFootprints, buildingExtrusions } = makeBuildings();
+const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings();
 const { landuse } = makeLanduse();
 const { placeLabels } = makePlaceLabels();
 const { admin } = makeAdmin();
@@ -63,14 +63,15 @@ const style: styleFunction = (opts) => {
 		sky: {
 			'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
 		},
-		light: { anchor: 'viewport', color: 'white', intensity: 0.15 },
+		light: { anchor: 'viewport', color: 'white', intensity: 0.175 },
 		layers: [
 			// 1. Landuse
 			...landuse,
 			...airports,
 
-			// 2. Buildings
+			// 2. Building footprints + Structures (ie. bridges)
 			buildingFootprints,
+			...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
 
 			// 3. Tunnels
 			...walkingTunnels,
@@ -94,9 +95,10 @@ const style: styleFunction = (opts) => {
 			...walkingLabels,
 			...roadLabels,
 
-			// Extrusions
+			// 8. Building extrusions
 			...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
 
+			// 8. Point labels
 			...placeLabels
 		]
 	};
diff --git a/components/src/maplibre/MapStyle/components/Buildings.ts b/components/src/maplibre/MapStyle/components/Buildings.ts
index cfcfddfb..557a2487 100644
--- a/components/src/maplibre/MapStyle/components/Buildings.ts
+++ b/components/src/maplibre/MapStyle/components/Buildings.ts
@@ -1,6 +1,18 @@
 import { type Layer } from '../../types';
 import tokens from '../tokens';
 
+const extrusionLayer = {
+	source: 'basemap-de',
+	type: 'fill-extrusion',
+	minzoom: 14,
+	maxzoom: 20,
+	paint: {
+		'fill-extrusion-color': tokens.building,
+		'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
+		'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
+	}
+};
+
 export default function makeBuildings(): any {
 	const buildingFootprints: Layer = {
 		id: 'building-footprints',
@@ -17,19 +29,17 @@ export default function makeBuildings(): any {
 			}
 		}
 	};
-	const buildingExtrusions: Layer = {
-		id: 'building-extrusions',
-		source: 'basemap-de',
+	const structureExtrusions = {
+		id: 'building-extrusions-structures',
+		'source-layer': 'Bauwerksflaeche',
+		...extrusionLayer
+	} as Layer;
+
+	const buildingExtrusions = {
+		id: 'building-extrusions-buildings',
 		'source-layer': 'Gebaeudeflaeche',
-		type: 'fill-extrusion',
-		minzoom: 14,
-		maxzoom: 20,
-		paint: {
-			'fill-extrusion-color': tokens.building,
-			'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
-			'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
-		}
-	};
+		...extrusionLayer
+	} as Layer;
 
-	return { buildingFootprints, buildingExtrusions };
+	return { buildingFootprints, buildingExtrusions, structureExtrusions };
 }
diff --git a/components/src/maplibre/MapStyle/tokens.ts b/components/src/maplibre/MapStyle/tokens.ts
index eb309670..c2904419 100644
--- a/components/src/maplibre/MapStyle/tokens.ts
+++ b/components/src/maplibre/MapStyle/tokens.ts
@@ -16,7 +16,7 @@ const tokens = {
 	street_tertiary_outline: 'hsl(0, 0%, 50%)',
 	label_primary: 'rgb(10, 10, 11)',
 	label_secondary: 'hsl(240, 2%, 20%)',
-	building: '#ecebeb'
+	building: '#f3f2f1'
 };
 
 export default tokens;

From 71487ae17c7b6e398369f0d11dedc8d5072a3c13 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 22 Jul 2025 12:11:40 +0200
Subject: [PATCH 5/6] Don't render double building footprints

---
 components/src/maplibre/MapStyle/SWRDataLabLight.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
index 34ff0728..fb6aea6d 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
@@ -1,4 +1,4 @@
-import type { Style, StyleSpecification } from 'maplibre-gl';
+import type { StyleSpecification } from 'maplibre-gl';
 
 import makeAdmin from './components/Admin';
 import makeBuildings from './components/Buildings';
@@ -70,7 +70,7 @@ const style: styleFunction = (opts) => {
 			...airports,
 
 			// 2. Building footprints + Structures (ie. bridges)
-			buildingFootprints,
+			...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
 			...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
 
 			// 3. Tunnels

From 031b050b476b8a7b67aca62f0dbe9009fe9611bc Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 22 Jul 2025 15:48:52 +0200
Subject: [PATCH 6/6] Iterate docs

---
 components/src/maplibre/Map/Map.svelte        |  2 --
 .../src/maplibre/MapStyle/SWRDataLabLight.mdx | 25 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index c5b7557f..d5c1389c 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -20,7 +20,6 @@
 		projection?: ProjectionSpecification;
 		showDebug?: boolean;
 		options?: any;
-		enableBuildingExtrusions?: boolean;
 		children?: Snippet;
 	}
 
@@ -39,7 +38,6 @@
 		allowRotation = false,
 		allowZoom = true,
 		showDebug = false,
-		enableBuildingExtrusions = false,
 		initialLocation: receivedInitialLocation
 	}: MapProps = $props();
 
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
index 0236ad73..946f44e6 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
@@ -20,7 +20,30 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
 
 <br />
 
-### Design Notes
+## Usage
+
+Call `SWRDataLabLight()` to construct a style document and pass the result to the `<Map>` component's `style` prop.
+
+```jsx
+<script>
+  import {
+    Map,
+    SWRDataLabLight,
+  } from '@swr-data-lab/components';
+</script>
+
+<Map style={SWRDataLabLight()}>...</Map>
+```
+
+`SWRDataLabLight()` takes an optional `options` parameter of the following shape:
+
+```ts
+interface StyleOptions {
+	enableBuildingExtrusions?: boolean;
+}
+```
+
+## Design Notes
 
 We take a two-step design approach: