@swr-data-lab/components 2.4.1 → 2.4.3

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 (4) hide show
  1. package/dist/maplibre/Map/Map.svelte +3 -1
  2. package/dist/maplibre/MapStyle/components/Roads.js +80 -194
  3. package/dist/maplibre/MapStyle/tokens.js +1 -1
  4. package/package.json +1 -1
package/dist/maplibre/Map/Map.svelte CHANGED
@@ -3,7 +3,6 @@ import { onMount, onDestroy, getContext, hasContext } from 'svelte';
3
3
  import { createMapContext, MapContext } from '../context.svelte.js';
4
4
  import {} from '../types';
5
5
  import FallbackStyle from './FallbackStyle';
6
- import { derived } from 'svelte/store';
7
6
  let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation: receivedInitialLocation,
8
7
  // Future: This should become bindable.readonly when that becomes
9
8
  // available, see: https://github.com/sveltejs/svelte/issues/7712
@@ -127,6 +126,9 @@ const handleDebugCopyLocationClick = (e) => {
127
126
  padding: 2px;
128
127
  font-family: monospace;
129
128
  }
129
+ .debug li {
130
+ list-style: none;
131
+ }
130
132
  .debug button {
131
133
  appearance: none;
132
134
  background: transparent;
package/dist/maplibre/MapStyle/components/Roads.js CHANGED
@@ -15,13 +15,17 @@ const motorway = {
15
15
  [6, 1],
16
16
  [7, 1.5],
17
17
  [11, 2],
18
- [14, 12]
18
+ [12, 3],
19
+ [13, 5],
20
+ [14, 9]
19
21
  ]
20
22
  },
21
23
  line_opacity: {
22
24
  stops: [
23
25
  [6, 0],
24
- [7, 1]
26
+ [7, 0.8],
27
+ [11, 0.8],
28
+ [12, 1]
25
29
  ]
26
30
  }
27
31
  };
@@ -31,69 +35,57 @@ const motorway_case = {
31
35
  stops: [
32
36
  [10, 0],
33
37
  [11, 2],
34
- [14, 14]
38
+ [12, 5],
39
+ [13, 7],
40
+ [14, 11]
35
41
  ]
36
42
  }
37
43
  };
38
44
  const motorway_link = {
39
- line_width: {
40
- stops: [
41
- [6, 0],
42
- [7, 1],
43
- [12, 2],
44
- [14, 6]
45
- ]
46
- }
45
+ paint: {
46
+ 'line-color': tokens.street_primary,
47
+ 'line-width': motorway.line_width,
48
+ 'line-opacity': {
49
+ stops: [
50
+ [6, 0],
51
+ [7, 1]
52
+ ]
53
+ }
54
+ },
55
+ layout: street_layout
47
56
  };
48
57
  const motorway_link_case = {
49
- line_width: {
50
- stops: [
51
- [6, 0],
52
- [7, 2],
53
- [12, 3],
54
- [14, 8]
55
- ]
56
- }
58
+ paint: {
59
+ 'line-color': tokens.street_primary_case,
60
+ 'line-width': motorway_case.line_width
61
+ },
62
+ layout: case_layout
57
63
  };
