@swr-data-lab/components 2.19.1 → 2.20.0
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.
- package/dist/maplibre/InspectControl/InspectControl.svelte +161 -0
- package/dist/maplibre/InspectControl/InspectControl.svelte.d.ts +7 -0
- package/dist/maplibre/InspectControl/index.d.ts +2 -0
- package/dist/maplibre/InspectControl/index.js +2 -0
- package/dist/maplibre/MapStyle/SWRDataLabDark.d.ts +1 -3
- package/dist/maplibre/MapStyle/SWRDataLabDark.js +4 -1
- package/dist/maplibre/MapStyle/SWRDataLabLight.d.ts +1 -3
- package/dist/maplibre/MapStyle/icons/pin-14-dark.svg +3 -3
- package/dist/maplibre/MapStyle/sprite/sprite.png +0 -0
- package/dist/maplibre/MapStyle/sprite/sprite@2x.png +0 -0
- package/dist/maplibre/MapStyle/types.d.ts +7 -0
- package/dist/maplibre/MapStyle/types.js +1 -0
- package/package.json +9 -8
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
<script lang="ts">import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
|
|
2
|
+
import maplibre, {} from 'maplibre-gl';
|
|
3
|
+
import MapControl from '../MapControl/MapControl.svelte';
|
|
4
|
+
const { position = 'bottom-left' } = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<MapControl
|
|
8
|
+
control={new MaplibreInspect({
|
|
9
|
+
popup: new maplibre.Popup({ closeButton: false, closeOnClick: false })
|
|
10
|
+
})}
|
|
11
|
+
{position}
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<style>:global(.maplibregl-popup) {
|
|
15
|
+
display: flex;
|
|
16
|
+
left: 0;
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 0;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
will-change: transform;
|
|
22
|
+
}
|
|
23
|
+
:global(.maplibregl-popup-anchor-top),
|
|
24
|
+
:global(.maplibregl-popup-anchor-top-left),
|
|
25
|
+
:global(.maplibregl-popup-anchor-top-right) {
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
}
|
|
28
|
+
:global(.maplibregl-popup-anchor-bottom),
|
|
29
|
+
:global(.maplibregl-popup-anchor-bottom-left),
|
|
30
|
+
:global(.maplibregl-popup-anchor-bottom-right) {
|
|
31
|
+
flex-direction: column-reverse;
|
|
32
|
+
}
|
|
33
|
+
:global(.maplibregl-popup-anchor-left) {
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
}
|
|
36
|
+
:global(.maplibregl-popup-anchor-right) {
|
|
37
|
+
flex-direction: row-reverse;
|
|
38
|
+
}
|
|
39
|
+
:global(.maplibregl-popup-tip) {
|
|
40
|
+
border: 10px solid transparent;
|
|
41
|
+
height: 0;
|
|
42
|
+
width: 0;
|
|
43
|
+
z-index: 1;
|
|
44
|
+
}
|
|
45
|
+
:global(.maplibregl-popup-anchor-top) :global(.maplibregl-popup-tip) {
|
|
46
|
+
align-self: center;
|
|
47
|
+
border-bottom-color: #fff;
|
|
48
|
+
border-top: none;
|
|
49
|
+
}
|
|
50
|
+
:global(.maplibregl-popup-anchor-top-left) :global(.maplibregl-popup-tip) {
|
|
51
|
+
align-self: flex-start;
|
|
52
|
+
border-bottom-color: #fff;
|
|
53
|
+
border-left: none;
|
|
54
|
+
border-top: none;
|
|
55
|
+
}
|
|
56
|
+
:global(.maplibregl-popup-anchor-top-right) :global(.maplibregl-popup-tip) {
|
|
57
|
+
align-self: flex-end;
|
|
58
|
+
border-bottom-color: #fff;
|
|
59
|
+
border-right: none;
|
|
60
|
+
border-top: none;
|
|
61
|
+
}
|
|
62
|
+
:global(.maplibregl-popup-anchor-bottom) :global(.maplibregl-popup-tip) {
|
|
63
|
+
align-self: center;
|
|
64
|
+
border-bottom: none;
|
|
65
|
+
border-top-color: #fff;
|
|
66
|
+
}
|
|
67
|
+
:global(.maplibregl-popup-anchor-bottom-left) :global(.maplibregl-popup-tip) {
|
|
68
|
+
align-self: flex-start;
|
|
69
|
+
border-bottom: none;
|
|
70
|
+
border-left: none;
|
|
71
|
+
border-top-color: #fff;
|
|
72
|
+
}
|
|
73
|
+
:global(.maplibregl-popup-anchor-bottom-right) :global(.maplibregl-popup-tip) {
|
|
74
|
+
align-self: flex-end;
|
|
75
|
+
border-bottom: none;
|
|
76
|
+
border-right: none;
|
|
77
|
+
border-top-color: #fff;
|
|
78
|
+
}
|
|
79
|
+
:global(.maplibregl-popup-anchor-left) :global(.maplibregl-popup-tip) {
|
|
80
|
+
align-self: center;
|
|
81
|
+
border-left: none;
|
|
82
|
+
border-right-color: #fff;
|
|
83
|
+
}
|
|
84
|
+
:global(.maplibregl-popup-anchor-right) :global(.maplibregl-popup-tip) {
|
|
85
|
+
align-self: center;
|
|
86
|
+
border-left-color: #fff;
|
|
87
|
+
border-right: none;
|
|
88
|
+
}
|
|
89
|
+
:global(.maplibregl-popup-close-button) {
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
border: 0;
|
|
92
|
+
border-radius: 0 3px 0 0;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
position: absolute;
|
|
95
|
+
right: 0;
|
|
96
|
+
top: 0;
|
|
97
|
+
}
|
|
98
|
+
:global(.maplibregl-popup-close-button:hover) {
|
|
99
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
100
|
+
}
|
|
101
|
+
:global(.maplibregl-popup-content) {
|
|
102
|
+
background: #fff;
|
|
103
|
+
border-radius: 3px;
|
|
104
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
105
|
+
padding: 15px 10px;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
109
|
+
:global(.maplibregl-popup-anchor-top-left) :global(.maplibregl-popup-content) {
|
|
110
|
+
border-top-left-radius: 0;
|
|
111
|
+
}
|
|
112
|
+
:global(.maplibregl-popup-anchor-top-right) :global(.maplibregl-popup-content) {
|
|
113
|
+
border-top-right-radius: 0;
|
|
114
|
+
}
|
|
115
|
+
:global(.maplibregl-popup-anchor-bottom-left) :global(.maplibregl-popup-content) {
|
|
116
|
+
border-bottom-left-radius: 0;
|
|
117
|
+
}
|
|
118
|
+
:global(.maplibregl-popup-anchor-bottom-right) :global(.maplibregl-popup-content) {
|
|
119
|
+
border-bottom-right-radius: 0;
|
|
120
|
+
}
|
|
121
|
+
:global(.maplibregl-popup-track-pointer) {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
:global(.maplibregl-popup-track-pointer) :global(*) {
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
-webkit-user-select: none;
|
|
127
|
+
-moz-user-select: none;
|
|
128
|
+
user-select: none;
|
|
129
|
+
}
|
|
130
|
+
:global(.maplibregl-inspect_popup) {
|
|
131
|
+
font-family: monospace;
|
|
132
|
+
display: table;
|
|
133
|
+
}
|
|
134
|
+
:global(.maplibregl-inspect_feature:not(:last-child)) {
|
|
135
|
+
border-bottom: 1px solid #ccc;
|
|
136
|
+
}
|
|
137
|
+
:global(.maplibregl-inspect_layer:before) {
|
|
138
|
+
content: "#";
|
|
139
|
+
}
|
|
140
|
+
:global(.maplibregl-inspect_layer) {
|
|
141
|
+
display: block;
|
|
142
|
+
font-weight: bold;
|
|
143
|
+
}
|
|
144
|
+
:global(.maplibregl-inspect_property) {
|
|
145
|
+
display: table-row;
|
|
146
|
+
}
|
|
147
|
+
:global(.maplibregl-inspect_property-value) {
|
|
148
|
+
display: table-cell;
|
|
149
|
+
word-break: break-all;
|
|
150
|
+
}
|
|
151
|
+
:global(.maplibregl-inspect_property-name) {
|
|
152
|
+
display: table-cell;
|
|
153
|
+
padding-right: 10px;
|
|
154
|
+
word-break: break-all;
|
|
155
|
+
}
|
|
156
|
+
:global(.maplibregl-ctrl-inspect) {
|
|
157
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
158
|
+
}
|
|
159
|
+
:global(.maplibregl-ctrl-map) {
|
|
160
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
161
|
+
}</style>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type ControlPosition } from 'maplibre-gl';
|
|
2
|
+
interface InspectControlProps {
|
|
3
|
+
position?: ControlPosition;
|
|
4
|
+
}
|
|
5
|
+
declare const InspectControl: import("svelte").Component<InspectControlProps, {}, "">;
|
|
6
|
+
type InspectControl = ReturnType<typeof InspectControl>;
|
|
7
|
+
export default InspectControl;
|
|
@@ -47,6 +47,9 @@ const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuil
|
|
|
47
47
|
const style = (opts) => {
|
|
48
48
|
const options = {
|
|
49
49
|
enableBuildingExtrusions: false,
|
|
50
|
+
roads: {
|
|
51
|
+
showLabels: true
|
|
52
|
+
},
|
|
50
53
|
...opts
|
|
51
54
|
};
|
|
52
55
|
return {
|
|
@@ -106,7 +109,7 @@ const style = (opts) => {
|
|
|
106
109
|
...admin,
|
|
107
110
|
// 7. Labels
|
|
108
111
|
...walkingLabels,
|
|
109
|
-
...roadLabels,
|
|
112
|
+
...(options.roads?.showLabels ? roadLabels : []),
|
|
110
113
|
// 8. Building extrusions
|
|
111
114
|
...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
|
|
112
115
|
// 8. Point labels
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path d="M6.99999 0.400375C8.23844 0.400375 9.32826 0.860324 10.2793 1.79588C11.2173 2.71867 11.6963 3.96368 11.6963 5.55858C11.6962 6.59513 11.3092 7.74429 10.5059 9.01073C9.72473 10.2421 8.45423 12.0402 6.99999 13.6269C5.54576 12.0402 4.27526 10.2421 3.49413 9.01073C2.69082 7.74429 2.30377 6.59513 2.30371 5.55858C2.30371 3.96368 2.78268 2.71867 3.7207 1.79588C4.67173 0.860322 5.76155 0.400377 6.99999 0.400375Z" fill="url(#paint0_linear_50_2)" stroke="black" stroke-width="0.5"/>
|
|
3
|
-
<path d="M9.
|
|
3
|
+
<path d="M9.23334 5.30945C9.23334 6.54289 8.23344 7.54279 7 7.54279C5.76656 7.54279 4.76666 6.54289 4.76666 5.30945C4.76666 4.07602 5.76656 3.07612 7 3.07612C8.23344 3.07612 9.23334 4.07602 9.23334 5.30945Z" fill="#252525" stroke="black" stroke-width="0.5"/>
|
|
4
4
|
<defs>
|
|
5
5
|
<linearGradient id="paint0_linear_50_2" x1="4" y1="1" x2="7" y2="13.7232" gradientUnits="userSpaceOnUse">
|
|
6
|
-
<stop stop-color="#
|
|
7
|
-
<stop offset="0.350962" stop-color="#
|
|
6
|
+
<stop stop-color="#D76CFF"/>
|
|
7
|
+
<stop offset="0.350962" stop-color="#D76CFF"/>
|
|
8
8
|
</linearGradient>
|
|
9
9
|
</defs>
|
|
10
10
|
</svg>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
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
|
+
"version": "2.20.0",
|
|
5
5
|
"author": "SWR Data Lab",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"type": "module",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@maplibre/maplibre-gl-geocoder": "^1.9.1",
|
|
35
|
+
"@maplibre/maplibre-gl-inspect": "^1.7.1",
|
|
35
36
|
"maplibre-gl": "^5.7.0",
|
|
36
37
|
"svelte-select": "^5.8.3"
|
|
37
38
|
},
|
|
@@ -39,14 +40,14 @@
|
|
|
39
40
|
"@semantic-release/changelog": "^6.0.3",
|
|
40
41
|
"@semantic-release/git": "^10.0.1",
|
|
41
42
|
"@semantic-release/npm": "^12.0.2",
|
|
42
|
-
"@storybook/addon-docs": "^9.1.
|
|
43
|
-
"@storybook/addon-links": "^9.1.
|
|
43
|
+
"@storybook/addon-docs": "^9.1.10",
|
|
44
|
+
"@storybook/addon-links": "^9.1.10",
|
|
44
45
|
"@storybook/addon-svelte-csf": "^5.0.8",
|
|
45
|
-
"@storybook/addon-vitest": "^9.1.
|
|
46
|
-
"@storybook/sveltekit": "^9.1.
|
|
46
|
+
"@storybook/addon-vitest": "^9.1.10",
|
|
47
|
+
"@storybook/sveltekit": "^9.1.10",
|
|
47
48
|
"@storybook/test-runner": "^0.23.0",
|
|
48
49
|
"@sveltejs/adapter-auto": "^6.1.0",
|
|
49
|
-
"@sveltejs/kit": "^2.43.
|
|
50
|
+
"@sveltejs/kit": "^2.43.7",
|
|
50
51
|
"@sveltejs/package": "^2.5.4",
|
|
51
52
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
52
53
|
"@types/geojson": "^7946.0.16",
|
|
@@ -64,10 +65,10 @@
|
|
|
64
65
|
"semantic-release": "^24.2.9",
|
|
65
66
|
"storybook": "^9.1.8",
|
|
66
67
|
"svelte": "^5.23.0",
|
|
67
|
-
"svelte-check": "^4.
|
|
68
|
+
"svelte-check": "^4.3.2",
|
|
68
69
|
"svelte-preprocess": "^6.0.3",
|
|
69
70
|
"typescript": "^5.9.2",
|
|
70
|
-
"vite": "^
|
|
71
|
+
"vite": "^7.1.7",
|
|
71
72
|
"vitest": "^3.1.1",
|
|
72
73
|
"wait-on": "^8.0.1"
|
|
73
74
|
},
|