@swr-data-lab/components 2.33.1 → 2.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/maplibre/MapStyle/SWRDataLabDark.js +37 -11
  2. package/dist/maplibre/MapStyle/SWRDataLabLight.js +38 -12
  3. package/dist/maplibre/MapStyle/components/Hillshade.d.ts +1 -0
  4. package/dist/maplibre/MapStyle/components/Hillshade.js +43 -0
  5. package/dist/maplibre/MapStyle/components/Landuse.js +1 -1
  6. package/dist/maplibre/MapStyle/storyLocations.d.ts +6 -0
  7. package/dist/maplibre/MapStyle/storyLocations.js +6 -0
  8. package/dist/maplibre/MapStyle/types.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/maplibre/MapStyle/SWRDataLabDark.js CHANGED
@@ -6,6 +6,7 @@ import makeTransit from './components/Transit';
6
6
  import makePlaceLabels from './components/PlaceLabels';
7
7
  import makeWalking from './components/Walking';
8
8
  import makeRoads from './components/Roads';
9
+ import makeHillshade from './components/Hillshade';
9
10
  const tokens = {
10
11
  sans_regular: ['SWR Sans Regular'],
11
12
  sans_medium: ['SWR Sans Medium'],
@@ -22,6 +23,8 @@ const tokens = {
22
23
  marsh: 'hsl(180, 3%, 35%)',
23
24
  grass: 'hsl(170, 20%, 14%)',
24
25
  grass_dark: 'hsl(170, 16%, 12%)',
26
+ sand: 'hsl(0, 0%, 16%)',
27
+ rock: 'hsl(0, 0%, 20%)',
25
28
  street_primary: 'hsl(220, 3%, 20%)',
26
29
  street_primary_case: 'hsl(0, 11%, 7%)',
27
30
  street_secondary: 'hsl(0, 0%, 22%)',
@@ -35,8 +38,9 @@ const tokens = {
35
38
  boundary_country_case: '#181818',
36
39
  boundary_state: 'hsl(218, 4%, 37%)',
37
40
  rail: 'hsl(0, 0%, 33%)',
38
- sand: 'hsl(0, 0%, 16%)',
39
- building: '#232325'
41
+ building: '#232325',
42
+ hillshade_light: 'hsla(0, 0%, 77%, 0.15)',
43
+ hillshade_dark: 'hsla(0, 0%, 0%, 0.65)'
40
44
  };
41
45
  const { landuse } = makeLanduse(tokens);
42
46
  const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
@@ -45,6 +49,7 @@ const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit
45
49
  const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
46
50
  const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
47
51
  const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
52
+ const { hillshade } = makeHillshade(tokens);
48
53
  const style = (opts) => {
49
54
  const options = {
50
55
  ...defaultOptions,
@@ -59,13 +64,32 @@ const style = (opts) => {
59
64
  sources: {
60
65
  'versatiles-osm': {
61
66
  attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
62
- tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
67
+ tiles: ['https://tiles.datenhub.net/tiles/osm/{z}/{x}/{y}'],
63
68
  bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
64
69
  type: 'vector',
65
70
  scheme: 'xyz',
66
71
  minzoom: 0,
67
72
  maxzoom: 14
68
73
  },
74
+ ...(options.enableHillshade && {
75
+ 'versatiles-hillshade': {
76
+ tilejson: '3.0.0',
77
+ name: 'VersaTiles Hillshade Vectors',
78
+ description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
79
+ attribution: '<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
80
+ version: '1.0.0',
81
+ tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
82
+ type: 'vector',
83
+ scheme: 'xyz',
84
+ format: 'pbf',
85
+ bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
86
+ minzoom: 0,
87
+ maxzoom: 12,
88
+ vector_layers: [
89
+ { id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
90
+ ]
91
+ }
92
+ }),
69
93
  ...(options.enableBuildingExtrusions && {
70
94
  'basemap-de': {
71
95
  attribution: 'GeoBasis-DE',
@@ -91,28 +115,30 @@ const style = (opts) => {
91
115
  // 2. Building footprints + Structures (ie. bridges)
92
116
  ...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
93
117
  ...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
94
- // 3. Tunnels
118
+ // 3. Shaded relief
119
+ ...(options.enableHillshade ? hillshade : []),
120
+ // 4. Tunnels
95
121
  ...walkingTunnels,
96
122
  ...roadTunnels,
97
123
  ...transitTunnels,
98
- // 4. Surface ways
124
+ // 5. Surface ways
99
125
  ...walkingSurface,
100
126
  ...roadSurface,
101
127
  ...transitSurface,
102
- // 5. Bridges ways
128
+ // 6. Bridges ways
103
129
  ...walkingBridges,
104
130
  ...roadBridges,
105
131
  ...transitBridges,
106
- // 6. Admin boundaries
132
+ // 7. Admin boundaries
107
133
  ...admin,
108
- // 7. Labels
134
+ // 8. Labels
109
135
  ...(options.roads?.showLabels ? walkingLabels : []),
110
136
  ...(options.roads?.showLabels ? roadLabels : []),
111
- // 8. Building extrusions
137
+ // 9. Building extrusions
112
138
  ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
113
- // 8. Point labels
139
+ // 10. Point labels
114
140
  ...(options.places?.showLabels ? placeLabels : []),
115
- // 9. Admin boundary labels
141
+ // 11. Admin boundary labels
116
142
  ...boundaryLabels
117
143
  ]
118
144
  };
package/dist/maplibre/MapStyle/SWRDataLabLight.js CHANGED
@@ -6,13 +6,14 @@ import makePlaceLabels from './components/PlaceLabels';
6
6
  import makeWalking from './components/Walking';
7
7
  import makeRoads from './components/Roads';
8
8
  import defaultOptions from './defaultOptions';
9
+ import makeHillshade from './components/Hillshade';
9
10
  const tokens = {
10
11
  sans_regular: ['SWR Sans Regular'],
11
12
  sans_medium: ['SWR Sans Medium'],
12
13
  sans_bold: ['SWR Sans Bold'],
13
14
  background: {
14
15
  stops: [
15
- [8, 'hsl(24, 29%, 98.5%)'],
16
+ [8, 'hsl(24, 29%, 98%)'],
16
17
  [10, 'white']
17
18
  ]
18
19
  },
@@ -22,6 +23,8 @@ const tokens = {
22
23
  marsh: 'hsl(200, 14%, 97%)',
23
24
  grass: 'hsl(133, 36%, 95%)',
24
25
  grass_dark: 'hsl(127, 49%, 93%)',
26
+ sand: 'hsl(60, 0%, 95%)',
27
+ rock: 'hsl(192, 0%, 90%)',
25
28
  street_primary: 'hsl(0, 4%, 95%)',
26
29
  street_primary_case: 'hsl(240, 1%, 84%)',
27
30
  street_secondary: 'hsl(0, 0%, 95%)',
@@ -33,10 +36,11 @@ const tokens = {
33
36
  label_tertiary: 'hsl(60, 1%, 50%)',
34
37
  building: '#f3f2f1',
35
38
  rail: '#d3d3d3',
36
- sand: 'hsl(60,0%,95%)',
37
39
  boundary_country: '#8b8a89',
38
40
  boundary_state: 'hsl(37, 10%, 75%)',
39
- boundary_country_case: 'white'
41
+ boundary_country_case: 'white',
42
+ hillshade_light: '#fff',
43
+ hillshade_dark: 'hsla(0, 0%, 53%, 0.15)'
40
44
  };
41
45
  const { landuse } = makeLanduse(tokens);
42
46
  const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
@@ -45,6 +49,7 @@ const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit
45
49
  const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
46
50
  const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
47
51
  const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
52
+ const { hillshade } = makeHillshade(tokens);
48
53
  const style = (opts) => {
49
54
  const options = {
50
55
  ...defaultOptions,
@@ -59,13 +64,32 @@ const style = (opts) => {
59
64
  sources: {
60
65
  'versatiles-osm': {
61
66
  attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
62
- tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
67
+ tiles: ['https://tiles.datenhub.net/tiles/osm/{z}/{x}/{y}'],
63
68
  bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
64
69
  type: 'vector',
65
70
  scheme: 'xyz',
66
71
  minzoom: 0,
67
72
  maxzoom: 14
68
73
  },
74
+ ...(options.enableHillshade && {
75
+ 'versatiles-hillshade': {
76
+ tilejson: '3.0.0',
77
+ name: 'VersaTiles Hillshade Vectors',
78
+ description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
79
+ attribution: '<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
80
+ version: '1.0.0',
81
+ tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
82
+ type: 'vector',
83
+ scheme: 'xyz',
84
+ format: 'pbf',
85
+ bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
86
+ minzoom: 0,
87
+ maxzoom: 12,
88
+ vector_layers: [
89
+ { id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
90
+ ]
91
+ }
92
+ }),
69
93
  ...(options.enableBuildingExtrusions && {
70
94
  'basemap-de': {
71
95
  attribution: 'GeoBasis-DE',
@@ -91,28 +115,30 @@ const style = (opts) => {
91
115
  // 2. Building footprints + Structures (ie. bridges)
92
116
  ...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
93
117
  ...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
94
- // 3. Tunnels
118
+ // 3. Shaded relief
119
+ ...(options.enableHillshade ? hillshade : []),
120
+ // 4. Tunnels
95
121
  ...walkingTunnels,
96
122
  ...roadTunnels,
97
123
  ...transitTunnels,
98
- // 4. Surface ways
124
+ // 5. Surface ways
99
125
  ...walkingSurface,
100
126
  ...roadSurface,
101
127
  ...transitSurface,
102
- // 5. Bridges ways
128
+ // 6. Bridges ways
103
129
  ...walkingBridges,
104
130
  ...roadBridges,
105
131
  ...transitBridges,
106
- // 6. Admin boundaries
132
+ // 7. Admin boundaries
107
133
  ...admin,
108
- // 7. Labels
134
+ // 8. Labels
109
135
  ...(options.roads?.showLabels ? walkingLabels : []),
110
136
  ...(options.roads?.showLabels ? roadLabels : []),
111
- // 8. Building extrusions
137
+ // 9. Building extrusions
112
138
  ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
113
- // 8. Point labels
139
+ // 10. Point labels
114
140
  ...(options.places?.showLabels ? placeLabels : []),
115
- // 9. Admin boundary labels
141
+ // 11. Admin boundary labels
116
142
  ...boundaryLabels
117
143
  ]
118
144
  };
package/dist/maplibre/MapStyle/components/Hillshade.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default function makeHillshade(tokens: any): any;
package/dist/maplibre/MapStyle/components/Hillshade.js ADDED
@@ -0,0 +1,43 @@
1
+ import {} from '../../types';
2
+ export default function makeHillshade(tokens) {
3
+ const hillshade = [
4
+ {
5
+ id: 'hillshade-light',
6
+ filter: ['all', ['==', 'shade', 'light']],
7
+ paint: {
8
+ 'fill-color': tokens.hillshade_light,
9
+ 'fill-opacity': {
10
+ stops: [
11
+ [0, 0],
12
+ [4, 1]
13
+ ]
14
+ },
15
+ 'fill-outline-color': 'transparent',
16
+ 'fill-antialias': true
17
+ }
18
+ },
19
+ {
20
+ id: 'hillshade-dark',
21
+ filter: ['all', ['==', 'shade', 'dark']],
22
+ paint: {
23
+ 'fill-color': tokens.hillshade_dark,
24
+ 'fill-opacity': {
25
+ stops: [
26
+ [0, 0],
27
+ [4, 1]
28
+ ]
29
+ },
30
+ 'fill-outline-color': 'transparent',
31
+ 'fill-antialias': true
32
+ }
33
+ }
34
+ ].map((el) => {
35
+ return {
36
+ type: 'fill',
37
+ 'source-layer': 'hillshade-vectors',
38
+ source: 'versatiles-hillshade',
39
+ ...el
40
+ };
41
+ });
42
+ return { hillshade };
43
+ }
package/dist/maplibre/MapStyle/components/Landuse.js CHANGED
@@ -108,7 +108,7 @@ export default function makeLanduse(tokens) {
108
108
  'source-layer': 'land',
109
109
  filter: ['all', ['in', 'kind', 'bare_rock', 'scree', 'shingle']],
110
110
  paint: {
111
- 'fill-color': 'hsl(192,0%,90%)'
111
+ 'fill-color': tokens.rock
112
112
  }
113
113
  },
114
114
  {
package/dist/maplibre/MapStyle/storyLocations.d.ts CHANGED
@@ -43,5 +43,11 @@ declare const locations: {
43
43
  zoom: number;
44
44
  pitch: number;
45
45
  };
46
+ alps: {
47
+ lng: number;
48
+ lat: number;
49
+ zoom: number;
50
+ pitch: number;
51
+ };
46
52
  };
47
53
  export default locations;
package/dist/maplibre/MapStyle/storyLocations.js CHANGED
@@ -16,6 +16,12 @@ const locations = {
16
16
  lat: 48.77521391139953,
17
17
  zoom: 16,
18
18
  pitch: 45
19
+ },
20
+ alps: {
21
+ lng: 10.01,
22
+ lat: 47.87,
23
+ zoom: 6.54,
24
+ pitch: 0
19
25
  }
20
26
  };
21
27
  export default locations;
package/dist/maplibre/MapStyle/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  interface StyleOptions {
2
2
  enableBuildingExtrusions?: boolean;
3
+ enableHillshade?: boolean;
3
4
  places?: {
4
5
  showLabels?: boolean;
5
6
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@swr-data-lab/components",
3
3
  "description": "SWR Data Lab component library",
4
- "version": "2.33.1",
4
+ "version": "2.34.1",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",