Skip to content

feat(SWRDataLabLight/Dark): Add shaded relief #249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
awesomephant merged 5 commits into from
Nov 14, 2025
Merged

feat(SWRDataLabLight/Dark): Add shaded relief #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1e19d93
Block out feature in SWRDataLabLight
awesomephant Nov 12, 2025
79e6334
Transfer to SWRDataLabDark, set tokens
awesomephant Nov 12, 2025
8305d5a
Point everyone to the production tileserver
awesomephant Nov 14, 2025
13614ab
Iterate docs
awesomephant Nov 14, 2025
e33f236
Iterate hillshade
awesomephant Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/src/maplibre/MapStyle/SWRDataLabDark.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,6 @@ import * as MapStyleStories from './SWRDataLabDark.stories.svelte';

# SWR Data Lab Dark

Dark mode version of [SWRDataLabLight](?path=/docs/maplibre-style-swr-data-lab-light--docs)

<Story of={MapStyleStories.BadenBadenZ15} />
18 changes: 16 additions & 2 deletions components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,21 @@
</div>
</DesignTokens>
</Story>

<Story asChild name="Hillshade">
<DesignTokens theme="dark">
<div class="grid">
<div class="container">
<Map
showDebug
style={SWRDataLabDark({ enableHillshade: true })}
initialLocation={locations.alps}
>
<AttributionControl position="bottom-left" />
</Map>
</div>
</div>
</DesignTokens>
</Story>
<Story asChild name="Toggle place labels (#221)">
<DesignTokens theme="dark">
<div class="grid">
Expand Down Expand Up @@ -153,7 +167,7 @@
<div class="container">
<Map
showDebug
style={SWRDataLabDark({ enableBuildingExtrusions: false })}
style={SWRDataLabDark({ enableBuildingExtrusions: false, enableHillshade: true })}
initialLocation={locations.badenBaden}
>
<AttributionControl position="bottom-left" />
Expand Down
47 changes: 37 additions & 10 deletions components/src/maplibre/MapStyle/SWRDataLabDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import makeTransit from './components/Transit';
import makePlaceLabels from './components/PlaceLabels';
import makeWalking from './components/Walking';
import makeRoads from './components/Roads';
import makeHillshade from './components/Hillshade';

