feat(SWRDataLabLight,SWRDataLabDark): Optional road label density

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

@@ -290,7 +290,31 @@
 					showDebug
 					style={SWRDataLabDark()}
 					maxZoom={20}
-					initialLocation={{lng: 9.558006092459436, lat: 47.69445218974644, zoom: 15.664592047703644}}
+					initialLocation={{
+						lng: 9.558006092459436,
+						lat: 47.69445218974644,
+						zoom: 15.664592047703644
+					}}
+				>
+					<AttributionControl position="bottom-left" />
+				</Map>
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
+<Story asChild name="feat/459">
+	<DesignTokens theme="dark">
+		<div class="grid">
+			<div class="container">
+				<Map
+					showDebug
+					style={SWRDataLabDark()}
+					maxZoom={20}
+					initialLocation={{
+						lng: 9.168427169271467,
+						lat: 47.668888671750324,
+						zoom: 14.798741203087438
+					}}
 				>
 					<AttributionControl position="bottom-left" />
 				</Map>

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

@@ -1,6 +1,6 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 
-export default function makeAdmin(tokens, options): any {
+export default function makeAdmin(tokens: styleTokens, options): any {
 	const admin: Layer[] = [
 		{
 			id: 'boundary-country:case',

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

@@ -1,15 +1,23 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 
-export default function makeBuildings(tokens): any {
+export default function makeBuildings(tokens: styleTokens): any {
 	const extrusionLayer = {
 		source: 'basemap-de',
 		type: 'fill-extrusion',
 		minzoom: 14,
-    maxzoom: 20,
+		maxzoom: 20,
 		paint: {
 			'fill-extrusion-color': tokens.building,
 			'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 15.5, 0, 16, 1],
-			'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15.5, 0, 16, ["to-number", ['get', 'hoehe']]]
+			'fill-extrusion-height': [
+				'interpolate',
+				['linear'],
+				['zoom'],
+				15.5,
+				0,
+				16,
+				['to-number', ['get', 'hoehe']]
+			]
 		}
 	};
 

components/src/maplibre/MapStyle/components/Hillshade.ts

@@ -1,6 +1,6 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 
-export default function makeHillshade(tokens): any {
+export default function makeHillshade(tokens: styleTokens): any {
 	const hillshade: Layer[] = [
 		{
 			id: 'hillshade-light',

components/src/maplibre/MapStyle/components/Landuse.ts

@@ -1,6 +1,6 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 
-export default function makeLanduse(tokens): any {
+export default function makeLanduse(tokens: styleTokens): any {
 	const landuse: Layer[] = [
 		{
 			id: 'background',

components/src/maplibre/MapStyle/components/PlaceLabels.ts

@@ -1,4 +1,5 @@
 import type { SymbolLayerSpecification } from 'maplibre-gl';
+import type { styleTokens } from '../../types';
 
 // Hand-authored list of place labes we want to show at low zoom levels
 // Ideally majorCities  would include Frankfurt and Leipzig, but they're not
@@ -11,7 +12,7 @@ const majorCities = ['Berlin', 'Stuttgart', 'München', 'Frankfurt', 'Hamburg',
 // values for "city" and anything below.
 // See: https://github.com/versatiles-org/shortbread-tilemaker/blob/69e5d4c586a1d2726b746a24829bfb05d4dbeb91/process.lua#L198-L242
 
-export default function makePlaceLabels(tokens) {
+export default function makePlaceLabels(tokens: styleTokens) {
 	const placeLabels: SymbolLayerSpecification[] = [
 		{
 			id: 'label-place-quarter',
@@ -41,10 +42,12 @@ export default function makePlaceLabels(tokens) {
 			layout: {
 				'text-size': {
 					stops: [
-						[11, 14],
-						[15, 16]
+						[14, 12],
+						[16, 17]
 					]
-				}
+				},
+				'text-letter-spacing': 0.1,
+				'text-transform': 'uppercase'
 			},
 			paint: {
 				'text-color': tokens.label_secondary
@@ -63,7 +66,7 @@ export default function makePlaceLabels(tokens) {
 				'text-size': {
 					stops: [
 						[10, 14],
-						[12, 15]
+						[12, 16]
 					]
 				}
 			}
@@ -79,11 +82,13 @@ export default function makePlaceLabels(tokens) {
 				['!in', 'name', ...majorCities]
 			],
 			minzoom: 8.5,
+			maxzoom: 13,
+
 			layout: {
 				'text-size': {
 					stops: [
 						[8, 14],
-						[12, 16]
+						[12, 18]
 					]
 				}
 			}
@@ -184,11 +189,7 @@ export default function makePlaceLabels(tokens) {
 	const boundaryLabels = [
 		{
 			id: 'label-boundary-country',
-			filter: [
-				'all',
-				['==', 'admin_level', 2],
-				['!in', 'name', 'Jersey', 'Guernsey', 'Insel Man']
-			],
+			filter: ['all', ['==', 'admin_level', 2], ['!in', 'name', 'Jersey', 'Guernsey', 'Insel Man']],
 			minzoom: 4,
 			maxzoom: 8,
 			layout: {

components/src/maplibre/MapStyle/components/Roads.ts

@@ -1,4 +1,4 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 import type { SymbolLayerSpecification } from 'maplibre-gl';
 
 const street_layout = {
@@ -10,7 +10,7 @@ const case_layout = {
 	'line-cap': 'butt'
 };
 
-export default function makeRoads(tokens) {
+export default function makeRoads(tokens: styleTokens) {
 	const motorway = {
 		line_color: {
 			stops: [
@@ -198,22 +198,37 @@ export default function makeRoads(tokens) {
 	const roadLabels: SymbolLayerSpecification[] = [
 		{
 			id: 'label-street-misc',
-			filter: ['in', 'kind', 'residential', 'livingstreet', 'unclassified'],
-			minzoom: 15,
+			filter: [
+				'in',
+				'kind',
+				'residential',
+				'pedestrian',
+				'livingstreet',
+				'living_street',
+				'unclassified',
+				'footway'
+			],
+			minzoom: 14,
 			layout: {
+				'text-letter-spacing': 0.02,
+				'text-overlap': 'cooperative',
 				'text-size': {
 					stops: [
 						[12, 10],
-						[15, 13]
+						[15, 12]
 					]
 				}
+			},
+			paint: {
+				'text-color': tokens.label_tertiary
 			}
 		},
 		{
 			id: 'label-street-tertiary',
 			filter: ['==', 'kind', 'tertiary'],
-			minzoom: 15,
+			minzoom: 14,
 			layout: {
+				'text-overlap': 'cooperative',
 				'text-size': {
 					stops: [
 						[12, 10],
@@ -227,27 +242,29 @@ export default function makeRoads(tokens) {
 			filter: ['==', 'kind', 'secondary'],
 			minzoom: 14,
 			layout: {
-				'text-letter-spacing': 0.025,
+				'text-letter-spacing': 0.01,
 				'text-size': {
 					stops: [
 						[12, 10],
 						[15, 14]
 					]
 				}
-			}
+			},
+			'text-overlap': 'always'
 		},
 		{
 			id: 'label-street-primary',
 			filter: ['==', 'kind', 'primary'],
 			minzoom: 14,
 			layout: {
-				'text-letter-spacing': 0.025,
+				'text-letter-spacing': 0.01,
 				'text-size': {
 					stops: [
 						[12, 10],
 						[15, 14]
 					]
-				}
+				},
+				'text-overlap': 'always'
 			},
 			paint: {
 				'text-color': tokens.label_primary
@@ -258,6 +275,8 @@ export default function makeRoads(tokens) {
 			filter: ['==', 'kind', 'trunk'],
 			minzoom: 13,
 			layout: {
+				'text-overlap': 'always',
+				'text-offset': [0, 4],
 				'text-size': {
 					stops: [
 						[12, 10],
@@ -279,16 +298,16 @@ export default function makeRoads(tokens) {
 				'text-field': '{name}',
 				'text-font': tokens.sans_regular,
 				'symbol-placement': 'line',
-				'text-anchor': 'center',
+				'text-variable-anchor': ['center', 'left', 'right'],
 				...el.layout
 			},
 			paint: {
 				'text-color': tokens.label_secondary,
 				'text-halo-color': tokens.background,
-				'text-halo-width': 1.5,
+				'text-halo-width': 1,
 				...el.paint
 			}
-		} as SymbolLayerSpecification;
+		};
 	});
 
 	const roadBridges: Layer[] = [
@@ -1258,16 +1277,11 @@ export default function makeRoads(tokens) {
 			layout: street_layout
 		},
 		{
-			id: 'street-livingstreet',
-			filter: [
-				'all',
-				['==', 'kind', 'living_street'],
-				['!=', 'bridge', true],
-				['!=', 'tunnel', true]
-			],
+			id: 'street-footway',
+			filter: ['all', ['in', 'kind', 'footway'], ['!=', 'bridge', true], ['!=', 'tunnel', true]],
 			paint: {
 				'line-color': street_residential.line_color,
-				'line-width': street_residential.line_width,
+				'line-width': 2,
 				'line-opacity': street_residential.line_opacity
 			},
 			layout: street_layout
@@ -1276,7 +1290,7 @@ export default function makeRoads(tokens) {
 			id: 'street-residential',
 			filter: [
 				'all',
-				['==', 'kind', 'residential'],
+				['in', 'kind', 'residential', 'livingstreet'],
 				['!=', 'bridge', true],
 				['!=', 'tunnel', true]
 			],

components/src/maplibre/MapStyle/components/Transit.ts

@@ -1,6 +1,6 @@
-import type { Layer } from '../../types';
+import type { Layer, styleTokens } from '../../types';
 
-export default function makeTransit(tokens) {
+export default function makeTransit(tokens: styleTokens) {
 	const rail = {
 		line_color: tokens.rail,
 		line_dasharray: [2, 2],

components/src/maplibre/MapStyle/components/Walking.ts

@@ -1,12 +1,12 @@
-import { type Layer } from '../../types';
+import { type Layer, type styleTokens } from '../../types';
 import type { SymbolLayerSpecification } from 'maplibre-gl';
 
 const street_layout = {
 	'line-join': 'round',
 	'line-cap': 'butt'
 };
 
-export default function makeWalking(tokens): any {
+export default function makeWalking(tokens: styleTokens): any {
 	const street_residential = {
 		line_color: tokens.street_tertiary,
 		line_width: {

components/src/maplibre/types.ts

@@ -52,3 +52,5 @@ export interface SourceProps {
 	attribution?: string;
 	children?: Snippet;
 }
+
+export type styleTokens = Record<string, string>;