58
64
  const street_primary = {
59
- line_color: tokens.street_primary,
60
- line_width: {
61
- stops: [
62
- [8, 0],
63
- [13, 1],
64
- [15, 2],
65
- [16, 10],
66
- [18, 34],
67
- [19, 70],
68
- [20, 140]
69
- ]
65
+ paint: {
66
+ 'line-color': tokens.street_primary,
67
+ 'line-width': motorway.line_width,
68
+ 'line-opacity': {
69
+ stops: [
70
+ [8, 0],
71
+ [9, 1]
72
+ ]
73
+ }
70
74
  },
71
- line_opacity: {
72
- stops: [
73
- [8, 0],
74
- [9, 1]
75
- ]
76
- }
75
+ layout: street_layout
77
76
  };
78
77
  const street_primary_case = {
79
- line_color: tokens.street_primary_case,
80
- line_width: {
81
- stops: [
82
- [8, 0],
83
- [13, 2],
84
- [15, 4],
85
- [16, 12],
86
- [18, 36],
87
- [19, 74],
88
- [20, 144]
89
- ]
78
+ paint: {
79
+ 'line-color': tokens.street_primary_case,
80
+ 'line-width': motorway_case.line_width,
81
+ 'line-opacity': {
82
+ stops: [
83
+ [8, 0],
84
+ [9, 1]
85
+ ]
86
+ }
90
87
  },
91
- line_opacity: {
92
- stops: [
93
- [8, 0],
94
- [9, 1]
95
- ]
96
- }
88
+ layout: case_layout
97
89
  };
98
90
  const street_secondary = {
99
91
  line_color: tokens.street_secondary,
@@ -381,33 +373,21 @@ export default function makeRoads() {
381
373
  ...street_secondary_case
382
374
  },
383
375
  {
376
+ ...street_primary_case,
384
377
  id: 'bridge-street-primary-link:case',
385
378
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'primary'], ['==', 'link', true]],
386
- paint: {
387
- 'line-color': street_primary.line_color,
388
- 'line-width': street_primary.line_width
389
- },
390
- layout: case_layout,
391
379
  minzoom: 13
392
380
  },
393
381
  {
382
+ ...motorway_link_case,
394
383
  id: 'bridge-street-trunk-link:case',
395
384
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'trunk'], ['==', 'link', true]],
396
- paint: {
397
- 'line-color': motorway_case.line_color,
398
- 'line-width': motorway_link_case.line_width
399
- },
400
- layout: case_layout,
401
385
  minzoom: 13
402
386
  },
403
387
  {
388
+ ...motorway_link_case,
404
389
  id: 'bridge-street-motorway-link:case',
405
390
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'motorway'], ['==', 'link', true]],
406
- paint: {
407
- 'line-color': motorway_case.line_color,
408
- 'line-width': motorway_link_case.line_width
409
- },
410
- layout: case_layout,
411
391
  minzoom: 12
412
392
  },
413
393
  {
@@ -421,13 +401,9 @@ export default function makeRoads() {
421
401
  ...street_secondary_case
422
402
  },
423
403
  {
404
+ ...street_primary_case,
424
405
  id: 'bridge-street-primary:case',
425
- filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'primary'], ['!=', 'link', true]],
426
- paint: {
427
- 'line-color': street_primary_case.line_color,
428
- 'line-width': street_primary_case.line_width
429
- },
430
- layout: case_layout
406
+ filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'primary'], ['!=', 'link', true]]
431
407
  },
432
408
  {
433
409
  id: 'bridge-street-trunk:case',
@@ -568,34 +544,21 @@ export default function makeRoads() {
568
544
  minzoom: 13
569
545
  },
570
546
  {
547
+ ...street_primary_case,
571
548
  id: 'bridge-street-primary-link',
572
549
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'primary'], ['==', 'link', true]],
573
- paint: {
574
- 'line-color': street_primary.line_color,
575
- 'line-width': street_primary.line_width
576
- },
577
- layout: street_layout,
578
550
  minzoom: 13
579
551
  },
580
552
  {
553
+ ...street_primary,
581
554
  id: 'bridge-street-trunk-link',
582
555
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'trunk'], ['==', 'link', true]],
583
- paint: {
584
- 'line-color': tokens.street_primary,
585
- 'line-width': motorway_link.line_width
586
- },
587
- layout: street_layout,
588
556
  minzoom: 13
589
557
  },
590
558
  {
559
+ ...motorway_link,
591
560
  id: 'bridge-street-motorway-link',
592
561
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'motorway'], ['==', 'link', true]],
593
- paint: {
594
- 'line-color': tokens.street_primary,
595
- 'line-width': motorway_link.line_width,
596
- 'line-opacity': motorway.line_opacity
597
- },
598
- layout: street_layout,
599
562
  minzoom: 12
600
563
  },