const tokens = {
sans_regular: ['SWR Sans Regular'],
Expand Down Expand Up @@ -41,7 +42,9 @@ const tokens = {
boundary_state: 'hsl(218, 4%, 37%)',
rail: 'hsl(0, 0%, 33%)',
sand: 'hsl(0, 0%, 16%)',
building: '#232325'
building: '#232325',
hillshade_light: 'hsla(0, 0%, 77%, 0.15)',
hillshade_dark: 'hsla(0, 0%, 0%, 0.65)'
};

const { landuse } = makeLanduse(tokens);
Expand All @@ -51,6 +54,7 @@ const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit
const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
const { hillshade } = makeHillshade(tokens);

interface styleFunction {
(options?: StyleOptions): StyleSpecification;
Expand All @@ -72,13 +76,33 @@ const style: styleFunction = (opts) => {
'versatiles-osm': {
attribution:
'<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
tiles: ['https://tiles.datenhub.net/tiles/osm/{z}/{x}/{y}'],
bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
type: 'vector',
scheme: 'xyz',
minzoom: 0,
maxzoom: 14
},
...(options.enableHillshade && {
'versatiles-hillshade': {
tilejson: '3.0.0',
name: 'VersaTiles Hillshade Vectors',
description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
attribution:
'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
version: '1.0.0',
tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
type: 'vector',
scheme: 'xyz',
format: 'pbf',
bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
minzoom: 0,
maxzoom: 12,
vector_layers: [
{ id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
]
}
}),
...(options.enableBuildingExtrusions && {
'basemap-de': {
attribution: 'GeoBasis-DE',
Expand Down Expand Up @@ -106,35 +130,38 @@ const style: styleFunction = (opts) => {
...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
...(options.enableBuildingExtrusions ? [structureExtrusions] : []),

// 3. Tunnels
// 3. Shaded relief
...(options.enableHillshade ? hillshade : []),

// 4. Tunnels
...walkingTunnels,
...roadTunnels,
...transitTunnels,

// 4. Surface ways
// 5. Surface ways
...walkingSurface,
...roadSurface,
...transitSurface,

// 5. Bridges ways
// 6. Bridges ways
...walkingBridges,
...roadBridges,
...transitBridges,

// 6. Admin boundaries
// 7. Admin boundaries
...admin,

// 7. Labels
// 8. Labels
...(options.roads?.showLabels ? walkingLabels : []),
...(options.roads?.showLabels ? roadLabels : []),

// 8. Building extrusions
// 9. Building extrusions
...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),

// 8. Point labels
// 10. Point labels
...(options.places?.showLabels ? placeLabels : []),

// 9. Admin boundary labels
// 11. Admin boundary labels
...boundaryLabels
]
};
Expand Down
33 changes: 22 additions & 11 deletions components/src/maplibre/MapStyle/SWRDataLabLight.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
</thead>
<tr>
<td>Base Vectors</td>
<td>[versatiles-osm](https://download.versatiles.org/) vector tiles in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org`</td>
<td>[License](https://docs.versatiles.org/basics/tilesets.html#license--attribution)</td>
<td>[versatiles-osm](https://download.versatiles.org/) vector tiles in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.datenhub.net`</td>
<td>[ODBL/CC-0](https://docs.versatiles.org/basics/tilesets.html#license--attribution)</td>
</tr>
<tr>
<td>Hillshading</td>
<td>[versatiles-hillshade](https://download.versatiles.org/) vector tiles based on Mapzen Jörð Terrain Tiles served from `tiles.datenhub.net`</td>
<td>[CC BY 4.0](https://docs.versatiles.org/basics/tilesets.html#license--attribution-1)</td>
</tr>
<tr>
<td>Building footprints + heights</td>
Expand All @@ -45,18 +50,18 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
</tr>
<tr>
<td>SWR Sans Typeface</td>
<td>served from `https://static.datenhub.net/maps/fonts`</td>
<td>Typefaces from [marken.swr.de](https://marken.swr.de/document/932#/typografie/typografie), converted to PBF with [Font Maker](https://maplibre.org/font-maker/), served from `static.datenhub.net/maps/fonts`</td>
<td>n/a</td>
</tr>
<tr>
<td>Icons</td>
<td>[Osmic](https://github.com/gmgeo/osmic) + own work ([Figma](https://www.figma.com/design/2MbVC3SYyyahO2UPuy3z0S/Map-Icons?node-id=0-1&t=IJuwwIj86FGIjRGa-1))</td>
<td>[Osmic](https://github.com/gmgeo/osmic) + own work ([Figma](https://www.figma.com/design/2MbVC3SYyyahO2UPuy3z0S/Map-Icons?node-id=0-1&t=IJuwwIj86FGIjRGa-1)) served from `static.datenhub.net/maps/styles/swr-datalab-light/sprite`</td>
<td>[CC0](https://github.com/gmgeo/osmic?tab=CC0-1.0-1-ov-file)</td>
</tr>

</table>

Layer count: **{SWRDataLabLight({enableBuildingExtrusions: true}).layers.length}** (including building extrusions)
Layer count: **{SWRDataLabLight({enableBuildingExtrusions: true, enableHillshade: true}).layers.length}** (including building extrusions + hillshading)

<Story of={MapStyleStories.BadenBadenZ15} />

Expand All @@ -82,12 +87,13 @@ Call `SWRDataLabLight()` to construct a style document and pass the result to th
```ts
interface StyleOptions {
enableBuildingExtrusions?: boolean;
roads?: {
showLabels?: boolean
}
places?: {
showLabels?: boolean
}
enableHillshade?: boolean;
roads?: {
showLabels?: boolean
}
places?: {
showLabels?: boolean
}
}
```

Expand Down Expand Up @@ -166,6 +172,7 @@ classDef buildings fill:#FFBA35;
classDef roads fill:#FFD584;
classDef transit fill:#C5F0B1;
classDef walking fill:#65D62B;
classDef hillshade fill:#BEDEE8;
classDef landuse fill:#eee;

block:semantic:6
Expand All @@ -176,6 +183,7 @@ s_buildings["Buildings"]
s_roads["Roads"]
s_transit["Transit"]
s_walking["Walking + Cycling"]
s_hillshade["Hillshade"]
s_landuse["Landuse"]
end

Expand All @@ -198,11 +206,14 @@ a_roads_surface["Roads (Surface)"]
a_walking_tunnel["Walking (Tunnel)"]
a_transit_tunnel["Transit (Tunnel)"]
a_roads_tunnel["Roads (Tunnel)"]
a_hillshade_light["Hillshade Light"]
a_hillshade_dark["Hillshade Dark"]
a_land["Land"]
a_ocean["Ocean"]
a_background["Background"]
end

class s_hillshade,a_hillshade_light,a_hillshade_dark hillshade
class s_admin,a_admin0,a_admin1,a_admin2,a_admin_labels admin
class s_buildings,a_buildings buildings
class s_roads,a_roads_bridge,a_roads_surface,a_roads_tunnel,a_roads_labels roads
Expand Down
17 changes: 16 additions & 1 deletion components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,21 @@
</div>
</DesignTokens>
</Story>
<Story asChild name="Hillshade">
<DesignTokens theme="light">
<div class="grid">
<div class="container">
<Map
showDebug
style={SWRDataLabLight({ enableHillshade: true })}
initialLocation={locations.alps}
>
<AttributionControl position="bottom-left" />
</Map>
</div>
</div>
</DesignTokens>
</Story>
<Story asChild name="fix/122">
<DesignTokens theme="light">
<div class="grid">
Expand Down Expand Up @@ -231,7 +246,7 @@
<div class="container">
<Map
showDebug
style={SWRDataLabLight({ enableBuildingExtrusions: false })}
style={SWRDataLabLight({ enableBuildingExtrusions: false, enableHillshade: true })}
initialLocation={locations.badenBaden}
>
<AttributionControl position="bottom-left" />
Expand Down
49 changes: 38 additions & 11 deletions components/src/maplibre/MapStyle/SWRDataLabLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import makePlaceLabels from './components/PlaceLabels';
import makeWalking from './components/Walking';
import makeRoads from './components/Roads';
import defaultOptions from './defaultOptions';
import makeHillshade from './components/Hillshade';

const tokens = {
sans_regular: ['SWR Sans Regular'],
sans_medium: ['SWR Sans Medium'],
sans_bold: ['SWR Sans Bold'],
background: {
stops: [
[8, 'hsl(24, 29%, 98.5%)'],
[8, 'hsl(24, 29%, 98%)'],
[10, 'white']
]
},
Expand All @@ -40,7 +41,9 @@ const tokens = {
sand: 'hsl(60,0%,95%)',
boundary_country: '#8b8a89',
boundary_state: 'hsl(37, 10%, 75%)',
boundary_country_case: 'white'
boundary_country_case: 'white',
hillshade_light: '#fff',
hillshade_dark: 'hsla(0, 0%, 53%, 0.15)'
};

const { landuse } = makeLanduse(tokens);
Expand All @@ -50,6 +53,7 @@ const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit
const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
const { hillshade } = makeHillshade(tokens);

interface styleFunction {
(options?: StyleOptions): StyleSpecification;
Expand All @@ -71,13 +75,33 @@ const style: styleFunction = (opts) => {
'versatiles-osm': {
attribution:
'<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
tiles: ['https://tiles.datenhub.net/tiles/osm/{z}/{x}/{y}'],
bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
type: 'vector',
scheme: 'xyz',
minzoom: 0,
maxzoom: 14
},
...(options.enableHillshade && {
'versatiles-hillshade': {
tilejson: '3.0.0',
name: 'VersaTiles Hillshade Vectors',
description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
attribution:
'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
version: '1.0.0',
tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
type: 'vector',
scheme: 'xyz',
format: 'pbf',
bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
minzoom: 0,
maxzoom: 12,
vector_layers: [
{ id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
]
}
}),
...(options.enableBuildingExtrusions && {
'basemap-de': {
attribution: 'GeoBasis-DE',
Expand Down Expand Up @@ -105,35 +129,38 @@ const style: styleFunction = (opts) => {
...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
...(options.enableBuildingExtrusions ? [structureExtrusions] : []),

// 3. Tunnels
// 3. Shaded relief
...(options.enableHillshade ? hillshade : []),

// 4. Tunnels
...walkingTunnels,
...roadTunnels,
...transitTunnels,

// 4. Surface ways
// 5. Surface ways
...walkingSurface,
...roadSurface,
...transitSurface,

// 5. Bridges ways
// 6. Bridges ways
...walkingBridges,
...roadBridges,
...transitBridges,

// 6. Admin boundaries
// 7. Admin boundaries
...admin,

// 7. Labels
// 8. Labels
...(options.roads?.showLabels ? walkingLabels : []),
...(options.roads?.showLabels ? roadLabels : []),

// 8. Building extrusions
// 9. Building extrusions
...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),

// 8. Point labels
// 10. Point labels
...(options.places?.showLabels ? placeLabels : []),

// 9. Admin boundary labels
// 11. Admin boundary labels
...boundaryLabels
]
};
Expand Down
Loading