diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte index 125891c2..68687931 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte @@ -6,9 +6,10 @@ import AttributionControl from '../AttributionControl/AttributionControl.svelte'; import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte'; - import { SWRDataLabDark } from './index'; + import { SWRDataLabDark, SWRDataLabLight } from './index'; import locations from './storyLocations'; import NavigationControl from '../NavigationControl/NavigationControl.svelte'; + import { type RoadLabelDensity } from './types'; const { Story } = defineMeta({ title: 'Maplibre/Style/SWR Data Lab Dark', @@ -71,7 +72,7 @@
@@ -290,7 +291,54 @@ 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 + }} + > + + +
+ + + + + +
+ {#each ['none', 'default', 'dense'] as s} +
+ {s} + + + +
+ {/each} +
+ + + + +
+
+ @@ -306,7 +354,12 @@ grid-template-rows: auto; height: 700px; } + .row { + display: flex; + height: 700px; + } .container { + flex-grow: 1; overflow: hidden; } diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts index 95fdf3e7..f1334f39 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts @@ -7,12 +7,15 @@ 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'; +import makePlaceLabels from './components/PlaceLabels'; +import makeRoadLabels from './components/RoadLabels'; import makeHillshade from './components/Hillshade'; -const tokens = { +import type { styleTokens } from '../types'; + +const tokens: styleTokens = { sans_regular: ['swr_sans_regular'], sans_medium: ['swr_sans_medium'], sans_bold: ['swr_sans_bold'], @@ -35,16 +38,16 @@ const tokens = { street_primary_case: 'hsl(0, 11%, 7%)', street_secondary: 'hsl(220, 3%, 20%)', street_secondary_case: 'hsl(0, 0%, 0%)', - street_tertiary: 'hsl(0, 0%, 20%)', + street_tertiary: 'hsl(0, 0%, 15%)', street_tertiary_case: 'hsl(0, 0%, 14%)', label_primary: 'hsl(240, 5%, 96%)', label_secondary: 'hsl(0, 2%, 85%)', - label_tertiary: 'hsl(0, 1%, 75%)', + label_tertiary: 'hsl(0, 1%, 60%)', boundary_country: '#6e6f71', boundary_country_case: '#181818', boundary_state: 'hsl(218, 4%, 37%)', rail: 'hsl(0, 0%, 33%)', - building: '#232325', + building: '#111', hillshade_light: 'hsla(0, 0%, 77%, 0.15)', hillshade_dark: 'hsla(0, 0%, 0%, 0.65)' }; @@ -53,7 +56,7 @@ const { landuse } = makeLanduse(tokens); const { placeLabels, boundaryLabels } = makePlaceLabels(tokens); const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens); const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens); -const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); +const { roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens); const { hillshade } = makeHillshade(tokens); @@ -68,6 +71,7 @@ const style: styleFunction = (opts) => { } as StyleOptions; const { admin } = makeAdmin(tokens, options?.admin); + const { roadLabels } = makeRoadLabels(tokens, options?.roads?.labels); return { version: 8, @@ -155,8 +159,8 @@ const style: styleFunction = (opts) => { ...admin, // 8. Labels - ...(options.roads?.showLabels ? walkingLabels : []), - ...(options.roads?.showLabels ? roadLabels : []), + ...(options.roads?.labels !== 'none' ? walkingLabels : []), + ...roadLabels, // 9. Building extrusions ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []), diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte index c36d317d..c052e977 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte @@ -279,7 +279,7 @@
- +
@@ -290,8 +290,11 @@
- +
@@ -330,7 +333,7 @@
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts index 6e829be1..6efc7fd1 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts @@ -7,10 +7,13 @@ import makeLanduse from './components/Landuse'; import makeTransit from './components/Transit'; import makePlaceLabels from './components/PlaceLabels'; import makeWalking from './components/Walking'; +import makeRoadLabels from './components/RoadLabels'; import makeRoads from './components/Roads'; import defaultOptions from './defaultOptions'; import makeHillshade from './components/Hillshade'; +import type { styleTokens } from '../types'; + const water = { stops: [ [6, 'white'], @@ -18,7 +21,7 @@ const water = { ] }; -const tokens = { +const tokens: styleTokens = { sans_regular: ['swr_sans_regular'], sans_medium: ['swr_sans_medium'], sans_bold: ['swr_sans_bold'], @@ -45,8 +48,8 @@ const tokens = { street_tertiary_case: 'hsl(0, 0%, 70%)', label_primary: 'hsl(240, 10%, 2%)', label_secondary: 'hsl(0, 0%, 18%)', - label_tertiary: 'hsl(60, 1%, 25%)', - building: '#f3f2f1', + label_tertiary: 'hsl(60, 1%, 35%)', + building: '#eee', rail: '#d3d3d3', boundary_country: '#8b8a89', boundary_state: 'hsl(37, 10%, 75%)', @@ -59,7 +62,7 @@ const { landuse } = makeLanduse(tokens); const { placeLabels, boundaryLabels } = makePlaceLabels(tokens); const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens); const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens); -const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); +const { roadBridges, roadSurface, roadTunnels } = makeRoads(tokens); const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens); const { hillshade } = makeHillshade(tokens); @@ -74,6 +77,7 @@ const style: styleFunction = (opts) => { } as StyleOptions; const { admin } = makeAdmin(tokens, options?.admin); + const { roadLabels } = makeRoadLabels(tokens, options?.roads?.labels); return { version: 8, @@ -161,8 +165,8 @@ const style: styleFunction = (opts) => { ...admin, // 8. Labels - ...(options.roads?.showLabels ? walkingLabels : []), - ...(options.roads?.showLabels ? roadLabels : []), + ...(options.roads?.labels !== 'none' ? walkingLabels : []), + ...roadLabels, // 9. Building extrusions ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []), diff --git a/components/src/maplibre/MapStyle/components/Admin.ts b/components/src/maplibre/MapStyle/components/Admin.ts index e1ec05d1..f0c9a91b 100644 --- a/components/src/maplibre/MapStyle/components/Admin.ts +++ b/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', diff --git a/components/src/maplibre/MapStyle/components/Buildings.ts b/components/src/maplibre/MapStyle/components/Buildings.ts index 752b5488..6cfec5d0 100644 --- a/components/src/maplibre/MapStyle/components/Buildings.ts +++ b/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-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1], + 'fill-extrusion-height': [ + 'interpolate', + ['linear'], + ['zoom'], + 15.5, + 0, + 16, + ['to-number', ['get', 'hoehe']] + ] } }; diff --git a/components/src/maplibre/MapStyle/components/Hillshade.ts b/components/src/maplibre/MapStyle/components/Hillshade.ts index e2613cc3..cf97f2f8 100644 --- a/components/src/maplibre/MapStyle/components/Hillshade.ts +++ b/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', diff --git a/components/src/maplibre/MapStyle/components/Landuse.ts b/components/src/maplibre/MapStyle/components/Landuse.ts index 144a9ffb..579ed32b 100644 --- a/components/src/maplibre/MapStyle/components/Landuse.ts +++ b/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', diff --git a/components/src/maplibre/MapStyle/components/PlaceLabels.ts b/components/src/maplibre/MapStyle/components/PlaceLabels.ts index baf0e74a..1b2b0855 100644 --- a/components/src/maplibre/MapStyle/components/PlaceLabels.ts +++ b/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,21 +12,26 @@ 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', filter: ['all', ['in', 'kind', 'neighbourhood']], - minzoom: 13, + minzoom: 14.5, layout: { 'text-size': { stops: [ - [10, 13], - [15, 16] + [10, 11], + [15, 13] ] - } + }, + 'text-letter-spacing': 0.075, + 'text-transform': 'uppercase', + 'text-overlap': 'never', + 'text-font': tokens.sans_regular }, paint: { + 'text-halo-color': tokens.background, 'text-color': tokens.label_secondary } }, @@ -34,20 +40,24 @@ export default function makePlaceLabels(tokens) { filter: [ 'all', ['in', 'kind', 'suburb', 'village', 'hamlet', 'town'], - ['>', 'population', 1000], + ['>=', 'population', 1000], ['<', 'population', 15_000] ], minzoom: 12, layout: { + 'text-font': tokens.sans_regular, 'text-size': { stops: [ - [11, 14], - [15, 16] + [14, 11], + [16, 18] ] - } + }, + 'text-letter-spacing': 0.1, + 'text-transform': 'uppercase' }, paint: { - 'text-color': tokens.label_secondary + 'text-color': tokens.label_secondary, + 'text-halo-color': tokens.background } }, { @@ -63,7 +73,7 @@ export default function makePlaceLabels(tokens) { 'text-size': { stops: [ [10, 14], - [12, 15] + [12, 16] ] } } @@ -79,11 +89,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 +196,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: { diff --git a/components/src/maplibre/MapStyle/components/RoadLabels.ts b/components/src/maplibre/MapStyle/components/RoadLabels.ts new file mode 100644 index 00000000..84a4b64e --- /dev/null +++ b/components/src/maplibre/MapStyle/components/RoadLabels.ts @@ -0,0 +1,112 @@ +import type { styleTokens } from '../../types'; +import type { SymbolLayerSpecification } from 'maplibre-gl'; +import type { RoadLabelDensity } from '../types'; + +export default function makeRoadLabels(tokens: styleTokens, density: RoadLabelDensity = 'default') { + if (density === 'none') return { roadLabels: [] }; + + const roadLabels: SymbolLayerSpecification[] = [ + ...(density === 'dense' + ? [ + { + id: 'label-street-misc', + filter: [ + 'in', + 'kind', + 'residential', + 'pedestrian', + 'path', + 'track', + 'steps', + 'service', + 'livingstreet', + 'living_street', + 'unclassified', + 'footway' + ], + minzoom: 15, + layout: { + 'text-letter-spacing': 0.05, + 'text-overlap': 'cooperative', + 'text-size': { + stops: [ + [12, 10], + [15, 11] + ] + } + }, + paint: { + 'text-color': tokens.label_tertiary + } + }, + { + id: 'label-street-tertiary', + filter: ['==', 'kind', 'tertiary'], + minzoom: 15, + layout: { + 'text-overlap': 'cooperative', + 'text-size': { + stops: [ + [12, 10], + [15, 12] + ] + } + } + } + ] + : []), + { + id: 'label-street-secondary', + filter: ['==', 'kind', 'secondary'], + minzoom: 14, + layout: { + 'text-letter-spacing': 0.01, + 'text-size': { + stops: [ + [12, 9], + [15, 12] + ] + } + }, + 'text-overlap': 'always' + }, + { + id: 'label-street-primary', + filter: ['in', 'kind', 'primary', 'trunk'], + minzoom: 14, + layout: { + 'text-letter-spacing': 0.03, + 'text-size': { + stops: [ + [12, 10], + [15, 14] + ] + }, + 'text-overlap': 'always' + } + } + ].map((el) => { + return { + type: 'symbol', + source: 'versatiles-osm', + 'source-layer': 'street_labels', + ...el, + layout: { + 'text-field': '{name}', + 'text-font': tokens.sans_regular, + 'symbol-placement': 'line', + 'text-max-angle': 20, + 'text-variable-anchor': ['center', 'left', 'right'], + ...el.layout + }, + paint: { + 'text-color': tokens.label_secondary, + 'text-halo-color': tokens.background, + 'text-halo-width': 1, + ...el.paint + } + }; + }); + + return { roadLabels }; +} diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts index d1caa456..0b228937 100644 --- a/components/src/maplibre/MapStyle/components/Roads.ts +++ b/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: [ @@ -76,7 +76,15 @@ export default function makeRoads(tokens) { const street_primary = { paint: { 'line-color': tokens.street_primary, - 'line-width': motorway.line_width, + 'line-width': { + stops: [ + [5, 1], + [7, 1.5], + [11, 2], + [12, 3], + [14, 6] + ] + }, 'line-opacity': { stops: [ [8, 0], @@ -90,7 +98,15 @@ export default function makeRoads(tokens) { const street_primary_case = { paint: { 'line-color': tokens.street_primary_case, - 'line-width': motorway_case.line_width, + 'line-width': { + stops: [ + [5, 1], + [7, 1.5], + [11, 4], + [12, 5], + [14, 9] + ] + }, 'line-opacity': { stops: [ [8, 0], @@ -195,102 +211,6 @@ export default function makeRoads(tokens) { } }; - const roadLabels: SymbolLayerSpecification[] = [ - { - id: 'label-street-misc', - filter: ['in', 'kind', 'residential', 'livingstreet', 'unclassified'], - minzoom: 15, - layout: { - 'text-size': { - stops: [ - [12, 10], - [15, 13] - ] - } - } - }, - { - id: 'label-street-tertiary', - filter: ['==', 'kind', 'tertiary'], - minzoom: 15, - layout: { - 'text-size': { - stops: [ - [12, 10], - [15, 13] - ] - } - } - }, - { - id: 'label-street-secondary', - filter: ['==', 'kind', 'secondary'], - minzoom: 14, - layout: { - 'text-letter-spacing': 0.025, - 'text-size': { - stops: [ - [12, 10], - [15, 14] - ] - } - } - }, - { - id: 'label-street-primary', - filter: ['==', 'kind', 'primary'], - minzoom: 14, - layout: { - 'text-letter-spacing': 0.025, - 'text-size': { - stops: [ - [12, 10], - [15, 14] - ] - } - }, - paint: { - 'text-color': tokens.label_primary - } - }, - { - id: 'label-street-trunk', - filter: ['==', 'kind', 'trunk'], - minzoom: 13, - layout: { - 'text-size': { - stops: [ - [12, 10], - [15, 13] - ] - } - }, - paint: { - 'text-color': tokens.label_primary - } - } - ].map((el) => { - return { - type: 'symbol', - source: 'versatiles-osm', - 'source-layer': 'street_labels', - ...el, - layout: { - 'text-field': '{name}', - 'text-font': tokens.sans_regular, - 'symbol-placement': 'line', - 'text-anchor': 'center', - ...el.layout - }, - paint: { - 'text-color': tokens.label_secondary, - 'text-halo-color': tokens.background, - 'text-halo-width': 1.5, - ...el.paint - } - } as SymbolLayerSpecification; - }); - const roadBridges: Layer[] = [ { id: 'bridge-street-service:case', @@ -1067,7 +987,7 @@ export default function makeRoads(tokens) { id: 'street-residential:case', filter: [ 'all', - ['==', 'kind', 'residential'], + ['in', 'kind', 'residential', 'footway'], ['!=', 'bridge', true], ['!=', 'tunnel', true] ], @@ -1232,7 +1152,7 @@ export default function makeRoads(tokens) { id: 'street-service', filter: [ 'all', - ['==', 'kind', 'service'], + ['in', 'kind', 'service', 'footway'], ['!=', 'bridge', true], ['!=', 'tunnel', true], ['!=', 'service', 'driveway'] @@ -1243,7 +1163,7 @@ export default function makeRoads(tokens) { stops: [ [14, 1], [16, 3], - [18, 16], + [18, 12], [19, 44], [20, 88] ] @@ -1257,26 +1177,12 @@ export default function makeRoads(tokens) { }, layout: street_layout }, - { - id: 'street-livingstreet', - filter: [ - 'all', - ['==', 'kind', 'living_street'], - ['!=', 'bridge', true], - ['!=', 'tunnel', true] - ], - paint: { - 'line-color': street_residential.line_color, - 'line-width': street_residential.line_width, - 'line-opacity': street_residential.line_opacity - }, - layout: street_layout - }, + { id: 'street-residential', filter: [ 'all', - ['==', 'kind', 'residential'], + ['in', 'kind', 'residential', 'living_street'], ['!=', 'bridge', true], ['!=', 'tunnel', true] ], @@ -1496,5 +1402,5 @@ export default function makeRoads(tokens) { return { source: 'versatiles-osm', type: 'line', 'source-layer': 'streets', ...el } as Layer; }); - return { roadLabels, roadBridges, roadSurface, roadTunnels }; + return { roadBridges, roadSurface, roadTunnels }; } diff --git a/components/src/maplibre/MapStyle/components/Transit.ts b/components/src/maplibre/MapStyle/components/Transit.ts index 63024545..9a431b16 100644 --- a/components/src/maplibre/MapStyle/components/Transit.ts +++ b/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], diff --git a/components/src/maplibre/MapStyle/components/Walking.ts b/components/src/maplibre/MapStyle/components/Walking.ts index ccfe9310..90d7168a 100644 --- a/components/src/maplibre/MapStyle/components/Walking.ts +++ b/components/src/maplibre/MapStyle/components/Walking.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 = { @@ -6,7 +6,7 @@ const street_layout = { '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: { diff --git a/components/src/maplibre/MapStyle/defaultOptions.ts b/components/src/maplibre/MapStyle/defaultOptions.ts index fc0d4e74..38d413b0 100644 --- a/components/src/maplibre/MapStyle/defaultOptions.ts +++ b/components/src/maplibre/MapStyle/defaultOptions.ts @@ -5,9 +5,6 @@ const opts: StyleOptions = { places: { showLabels: true }, - roads: { - showLabels: true - }, admin: { show: true, showLabels: true diff --git a/components/src/maplibre/MapStyle/types.ts b/components/src/maplibre/MapStyle/types.ts index d392934c..a28935e2 100644 --- a/components/src/maplibre/MapStyle/types.ts +++ b/components/src/maplibre/MapStyle/types.ts @@ -2,6 +2,9 @@ enum AdminLevel { COUNTRY = 2, BUNDESLAND = 4 } + +type RoadLabelDensity = 'none' | 'default' | 'dense'; + interface StyleOptions { enableBuildingExtrusions?: boolean; enableHillshade?: boolean; @@ -13,8 +16,8 @@ interface StyleOptions { showLabels?: boolean; }; roads?: { - showLabels?: boolean; + labels?: RoadLabelDensity; }; } -export type { StyleOptions }; +export type { StyleOptions, RoadLabelDensity }; diff --git a/components/src/maplibre/types.ts b/components/src/maplibre/types.ts index e09611bc..1e60f65c 100644 --- a/components/src/maplibre/types.ts +++ b/components/src/maplibre/types.ts @@ -52,3 +52,5 @@ export interface SourceProps { attribution?: string; children?: Snippet; } + +export type styleTokens = Record;