601
564
  {
@@ -640,27 +603,12 @@ export default function makeRoads() {
640
603
  {
641
604
  id: 'bridge-street-primary',
642
605
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'primary'], ['!=', 'link', true]],
643
- paint: {
644
- 'line-color': street_primary.line_color,
645
- 'line-width': street_primary.line_width,
646
- 'line-opacity': {
647
- stops: [
648
- [8, 0],
649
- [9, 1]
650
- ]
651
- }
652
- },
653
- layout: street_layout
606
+ ...street_primary
654
607
  },
655
608
  {
656
609
  id: 'bridge-street-trunk',
657
610
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'trunk'], ['!=', 'link', true]],
658
- paint: {
659
- 'line-color': tokens.street_primary,
660
- 'line-width': motorway.line_width,
661
- 'line-opacity': motorway.line_opacity
662
- },
663
- layout: street_layout
611
+ ...street_primary
664
612
  },
665
613
  {
666
614
  id: 'bridge-street-motorway',
@@ -773,20 +721,19 @@ export default function makeRoads() {
773
721
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'secondary'], ['==', 'link', true]],
774
722
  paint: {
775
723
  ...street_secondary_case.paint,
776
- 'line-dasharray': [1, 0.3],
724
+ 'line-dasharray': [1, 0.3]
777
725
  },
778
726
  layout: street_secondary_case.layout,
779
727
  minzoom: 13
780
728
  },
781
729
  {
730
+ ...street_primary,
782
731
  id: 'tunnel-street-primary-link:case',
783
732
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'primary'], ['==', 'link', true]],
784
733
  paint: {
785
- 'line-color': street_primary_case.line_color,
786
- 'line-dasharray': [1, 0.3],
787
- 'line-width': street_primary_case.line_width
734
+ ...street_primary.paint,
735
+ 'line-dasharray': [1, 0.3]
788
736
  },
789
- layout: case_layout,
790
737
  minzoom: 13
791
738
  },
792
739
  {
@@ -800,14 +747,13 @@ export default function makeRoads() {
800
747
  minzoom: 13
801
748
  },
802
749
  {
750
+ ...motorway_link_case,
803
751
  id: 'tunnel-street-motorway-link:case',
804
752
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'motorway'], ['==', 'link', true]],
805
753
  paint: {
806
- 'line-color': motorway_case.line_color,
807
- 'line-width': motorway_link_case.line_width,
754
+ ...motorway_link_case.paint,
808
755
  'line-dasharray': [1, 0.3]
809
756
  },
810
- layout: case_layout,
811
757
  minzoom: 12
812
758
  },
813
759
  {
@@ -821,14 +767,13 @@ export default function makeRoads() {
821
767
  ...street_secondary_case
822
768
  },
823
769
  {
770
+ ...street_primary_case,
824
771
  id: 'tunnel-street-primary:case',
825
772
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'primary'], ['!=', 'link', true]],
826
773
  paint: {
827
- 'line-color': tokens.street_primary_case,
828
- 'line-width': street_primary_case.line_width,
774
+ ...street_primary_case.paint,
829
775
  'line-dasharray': [1, 0.3]
830
- },
831
- layout: case_layout
776
+ }
832
777
  },
833
778
  {
834
779
  id: 'tunnel-street-trunk:case',
@@ -976,34 +921,24 @@ export default function makeRoads() {
976
921
  minzoom: 13
977
922
  },
978
923
  {
924
+ ...street_primary,
979
925
  id: 'tunnel-street-primary-link',
980
926
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'primary'], ['==', 'link', true]],
981
- paint: {
982
- 'line-color': street_primary.line_color,
983
- 'line-width': street_primary.line_width
984
- },
985
- layout: street_layout,
986
927
  minzoom: 13
987
928
  },
988
929
  {
930
+ ...motorway_link,
989
931
  id: 'tunnel-street-trunk-link',
990
932
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'trunk'], ['==', 'link', true]],
991
- paint: {
992
- 'line-color': tokens.street_primary,
993
- 'line-width': motorway_link.line_width
994
- },
995
- layout: street_layout,
996
933
  minzoom: 13
