Offline-capable geomap, meant for storing location bookmarks
chore: cleanup fade-in of regional features in tiles
- parks, waterways, rails, bridges
+87
-22
+70
-12
www/utils/layers.ts
+70
-12
www/utils/layers.ts
···
21
21
const COLOR_GRASS_2 = 'hsl(70, 60%, 81%)'
22
22
const COLOR_RAIL = 'hsl(34, 12%, 66%)'
23
23
const COLOR_SAND = 'hsl(54, 81%, 53%)'
24
+
const MZ = ['coalesce', ['get', 'mz'], 0]
25
+
26
+
/**
27
+
* Features with mz ≤ threshold show at target opacity; others are hidden.
28
+
* @param zFinish - Opacity is 1 (or `opacity`)
29
+
* @param zStart - Opacity is at 0
30
+
* @param opacity - custom opacity to complete at
31
+
*/
32
+
const mzFade = (
33
+
zFinish: number,
34
+
zStart: number,
35
+
opacity: any = 1,
36
+
) => [zStart, ['case', ['<=', MZ, zFinish], opacity, 0]]
37
+
38
+
const WATER_OPACITY = ['case', ['==', ['get', 'intermittent'], 1], 0.7, 1]
24
39
const WATER_LINE = {
25
40
'line-color': COLOR_WATER,
26
-
'line-opacity': 1,
41
+
'line-opacity': [
42
+
'interpolate',
43
+
['linear'],
44
+
['zoom'],
45
+
8,
46
+
0,
47
+
...mzFade(8, 9),
48
+
...mzFade(11, 12),
49
+
13,
50
+
1,
51
+
],
27
52
'line-width': { 'base': 1.4, 'stops': [[8, 1], [20, 8]] },
28
53
}
29
54
···
70
95
'filter': [ALL, POLYGON, ['!=', 'brunnel', 'tunnel']],
71
96
'paint': {
72
97
'fill-color': COLOR_WATER,
73
-
'fill-opacity': ['case', ['==', ['get', 'intermittent'], 1], 0.7, 1],
98
+
'fill-opacity': [
99
+
'interpolate',
100
+
['linear'],
101
+
['zoom'],
102
+
...mzFade(9, 10, WATER_OPACITY),
103
+
...mzFade(10, 11, WATER_OPACITY),
104
+
...mzFade(11, 12, WATER_OPACITY),
105
+
...mzFade(12, 13, WATER_OPACITY),
106
+
...mzFade(13, 14, WATER_OPACITY),
107
+
15,
108
+
WATER_OPACITY,
109
+
],
74
110
},
75
111
},
76
112
{
···
184
220
'paint': {
185
221
'fill-antialias': true,
186
222
'fill-color': 'rgba(222, 211, 190, 1)',
187
-
// Per-tier fade: each building's "mz" attribute (12/13/14) controls
188
-
// when it becomes visible. Interpolation between stops produces a
189
-
// smooth one-zoom-level fade for each tier.
190
223
'fill-opacity': [
191
224
'interpolate',
192
225
['linear'],
193
226
['zoom'],
194
-
11,
195
-
0,
196
227
12,
197
-
['case', ['<=', ['get', 'mz'], 12], 1, 0],
198
-
13,
199
-
['case', ['<=', ['get', 'mz'], 13], 1, 0],
200
-
14,
228
+
0,
229
+
...mzFade(12, 13),
230
+
...mzFade(13, 14),
231
+
15,
201
232
1,
202
233
],
203
234
'fill-outline-color': 'rgba(212, 177, 146, 0.5)',
···
442
473
'filter': ['in', 'class', 'rail', 'transit'],
443
474
'paint': {
444
475
'line-color': COLOR_RAIL,
445
-
'line-opacity': { 'base': 1, 'stops': [[8, 0], [16, 1]] },
476
+
'line-opacity': [
477
+
'interpolate',
478
+
['linear'],
479
+
['zoom'],
480
+
8,
481
+
0,
482
+
...mzFade(8, 9, 0.125),
483
+
...mzFade(9, 10, 0.25),
484
+
...mzFade(10, 11, 0.375),
485
+
...mzFade(11, 12, 0.5),
486
+
...mzFade(12, 13, 0.625),
487
+
...mzFade(13, 14, 0.75),
488
+
...mzFade(14, 15, 0.875),
489
+
16,
490
+
1,
491
+
],
446
492
},
447
493
},
448
494
{
···
485
531
'paint': {
486
532
'line-color': '#dedede',
487
533
'line-gap-width': { 'base': 1.55, 'stops': [[4, 0.25], [20, 30]] },
534
+
'line-opacity': [
535
+
'interpolate', ['linear'], ['zoom'],
536
+
13, [...MATCH, 'tertiary', 0, 'minor', 0, 1],
537
+
14, [...MATCH, 'minor', 0, 1],
538
+
16, 1,
539
+
],
488
540
'line-width': { 'base': 1.6, 'stops': [[12, 0.5], [20, 10]] },
489
541
},
490
542
},
···
502
554
'layout': { 'line-cap': 'round', 'line-join': 'round' },
503
555
'paint': {
504
556
'line-color': [...MATCH, 'minor', '#efefef', WHITE],
557
+
'line-opacity': [
558
+
'interpolate', ['linear'], ['zoom'],
559
+
13, [...MATCH, 'tertiary', 0, 'minor', 0, 1],
560
+
14, [...MATCH, 'minor', 0, 1],
561
+
16, 1,
562
+
],
505
563
'line-width': { 'base': 1.4, 'stops': [[6, 0.5], [20, 30]] },
506
564
},
507
565
},