diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.mdx b/components/src/maplibre/MapStyle/SWRDataLabDark.mdx index 4103e631..b71dce30 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.mdx +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.mdx @@ -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) + + diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte index 6f4986df..ab33e552 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte @@ -29,7 +29,21 @@ - + + +
+
+ + + +
+
+ +
@@ -153,7 +167,7 @@
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts index 65299393..3695ab35 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts @@ -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'], @@ -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); @@ -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; @@ -72,13 +76,33 @@ const style: styleFunction = (opts) => { 'versatiles-osm': { attribution: 'OpenStreetMap 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: + 'Mapzen Terrain Tiles, DEM Sources', + 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', @@ -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 ] }; diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx index 8573e625..78c07559 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx @@ -35,8 +35,13 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on Base Vectors - [versatiles-osm](https://download.versatiles.org/) vector tiles in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org` - [License](https://docs.versatiles.org/basics/tilesets.html#license--attribution) + [versatiles-osm](https://download.versatiles.org/) vector tiles in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.datenhub.net` + [ODBL/CC-0](https://docs.versatiles.org/basics/tilesets.html#license--attribution) + + + Hillshading + [versatiles-hillshade](https://download.versatiles.org/) vector tiles based on Mapzen Jörð Terrain Tiles served from `tiles.datenhub.net` + [CC BY 4.0](https://docs.versatiles.org/basics/tilesets.html#license--attribution-1) Building footprints + heights @@ -45,18 +50,18 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on SWR Sans Typeface - served from `https://static.datenhub.net/maps/fonts` + 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` n/a Icons - [Osmic](https://github.com/gmgeo/osmic) + own work ([Figma](https://www.figma.com/design/2MbVC3SYyyahO2UPuy3z0S/Map-Icons?node-id=0-1&t=IJuwwIj86FGIjRGa-1)) + [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` [CC0](https://github.com/gmgeo/osmic?tab=CC0-1.0-1-ov-file) -Layer count: **{SWRDataLabLight({enableBuildingExtrusions: true}).layers.length}** (including building extrusions) +Layer count: **{SWRDataLabLight({enableBuildingExtrusions: true, enableHillshade: true}).layers.length}** (including building extrusions + hillshading) @@ -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 + } } ``` @@ -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 @@ -176,6 +183,7 @@ s_buildings["Buildings"] s_roads["Roads"] s_transit["Transit"] s_walking["Walking + Cycling"] +s_hillshade["Hillshade"] s_landuse["Landuse"] end @@ -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 diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte index 3244c7de..7677ae4a 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte @@ -29,6 +29,21 @@
+ + +
+
+ + + +
+
+ +
@@ -231,7 +246,7 @@
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts index 1ee518c3..c108b712 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts @@ -9,6 +9,7 @@ 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'], @@ -16,7 +17,7 @@ const tokens = { sans_bold: ['SWR Sans Bold'], background: { stops: [ - [8, 'hsl(24, 29%, 98.5%)'], + [8, 'hsl(24, 29%, 98%)'], [10, 'white'] ] }, @@ -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); @@ -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; @@ -71,13 +75,33 @@ const style: styleFunction = (opts) => { 'versatiles-osm': { attribution: 'OpenStreetMap 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: + 'Mapzen Terrain Tiles, DEM Sources', + 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', @@ -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 ] }; diff --git a/components/src/maplibre/MapStyle/components/Hillshade.ts b/components/src/maplibre/MapStyle/components/Hillshade.ts new file mode 100644 index 00000000..e2613cc3 --- /dev/null +++ b/components/src/maplibre/MapStyle/components/Hillshade.ts @@ -0,0 +1,45 @@ +import { type Layer } from '../../types'; + +export default function makeHillshade(tokens): any { + const hillshade: Layer[] = [ + { + id: 'hillshade-light', + filter: ['all', ['==', 'shade', 'light']], + paint: { + 'fill-color': tokens.hillshade_light, + 'fill-opacity': { + stops: [ + [0, 0], + [4, 1] + ] + }, + 'fill-outline-color': 'transparent', + 'fill-antialias': true + } + }, + { + id: 'hillshade-dark', + filter: ['all', ['==', 'shade', 'dark']], + paint: { + 'fill-color': tokens.hillshade_dark, + 'fill-opacity': { + stops: [ + [0, 0], + [4, 1] + ] + }, + 'fill-outline-color': 'transparent', + 'fill-antialias': true + } + } + ].map((el) => { + return { + type: 'fill', + 'source-layer': 'hillshade-vectors', + source: 'versatiles-hillshade', + ...el + } as Layer; + }); + + return { hillshade }; +} diff --git a/components/src/maplibre/MapStyle/storyLocations.ts b/components/src/maplibre/MapStyle/storyLocations.ts index 6c39b7b1..746dc3cc 100644 --- a/components/src/maplibre/MapStyle/storyLocations.ts +++ b/components/src/maplibre/MapStyle/storyLocations.ts @@ -16,6 +16,12 @@ const locations = { lat: 48.77521391139953, zoom: 16, pitch: 45 + }, + alps: { + lng: 10.01, + lat: 47.87, + zoom: 6.54, + pitch: 0 } }; diff --git a/components/src/maplibre/MapStyle/types.ts b/components/src/maplibre/MapStyle/types.ts index 09a945a1..3b610049 100644 --- a/components/src/maplibre/MapStyle/types.ts +++ b/components/src/maplibre/MapStyle/types.ts @@ -1,5 +1,6 @@ interface StyleOptions { enableBuildingExtrusions?: boolean; + enableHillshade?: boolean; places?: { showLabels?: boolean; };