@swr-data-lab/components 1.11.2 → 1.12.0

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

@@ -0,0 +1,499 @@
+import tokens from '../tokens';
+import { type Layer } from '../../types';
+
+export default function makeLanduse(): any {
+	const landuse: Layer[] = [
+		{
+			id: 'background',
+			type: 'background',
+			paint: {
+				'background-color': tokens.background
+			}
+		},
+		{
+			id: 'water-ocean',
+			type: 'fill',
+			'source-layer': 'ocean',
+			paint: {
+				'fill-color': 'hsl(219, 56%, 93%)'
+			}
+		},
+		{
+			id: 'land-glacier',
+			type: 'fill',
+			'source-layer': 'water_polygons',
+			filter: ['all', ['==', 'kind', 'glacier']],
+			paint: {
+				'fill-color': 'hsl(0,0%,100%)'
+			}
+		},
+		{
+			id: 'land-agriculture',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: [
+				'all',
+				[
+					'in',
+					'kind',
+					'brownfield',
+					'farmland',
+					'farmyard',
+					'greenfield',
+					'greenhouse_horticulture',
+					'orchard',
+					'plant_nursery',
+					'vineyard'
+				]
+			],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[11, 0],
+						[12, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-waste',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'landfill']],
+			paint: {
+				'fill-color': 'hsl(50,0%,95%)',
+				'fill-opacity': {
+					stops: [
+						[10, 0],
+						[11, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-park',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'park', 'village_green', 'recreation_ground']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[11, 0],
+						[12, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-garden',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'allotments', 'garden']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[14, 0],
+						[15, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-burial',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'cemetery', 'grave_yard']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[12, 0],
+						[13, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-leisure',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'miniature_golf', 'playground', 'golf_course']],
+			paint: {
+				'fill-color': tokens.grass_dark
+			}
+		},
+		{
+			id: 'land-rock',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'bare_rock', 'scree', 'shingle']],
+			paint: {
+				'fill-color': 'hsl(192,0%,90%)'
+			}
+		},
+		{
+			id: 'land-forest',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'forest']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[12, 0],
+						[13, 0.25]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-grass',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'grass', 'grassland', 'meadow', 'wet_meadow']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[11, 0],
+						[12, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-vegetation',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'heath', 'scrub']],
+			paint: {
+				'fill-color': tokens.grass,
+				'fill-opacity': {
+					stops: [
+						[11, 0],
+						[12, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'land-sand',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'beach', 'sand']],
+			paint: {
+				'fill-color': 'hsl(60,0%,95%)'
+			}
+		},
+		{
+			id: 'land-wetland',
+			type: 'fill',
+			'source-layer': 'land',
+			filter: ['all', ['in', 'kind', 'bog', 'marsh', 'string_bog', 'swamp']],
+			paint: {
+				'fill-color': tokens.marsh,
+				'fill-opacity': {
+					stops: [
+						[10, 0],
+						[11, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-river',
+			type: 'line',
+			'source-layer': 'water_lines',
+			filter: ['all', ['in', 'kind', 'river'], ['!=', 'tunnel', true]],
+			paint: {
+				'line-color': tokens.water,
+				'line-width': {
+					stops: [
+						[8, 0],
+						[10, 1],
+						[12, 2],
+						[15, 4],
+						[17, 9],
+						[18, 20],
+						[20, 60]
+					]
+				}
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'water-canal',
+			type: 'line',
+			'source-layer': 'water_lines',
+			filter: ['all', ['in', 'kind', 'canal'], ['!=', 'tunnel', true], ['!=', 'bridge', true]],
+			paint: {
+				'line-color': tokens.water,
+				'line-width': {
+					stops: [
+						[9, 0],
+						[10, 2],
+						[15, 3],
+						[17, 8],
+						[18, 17],
+						[20, 50]
+					]
+				}
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'water-stream',
+			type: 'line',
+			'source-layer': 'water_lines',
+			filter: ['all', ['in', 'kind', 'stream'], ['!=', 'tunnel', true], ['!=', 'bridge', true]],
+			paint: {
+				'line-color': tokens.water,
+				'line-width': {
+					stops: [
+						[13, 0],
+						[14, 1],
+						[15, 2],
+						[17, 6],
+						[18, 12],
+						[20, 30]
+					]
+				}
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'water-ditch',
+			type: 'line',
+			'source-layer': 'water_lines',
+			filter: ['all', ['in', 'kind', 'ditch'], ['!=', 'tunnel', true], ['!=', 'bridge', true]],
+			paint: {
+				'line-color': tokens.water_light,
+				'line-width': {
+					stops: [
+						[14, 0],
+						[15, 1],
+						[17, 4],
+						[18, 8],
+						[20, 20]
+					]
+				}
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'water-area',
+			type: 'fill',
+			'source-layer': 'water_polygons',
+			filter: ['==', 'kind', 'water'],
+			paint: {
+				'fill-color': tokens.water_light,
+				'fill-opacity': {
+					stops: [
+						[4, 0],
+						[6, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-area-river',
+			type: 'fill',
+			'source-layer': 'water_polygons',
+			filter: ['==', 'kind', 'river'],
+			paint: {
+				'fill-color': tokens.water,
+				'fill-opacity': {
+					stops: [
+						[4, 0],
+						[6, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-area-small',
+			type: 'fill',
+			'source-layer': 'water_polygons',
+			filter: ['in', 'kind', 'reservoir', 'basin', 'dock'],
+			paint: {
+				'fill-color': tokens.water,
+				'fill-opacity': {
+					stops: [
+						[4, 0],
+						[6, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-dam-area',
+			type: 'fill',
+			'source-layer': 'dam_polygons',
+			filter: ['==', 'kind', 'dam'],
+			paint: {
+				'fill-color': 'hsl(33,0%,95%)',
+				'fill-opacity': {
+					stops: [
+						[12, 0],
+						[13, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-dam',
+			type: 'line',
+			'source-layer': 'dam_lines',
+			filter: ['==', 'kind', 'dam'],
+			paint: {
+				'line-color': 'hsl(205,0%,85%)'
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'water-pier-area',
+			type: 'fill',
+			'source-layer': 'pier_polygons',
+			filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'],
+			paint: {
+				'fill-color': tokens.street_tertiary,
+				'fill-opacity': {
+					stops: [
+						[14, 0],
+						[15, 1]
+					]
+				}
+			}
+		},
+		{
+			id: 'water-pier',
+			type: 'line',
+			'source-layer': 'pier_lines',
+			filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'],
+			paint: {
+				'line-color': tokens.street_tertiary,
+				'line-opacity': {
+					stops: [
+						[14, 0],
+						[15, 1]
+					]
+				}
+			},
+			layout: {
+				'line-cap': 'round',
+				'line-join': 'round'
+			}
+		},
+		{
+			id: 'site-dangerarea',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'danger_area'],
+			paint: {
+				'fill-color': 'hsl(0,0%,50%)',
+				'fill-outline-color': 'hsl(0,0%,50%)',
+				'fill-opacity': 0.3
+			}
+		},
+		{
+			id: 'site-university',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'university'],
+			paint: {
+				'fill-color': 'hsl(60,0%,75%)',
+				'fill-opacity': 0.1
+			}
+		},
+		{
+			id: 'site-college',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'college'],
+			paint: {
+				'fill-color': 'hsl(60,0%,75%)',
+				'fill-opacity': 0.1
+			}
+		},
+		{
+			id: 'site-school',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'school'],
+			paint: {
+				'fill-color': 'hsl(60,0%,75%)',
+				'fill-opacity': 0.1
+			}
+		},
+		{
+			id: 'site-hospital',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'hospital'],
+			paint: {
+				'fill-color': 'hsl(0,0%,70%)',
+				'fill-opacity': 0.1
+			}
+		},
+		{
+			id: 'site-prison',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'prison'],
+			paint: {
+				'fill-color': 'hsl(305,0%,97%)',
+				'fill-opacity': 0.1
+			}
+		},
+		{
+			id: 'site-parking',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'parking'],
+			paint: {
+				'fill-color': 'hsl(24,0%,95%)'
+			}
+		},
+		{
+			id: 'site-bicycleparking',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'bicycle_parking'],
+			paint: {
+				'fill-color': 'hsl(24,0%,95%)'
+			}
+		},
+		{
+			id: 'site-construction',
+			type: 'fill',
+			'source-layer': 'sites',
+			filter: ['in', 'kind', 'construction'],
+			paint: {
+				'fill-color': 'hsl(0,0%,66%)',
+				'fill-opacity': 0.1
+			}
+		}
+	].map((el) => {
+		return { source: 'versatiles-osm', ...el } as Layer;
+	});
+
+	return { landuse };
+}

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

@@ -0,0 +1 @@
+export default function makeNatural() {}

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

@@ -0,0 +1,199 @@
+import tokens from '../tokens';
+import type { SymbolLayerSpecification } from 'maplibre-gl';
+
+export default function makePlaceLabels() {
+	const placeLabels: SymbolLayerSpecification[] = [
+		{
+			id: 'label-place-neighbourhood',
+			filter: ['==', 'kind', 'neighbourhood'],
+			minzoom: 14,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-size': {
+					stops: [[14, 14]]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+		{
+			id: 'label-place-quarter',
+			filter: ['==', 'kind', 'quarter'],
+			minzoom: 14,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-size': {
+					stops: [[10, 14]]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+		{
+			id: 'label-place-suburb',
+			filter: ['==', 'kind', 'suburb'],
+			minzoom: 11,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-size': {
+					stops: [
+						[11, 13],
+						[13, 15]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 1.5
+			}
+		},
+		{
+			id: 'label-place-hamlet',
+			filter: ['==', 'kind', 'hamlet'],
+			minzoom: 13,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-size': {
+					stops: [
+						[10, 11],
+						[12, 14]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+		{
+			id: 'label-place-village',
+			filter: ['==', 'kind', 'village'],
+			minzoom: 11,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-size': {
+					stops: [
+						[9, 11],
+						[12, 14]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+
+		{
+			id: 'label-place-town',
+			filter: ['==', 'kind', 'town'],
+			minzoom: 9,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-letter-spacing': 0.015,
+				'text-size': {
+					stops: [
+						[8, 13],
+						[12, 16]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_primary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+
+		{
+			id: 'label-place-city',
+			filter: ['==', 'kind', 'city'],
+			minzoom: 6,
+			maxzoom: 11,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-letter-spacing': 0.015,
+				'text-size': {
+					stops: [
+						[8, 14],
+						[10, 14]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		},
+		{
+			id: 'label-place-statecapital',
+			filter: ['==', 'kind', 'state_capital'],
+			minzoom: 5,
+			maxzoom: 12,
+			layout: {
+				'text-field': '{name_de}',
+				'text-font': tokens.sans_regular,
+				'text-letter-spacing': 0.025,
+				'text-size': {
+					stops: [
+						[5, 13],
+						[14, 20]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_secondary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 1
+			}
+		},
+		{
+			id: 'label-place-capital',
+			filter: ['all', ['==', 'kind', 'capital'], ['==', 'name_de', 'Berlin']],
+			minzoom: 5,
+			maxzoom: 12,
+			layout: {
+				'text-field': '{name_de}',
+				'text-letter-spacing': 0.015,
+				'text-font': tokens.sans_medium,
+				'text-size': {
+					stops: [
+						[5, 15],
+						[14, 20]
+					]
+				}
+			},
+			paint: {
+				'text-color': tokens.label_primary,
+				'text-halo-color': tokens.background,
+				'text-halo-width': 2
+			}
+		}
+	].map((el) => {
+		return {
+			type: 'symbol',
+			source: 'versatiles-osm',
+			'source-layer': 'place_labels',
+			...el
+		} as SymbolLayerSpecification;
+	});
+
+	return { placeLabels };
+}