feat(SWRDataLabLight, SWRDataLabDark): optional admin boundaries

components/src/maplibre/MapStyle/SWRDataLabDark.ts

@@ -51,7 +51,6 @@ const tokens = {
 
 const { landuse } = makeLanduse(tokens);
 const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
-const { admin } = makeAdmin(tokens);
 const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens);
 const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
 const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
@@ -68,6 +67,8 @@ const style: styleFunction = (opts) => {
 		...opts
 	} as StyleOptions;
 
+	const { admin } = makeAdmin(tokens, options?.admin);
+
 	return {
 		version: 8,
 		name: 'swr-datalab-dark',

components/src/maplibre/MapStyle/SWRDataLabLight.mdx

@@ -94,9 +94,14 @@ interface StyleOptions {
   places?: {
     showLabels?: boolean
   }
+  admin?: {
+    show?: boolean | []AdminLevel
+  }
 }
 ```
 
+- `AdminLevel` is an integer representing an admin level; the relevant levels [for Germany](https://wiki.openstreetmap.org/wiki/Tag:boundary%3Dadministrative#Country_specific_values_of_the_key_admin_level=*) are country (`2`) and bundesland (`4`).
+
 ## Icons
 
 export const customIcons = ['pin-14', 'pin-14-dark'];

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

@@ -44,6 +44,26 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story asChild name="Hide admin boundaries + place labels">
+	<DesignTokens theme="light">
+		<div class="grid">
+			<div class="container">
+				<Map
+					showDebug
+					style={SWRDataLabLight({ admin: { show: false }, places: { showLabels: false } })}
+					initialLocation={{
+						lng: 9.0169,
+						lat: 48.0571,
+						zoom: 7.53393,
+						pitch: 0
+					}}
+				>
+					<AttributionControl position="bottom-left" />
+				</Map>
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
 <Story asChild name="fix/122">
 	<DesignTokens theme="light">
 		<div class="grid">

components/src/maplibre/MapStyle/SWRDataLabLight.ts

@@ -50,7 +50,6 @@ const tokens = {
 
 const { landuse } = makeLanduse(tokens);
 const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
-const { admin } = makeAdmin(tokens);
 const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens);
 const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
 const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
@@ -67,6 +66,8 @@ const style: styleFunction = (opts) => {
 		...opts
 	} as StyleOptions;
 
+	const { admin } = makeAdmin(tokens, options?.admin);
+
 	return {
 		version: 8,
 		name: 'swr-datalab-light',

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

@@ -1,6 +1,6 @@
 import { type Layer } from '../../types';
 
-export default function makeAdmin(tokens): any {
+export default function makeAdmin(tokens, options): any {
 	const admin: Layer[] = [
 		{
 			id: 'boundary-country:case',
@@ -134,18 +134,32 @@ export default function makeAdmin(tokens): any {
 				}
 			}
 		}
-	].map((el) => {
-		return {
-			source: 'versatiles-osm',
-			'source-layer': 'boundaries',
-			type: 'line',
-			...el,
-			layout: {
-				'line-cap': 'round',
-				'line-join': 'round'
+	]
+		.filter((el) => {
+			if (!options || options.show === true) {
+				return true;
+			} else if (options.show === false) {
+				return false;
+			} else {
+				return (
+					(el.id.includes('country') && options.show.includes(2)) ||
+					(el.id.includes('state') && options.show.includes(4))
+				);
 			}
-		} as Layer;
-	});
+			return false;
+		})
+		.map((el) => {
+			return {
+				source: 'versatiles-osm',
+				'source-layer': 'boundaries',
+				type: 'line',
+				...el,
+				layout: {
+					'line-cap': 'round',
+					'line-join': 'round'
+				}
+			} as Layer;
+		});
 
 	return { admin };
 }

components/src/maplibre/MapStyle/defaultOptions.ts

@@ -7,6 +7,9 @@ const opts: StyleOptions = {
 	},
 	roads: {
 		showLabels: true
+	},
+	admin: {
+		show: true
 	}
 };
 

components/src/maplibre/MapStyle/types.ts

@@ -1,9 +1,16 @@
+enum AdminLevel {
+	COUNTRY = 2,
+	BUNDESLAND = 4
+}
 interface StyleOptions {
 	enableBuildingExtrusions?: boolean;
 	enableHillshade?: boolean;
 	places?: {
 		showLabels?: boolean;
 	};
+	admin?: {
+		show?: boolean | AdminLevel[];
+	};
 	roads?: {
 		showLabels?: boolean;
 	};