997
934
  },
998
935
  {
936
+ ...motorway_link,
999
937
  id: 'tunnel-street-motorway-link',
1000
938
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'motorway'], ['==', 'link', true]],
1001
939
  paint: {
1002
- 'line-color': tokens.street_primary,
1003
- 'line-width': motorway_link.line_width,
1004
- 'line-opacity': motorway.line_opacity
940
+ ...motorway_link.paint
1005
941
  },
1006
- layout: street_layout,
1007
942
  minzoom: 12
1008
943
  },
1009
944
  {
@@ -1046,19 +981,9 @@ export default function makeRoads() {
1046
981
  layout: street_layout
1047
982
  },
1048
983
  {
984
+ ...street_primary,
1049
985
  id: 'tunnel-street-primary',
1050
- filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'primary'], ['!=', 'link', true]],
1051
- paint: {
1052
- 'line-color': street_primary.line_color,
1053
- 'line-width': street_primary.line_width,
1054
- 'line-opacity': {
1055
- stops: [
1056
- [8, 0],
1057
- [9, 1]
1058
- ]
1059
- }
1060
- },
1061
- layout: street_layout
986
+ filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'primary'], ['!=', 'link', true]]
1062
987
  },
1063
988
  {
1064
989
  id: 'tunnel-street-trunk',
@@ -1214,6 +1139,7 @@ export default function makeRoads() {
1214
1139
  ...street_secondary_case
1215
1140
  },
1216
1141
  {
1142
+ ...street_primary_case,
1217
1143
  id: 'street-primary-link:case',
1218
1144
  filter: [
1219
1145
  'all',
@@ -1222,14 +1148,10 @@ export default function makeRoads() {
1222
1148
  ['in', 'kind', 'primary'],
1223
1149
  ['==', 'link', true]
1224
1150
  ],
1225
- paint: {
1226
- 'line-color': tokens.street_primary_case,
1227
- 'line-width': street_primary_case.line_width
1228
- },
1229
- layout: case_layout,
1230
1151
  minzoom: 13
1231
1152
  },
1232
1153
  {
1154
+ ...motorway_link_case,
1233
1155
  id: 'street-trunk-link:case',
1234
1156
  filter: [
1235
1157
  'all',
@@ -1238,14 +1160,10 @@ export default function makeRoads() {
1238
1160
  ['in', 'kind', 'trunk'],
1239
1161
  ['==', 'link', true]
1240
1162
  ],
1241
- paint: {
1242
- 'line-color': motorway_case.line_color,
1243
- 'line-width': motorway_link_case.line_width
1244
- },
1245
- layout: case_layout,
1246
1163
  minzoom: 13
1247
1164
  },
1248
1165
  {
1166
+ ...motorway_link_case,
1249
1167
  id: 'street-motorway-link:case',
1250
1168
  filter: [
1251
1169
  'all',
@@ -1254,11 +1172,6 @@ export default function makeRoads() {
1254
1172
  ['in', 'kind', 'motorway'],
1255
1173
  ['==', 'link', true]
1256
1174
  ],
1257
- paint: {
1258
- 'line-color': motorway_case.line_color,
1259
- 'line-width': motorway_link_case.line_width
1260
- },
1261
- layout: case_layout,
1262
1175
  minzoom: 12
1263
1176
  },
1264
1177
  {
@@ -1284,6 +1197,7 @@ export default function makeRoads() {
1284
1197
  ...street_secondary_case
1285
1198
  },
1286
1199
  {
1200
+ ...street_primary_case,
1287
1201
  id: 'street-primary:case',
1288
1202
  filter: [
1289
1203
  'all',
@@ -1291,12 +1205,7 @@ export default function makeRoads() {
1291
1205
  ['!=', 'tunnel', true],
1292
1206
  ['in', 'kind', 'primary'],
1293
1207
  ['!=', 'link', true]
1294
- ],
1295
- paint: {
1296
- 'line-color': street_primary_case.line_color,
1297
- 'line-width': street_primary_case.line_width
1298
- },
1299
- layout: case_layout
1208
+ ]
1300
1209
  },
1301
1210
  {
1302
1211
  id: 'street-trunk:case',
@@ -1463,6 +1372,7 @@ export default function makeRoads() {
1463
1372
  minzoom: 13
1464
1373
  },
1465
1374
  {
1375
+ ...street_primary,
1466
1376
  id: 'street-primary-link',
1467
1377
  filter: [
1468
1378
  'all',
@@ -1471,14 +1381,10 @@ export default function makeRoads() {
1471
1381
  ['in', 'kind', 'primary'],
1472
1382
  ['==', 'link', true]
1473
1383
  ],
1474
- paint: {
1475
- 'line-color': street_primary.line_color,
1476
- 'line-width': street_primary.line_width
1477
- },
1478
- layout: street_layout,
1479
1384
  minzoom: 13
1480
1385
  },
1481
1386
  {
1387
+ ...motorway_link,
1482
1388
  id: 'street-trunk-link',
1483
1389
  filter: [
1484
1390
  'all',
@@ -1487,14 +1393,10 @@ export default function makeRoads() {
1487
1393
  ['in', 'kind', 'trunk'],
1488
1394
  ['==', 'link', true]
1489
1395
  ],
1490
- paint: {
1491
- 'line-color': tokens.street_primary,
1492
- 'line-width': motorway_link.line_width
1493
- },
1494
- layout: street_layout,
1495
1396
  minzoom: 13
1496
1397
  },
1497
1398
  {
1399
+ ...motorway_link,
1498
1400
  id: 'street-motorway-link',
1499
1401
  filter: [
1500
1402
  'all',
@@ -1503,12 +1405,6 @@ export default function makeRoads() {
1503
1405
  ['in', 'kind', 'motorway'],
1504
1406
  ['==', 'link', true]
1505
1407
  ],
1506
- paint: {
1507
- 'line-color': tokens.street_primary,
1508
- 'line-width': motorway_link.line_width,
1509
- 'line-opacity': motorway.line_opacity
1510
- },
1511
- layout: street_layout,
1512
1408
  minzoom: 12
1513
1409
  },
1514
1410
  {
@@ -1563,6 +1459,7 @@ export default function makeRoads() {
1563
1459
  layout: street_layout
1564
1460
  },
1565
1461
  {
1462
+ ...street_primary,
1566
1463
  id: 'street-primary',
1567
1464
  filter: [
1568
1465
  'all',
@@ -1570,18 +1467,7 @@ export default function makeRoads() {
1570
1467
  ['!=', 'tunnel', true],
1571
1468
  ['in', 'kind', 'primary'],
1572
1469
  ['!=', 'link', true]
1573
- ],
1574
- paint: {
1575
- 'line-color': street_primary.line_color,
1576
- 'line-width': street_primary.line_width,
1577
- 'line-opacity': {
1578
- stops: [
1579
- [8, 0],
1580
- [9, 1]
1581
- ]
1582
- }
1583
- },
1584
- layout: street_layout
1470
+ ]
1585
1471
  },
1586
1472
  {
1587
1473
  id: 'street-trunk',
package/dist/maplibre/MapStyle/tokens.js CHANGED
@@ -10,7 +10,7 @@ const tokens = {
10
10
  grass: 'hsl(140, 27%, 96%)',
11
11
  grass_dark: 'hsl(148, 52%, 94%)',
12
12
  street_primary: 'hsl(0, 0%, 96%)',
13
- street_primary_case: 'hsl(0, 0%, 75%)',
13
+ street_primary_case: 'hsl(240, 1%, 79%)',
14
14
  street_secondary: 'hsl(0, 0%, 95%)',
15
15
  street_secondary_case: 'hsl(0, 0%, 75%)',
16
16
  street_tertiary: 'hsl(0, 0%, 95%)',
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.4.1",
4
+ "version": "2.4.3",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",