solid-map-gl 1.0.0 → 1.1.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.
- package/README.md +20 -13
- package/dist/esm/index.js +1 -385
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/styles.css +1 -0
- package/dist/source/components/Control/index.jsx +4 -3
- package/dist/source/components/Image/index.jsx +2 -1
- package/dist/source/components/Layer/index.jsx +4 -4
- package/dist/source/components/MapGL/index.jsx +1 -1
- package/dist/types/components/Layer/index.d.ts +1 -1
- package/dist/types/components/MapGL/index.d.ts +9 -4
- package/dist/types/components/Marker/index.d.ts +2 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|

|
|
2
2
|
|
|
3
|
-
#
|
|
3
|
+
# Solid Mapbox GL JS
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
 -->
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+

|
|
8
|
+

|
|
10
9
|
|
|
11
10
|
[Solid](https://www.solidjs.com/) Component Library for [Mapbox GL JS.](https://github.com/mapbox/mapbox-gl-js) Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)
|
|
12
11
|
|
|
@@ -17,6 +16,8 @@
|
|
|
17
16
|
- [Interactive Map](#interactive-map)
|
|
18
17
|
- [Map with Source and Layer](#map-with-source-and-layer)
|
|
19
18
|
- [Map with GeoJSON Source](#map-with-geojson-source)
|
|
19
|
+
- [Examples](#examples)
|
|
20
|
+
- [Changelog](#changelog)
|
|
20
21
|
|
|
21
22
|
<br>
|
|
22
23
|
|
|
@@ -25,11 +26,11 @@
|
|
|
25
26
|
## Installation
|
|
26
27
|
|
|
27
28
|
```shell
|
|
28
|
-
yarn add
|
|
29
|
+
yarn add solid-map-gl
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
```shell
|
|
32
|
-
npm install --save
|
|
33
|
+
npm install --save solid-map-gl
|
|
33
34
|
```
|
|
34
35
|
|
|
35
36
|
### Optional Dependencies
|
|
@@ -68,7 +69,7 @@ To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox [access to
|
|
|
68
69
|
By default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.
|
|
69
70
|
|
|
70
71
|
```jsx
|
|
71
|
-
import MapGL from '
|
|
72
|
+
import MapGL from 'solid-map-gl'
|
|
72
73
|
|
|
73
74
|
<MapGL
|
|
74
75
|
options={{
|
|
@@ -88,7 +89,7 @@ In most cases, you will want the user to interact with the map. To do this, you
|
|
|
88
89
|
|
|
89
90
|
```jsx
|
|
90
91
|
import { createSignal } from 'solid-js'
|
|
91
|
-
import MapGL, { Viewport } from '
|
|
92
|
+
import MapGL, { Viewport } from 'solid-map-gl'
|
|
92
93
|
|
|
93
94
|
const [viewport, setViewport] = createSignal({
|
|
94
95
|
center: [-122.41, 37.78]
|
|
@@ -114,7 +115,7 @@ const [viewport, setViewport] = createSignal({
|
|
|
114
115
|
Except for layers of the `background` type, each layer needs to refer to a source. Either buy referencing the `id` in `sourceId` or by nesting the layer within the source component. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.
|
|
115
116
|
|
|
116
117
|
```jsx
|
|
117
|
-
import MapGL, { Source, Layer } from '
|
|
118
|
+
import MapGL, { Source, Layer } from 'solid-map-gl'
|
|
118
119
|
|
|
119
120
|
<MapGL
|
|
120
121
|
options={{
|
|
@@ -144,7 +145,7 @@ To draw a GeoJSON on a map, add `Source` with the `type` property set to `geojso
|
|
|
144
145
|
|
|
145
146
|
```jsx
|
|
146
147
|
import { createSignal } from 'solid-js'
|
|
147
|
-
import MapGL, { Source, Layer } from '
|
|
148
|
+
import MapGL, { Source, Layer } from 'solid-map-gl'
|
|
148
149
|
|
|
149
150
|
const [viewport, setViewport] = createSignal({
|
|
150
151
|
center: [-122.486052, 37.830348],
|
|
@@ -216,7 +217,7 @@ Here is an example using [deck.gl.](https://github.com/uber/deck.gl)
|
|
|
216
217
|
|
|
217
218
|
```jsx
|
|
218
219
|
import { createSignal } from 'solid-js'
|
|
219
|
-
import MapGL, { Source, Layer } from '
|
|
220
|
+
import MapGL, { Source, Layer } from 'solid-map-gl'
|
|
220
221
|
import { MapboxLayer } from '@deck.gl/mapbox'
|
|
221
222
|
import { ScatterplotLayer } from '@deck.gl/layers'
|
|
222
223
|
|
|
@@ -245,6 +246,12 @@ const myDeckLayer = new MapboxLayer({
|
|
|
245
246
|
</MapGL>
|
|
246
247
|
```
|
|
247
248
|
|
|
249
|
+
## Examples
|
|
250
|
+
|
|
251
|
+
### Coming Soon
|
|
252
|
+
|
|
248
253
|
## Changelog
|
|
249
254
|
|
|
250
255
|
- 1.0.0 - Initial release
|
|
256
|
+
- 1.1.0 - Bug fixing
|
|
257
|
+
- 1.2.0 - Bug fixing
|
package/dist/esm/index.js
CHANGED
|
@@ -1,386 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useTransition, createContext, onCleanup, onMount, createEffect, useContext, createUniqueId, createSignal } from 'solid-js';
|
|
3
|
-
import mapboxgl from 'mapbox-gl';
|
|
4
|
-
|
|
5
|
-
const _tmpl$$2 = template(`<main></main>`, 2);
|
|
6
|
-
const [pending, start] = useTransition();
|
|
7
|
-
const MapContext = createContext();
|
|
8
|
-
|
|
9
|
-
const useMap = () => useContext(MapContext);
|
|
10
|
-
|
|
11
|
-
const MapGL = props => {
|
|
12
|
-
let map;
|
|
13
|
-
let mapRef;
|
|
14
|
-
onCleanup(() => map.remove());
|
|
15
|
-
onMount(() => {
|
|
16
|
-
map = new mapboxgl.Map({ ...props.options,
|
|
17
|
-
container: mapRef,
|
|
18
|
-
bounds: props.viewport.bounds,
|
|
19
|
-
center: props.viewport.center,
|
|
20
|
-
zoom: props.viewport.zoom || null,
|
|
21
|
-
pitch: props.viewport.pitch || null,
|
|
22
|
-
bearing: props.viewport.bearing || null,
|
|
23
|
-
fitBoundsOptions: {
|
|
24
|
-
padding: props.viewport.padding
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
createEffect(() => props.onMouseMove && map.on('mousemove', event => props.onMouseMove(event.lngLat)));
|
|
29
|
-
|
|
30
|
-
const _onViewportChange = () => {
|
|
31
|
-
const viewport = {
|
|
32
|
-
center: map.getCenter(),
|
|
33
|
-
zoom: map.getZoom(),
|
|
34
|
-
pitch: map.getPitch(),
|
|
35
|
-
bearing: map.getBearing(),
|
|
36
|
-
padding: props.viewport.padding
|
|
37
|
-
};
|
|
38
|
-
props.onViewportChange(viewport);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
createEffect(() => props.onViewportChange && map.on('dragend', _onViewportChange).on('moveend', _onViewportChange).on('zoomend', _onViewportChange).on('rotateend', _onViewportChange).on('pitchend', _onViewportChange).on('boxzoomend', _onViewportChange));
|
|
42
|
-
createEffect(async () => {
|
|
43
|
-
if (!props.viewport.bounds) return; // await map.once('idle')
|
|
44
|
-
|
|
45
|
-
map.fitBounds(props.viewport.bounds, {
|
|
46
|
-
padding: props.viewport.padding
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
let index = 0;
|
|
50
|
-
createEffect(() => {
|
|
51
|
-
if (props.triggerResize) {
|
|
52
|
-
index = 0;
|
|
53
|
-
window.requestAnimationFrame(function loop() {
|
|
54
|
-
if (index < 15) {
|
|
55
|
-
index++;
|
|
56
|
-
window.requestAnimationFrame(loop);
|
|
57
|
-
start(() => map.resize());
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
return createComponent(MapContext.Provider, {
|
|
63
|
-
value: () => map,
|
|
64
|
-
|
|
65
|
-
get children() {
|
|
66
|
-
const _el$ = _tmpl$$2.cloneNode(true);
|
|
67
|
-
|
|
68
|
-
const _ref$ = mapRef;
|
|
69
|
-
typeof _ref$ === "function" ? _ref$(_el$) : mapRef = _el$;
|
|
70
|
-
|
|
71
|
-
_el$.style.setProperty("height", "100%");
|
|
72
|
-
|
|
73
|
-
_el$.style.setProperty("width", "100%");
|
|
74
|
-
|
|
75
|
-
insert(_el$, () => props.children);
|
|
76
|
-
|
|
77
|
-
effect(_p$ => {
|
|
78
|
-
const _v$ = props.class || '',
|
|
79
|
-
_v$2 = props.classList;
|
|
80
|
-
|
|
81
|
-
_v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
|
|
82
|
-
_p$._v$2 = classList(_el$, _v$2, _p$._v$2);
|
|
83
|
-
return _p$;
|
|
84
|
-
}, {
|
|
85
|
-
_v$: undefined,
|
|
86
|
-
_v$2: undefined
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
return _el$;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
const SourceContext = createContext();
|
|
96
|
-
|
|
97
|
-
const useSource = () => useContext(SourceContext);
|
|
98
|
-
|
|
99
|
-
const SourceComponent = props => {
|
|
100
|
-
const map = useMap();
|
|
101
|
-
props.id = props.id || createUniqueId(); // Add Source
|
|
102
|
-
|
|
103
|
-
onMount(async () => {
|
|
104
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
105
|
-
!map().getSource(props.id) && map().addSource(props.id, props.source);
|
|
106
|
-
}); // Remove Source
|
|
107
|
-
|
|
108
|
-
onCleanup(() => {
|
|
109
|
-
map().getStyle().layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
|
|
110
|
-
map().getSource(props.id) && map().removeSource(props.id);
|
|
111
|
-
}); // Update GeoJSON Data
|
|
112
|
-
|
|
113
|
-
createEffect(async () => {
|
|
114
|
-
if (props.source.type !== 'geojson' && !props.source.data) return;
|
|
115
|
-
map().getSource(props.id) && map().getSource(props.id).setData(props.source.data);
|
|
116
|
-
});
|
|
117
|
-
return createComponent(SourceContext.Provider, {
|
|
118
|
-
get value() {
|
|
119
|
-
return {
|
|
120
|
-
source: props.id
|
|
121
|
-
};
|
|
122
|
-
},
|
|
123
|
-
|
|
124
|
-
get children() {
|
|
125
|
-
return props.children;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
const diff = (newProps = {}, prevProps = {}) => {
|
|
132
|
-
const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
|
|
133
|
-
return [...keys].reduce((acc, key) => {
|
|
134
|
-
const value = newProps[key];
|
|
135
|
-
|
|
136
|
-
if (value !== prevProps[key]) {
|
|
137
|
-
acc.push([key, value]);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
return acc;
|
|
141
|
-
}, []);
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
const Layer = props => {
|
|
145
|
-
const map = useMap();
|
|
146
|
-
const source = useSource();
|
|
147
|
-
props.id = props.id || createUniqueId(); // Add Layer
|
|
148
|
-
|
|
149
|
-
onMount(async () => {
|
|
150
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
151
|
-
if (map().getLayer(props.id)) return;
|
|
152
|
-
map().addLayer(props.layer || { ...props.style,
|
|
153
|
-
id: props.id,
|
|
154
|
-
source: source.source
|
|
155
|
-
}, props.beforeType ? map().getStyle().layers.find(l => l.type === props.beforeType).id : props.beforeId);
|
|
156
|
-
}); // Update Style
|
|
157
|
-
|
|
158
|
-
createEffect(prev => {
|
|
159
|
-
if (!props.style && map().getLayer(props.id)) return;
|
|
160
|
-
diff(props.style.paint, prev.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value));
|
|
161
|
-
diff(props.style.layout, prev.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value));
|
|
162
|
-
if (props.style.minzoom !== prev.minzoom || props.style.maxzoom !== prev.max) map().setLayerZoomRange(props.id, props.style.minzoom, props.style.maxzoom);
|
|
163
|
-
return props.style;
|
|
164
|
-
}, props.style); // Update Visibility
|
|
165
|
-
|
|
166
|
-
createEffect(async () => {
|
|
167
|
-
if (!props.visible) return;
|
|
168
|
-
!map().loaded() && (await map().once('styledata'));
|
|
169
|
-
map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', {
|
|
170
|
-
validate: false
|
|
171
|
-
});
|
|
172
|
-
}); // Update Filter
|
|
173
|
-
|
|
174
|
-
createEffect(async () => {
|
|
175
|
-
if (!props.filter) return;
|
|
176
|
-
!map().loaded() && (await map().once('styledata'));
|
|
177
|
-
map().setFilter(props.id, props.filter);
|
|
178
|
-
}); // Update Feature State
|
|
179
|
-
|
|
180
|
-
createEffect(async () => {
|
|
181
|
-
if (!props.featureState?.id) return;
|
|
182
|
-
map().loaded() ? null : await map().once('render');
|
|
183
|
-
map().removeFeatureState({
|
|
184
|
-
source: source.source,
|
|
185
|
-
sourceLayer: props.style['source-layer']
|
|
186
|
-
});
|
|
187
|
-
map().setFeatureState({
|
|
188
|
-
source: source.source,
|
|
189
|
-
sourceLayer: props.style['source-layer'],
|
|
190
|
-
id: props.featureState.id
|
|
191
|
-
}, props.featureState.state);
|
|
192
|
-
});
|
|
193
|
-
return props.children;
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
const Fog = props => {
|
|
197
|
-
const map = useMap(); // Add Fog Layer
|
|
198
|
-
|
|
199
|
-
onMount(async () => {
|
|
200
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
201
|
-
map().setFog(props.style);
|
|
202
|
-
}); // Remove Fog Layer
|
|
203
|
-
|
|
204
|
-
onCleanup(() => map().setFog(null)); // Update Visibility
|
|
205
|
-
|
|
206
|
-
createEffect(async () => {
|
|
207
|
-
if (props.visible === undefined) return;
|
|
208
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
209
|
-
map().setFog(props.visible ? props.style : null);
|
|
210
|
-
});
|
|
211
|
-
return props.children;
|
|
212
|
-
};
|
|
213
|
-
|
|
214
|
-
const Sky = props => {
|
|
215
|
-
const map = useMap();
|
|
216
|
-
const layerId = '_sky'; // Add Sky Layer
|
|
217
|
-
|
|
218
|
-
onMount(async () => {
|
|
219
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
220
|
-
!map().getLayer(layerId) && map().addLayer({ ...props.style,
|
|
221
|
-
id: layerId
|
|
222
|
-
});
|
|
223
|
-
}); // Remove Sky Layer
|
|
224
|
-
|
|
225
|
-
onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId)); // Update Visibility
|
|
226
|
-
|
|
227
|
-
createEffect(async () => {
|
|
228
|
-
if (props.visible === undefined) return;
|
|
229
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
230
|
-
map().setLayoutProperty(layerId, 'visibility', props.visible ? 'visible' : 'none');
|
|
231
|
-
});
|
|
232
|
-
return props.children;
|
|
233
|
-
};
|
|
234
|
-
|
|
235
|
-
const Terrain = props => {
|
|
236
|
-
const map = useMap();
|
|
237
|
-
const source = useSource(); // Add Terrain Layer
|
|
238
|
-
|
|
239
|
-
onMount(async () => {
|
|
240
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
241
|
-
map().setTerrain({ ...props.style,
|
|
242
|
-
source: source.source
|
|
243
|
-
});
|
|
244
|
-
}); // Remove Terrain Layer
|
|
245
|
-
|
|
246
|
-
onCleanup(() => map().setTerrain(null)); // Update Visibility
|
|
247
|
-
|
|
248
|
-
createEffect(async () => {
|
|
249
|
-
if (props.visible === undefined) return;
|
|
250
|
-
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
251
|
-
map().setTerrain(props.visible ? props.style : null);
|
|
252
|
-
});
|
|
253
|
-
return props.children;
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
const Control = props => {
|
|
257
|
-
const map = useMap();
|
|
258
|
-
const [control, setControl] = createSignal(null); // Add Control
|
|
259
|
-
|
|
260
|
-
onMount(async () => {
|
|
261
|
-
let control;
|
|
262
|
-
|
|
263
|
-
switch (props.type) {
|
|
264
|
-
case 'scale':
|
|
265
|
-
control = new mapboxgl.ScaleControl(props.options);
|
|
266
|
-
break;
|
|
267
|
-
|
|
268
|
-
case 'attribution':
|
|
269
|
-
control = new mapboxgl.AttributionControl(props.options);
|
|
270
|
-
break;
|
|
271
|
-
|
|
272
|
-
case 'fullscreen':
|
|
273
|
-
control = new mapboxgl.FullscreenControl(props.options);
|
|
274
|
-
break;
|
|
275
|
-
|
|
276
|
-
case 'geolocate':
|
|
277
|
-
control = new mapboxgl.GeolocateControl(props.options);
|
|
278
|
-
break;
|
|
279
|
-
|
|
280
|
-
default:
|
|
281
|
-
control = new mapboxgl.NavigationControl(props.options);
|
|
282
|
-
// case 'language':
|
|
283
|
-
// const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))
|
|
284
|
-
// .default
|
|
285
|
-
// control = new MapboxLanguage(props.options)
|
|
286
|
-
// break
|
|
287
|
-
// case 'traffic':
|
|
288
|
-
// const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))
|
|
289
|
-
// .default
|
|
290
|
-
// await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')
|
|
291
|
-
// control = new MapboxTraffic(props.options)
|
|
292
|
-
// break
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
map().addControl(control, props.position);
|
|
296
|
-
setControl(control);
|
|
297
|
-
});
|
|
298
|
-
onCleanup(() => map().removeControl(control()));
|
|
299
|
-
return props.children;
|
|
300
|
-
};
|
|
301
|
-
|
|
302
|
-
const _tmpl$$1 = template(`<div></div>`, 2);
|
|
303
|
-
|
|
304
|
-
const Marker = props => {
|
|
305
|
-
const map = useMap();
|
|
306
|
-
let marker = null; // Add Marker
|
|
307
|
-
|
|
308
|
-
onMount(async () => {
|
|
309
|
-
marker = new mapboxgl.Marker(props.options).setLngLat(props.lnglat).setPopup(props.children ? new mapboxgl.Popup().setDOMContent((() => {
|
|
310
|
-
const _el$ = _tmpl$$1.cloneNode(true);
|
|
311
|
-
|
|
312
|
-
insert(_el$, () => props.children);
|
|
313
|
-
|
|
314
|
-
return _el$;
|
|
315
|
-
})()) : null).addTo(map());
|
|
316
|
-
}); // Remove Marker
|
|
317
|
-
|
|
318
|
-
onCleanup(() => marker.remove()); // Update Position
|
|
319
|
-
|
|
320
|
-
createEffect(() => marker.setLngLat(props.lnglat));
|
|
321
|
-
return [];
|
|
322
|
-
};
|
|
323
|
-
|
|
324
|
-
const _tmpl$ = template(`<div></div>`, 2);
|
|
325
|
-
|
|
326
|
-
const Popup = props => {
|
|
327
|
-
const map = useMap();
|
|
328
|
-
let popup = null; // Add Popup
|
|
329
|
-
|
|
330
|
-
onMount(async () => {
|
|
331
|
-
popup = new mapboxgl.Popup(props.options).setLngLat(props.lnglat).setDOMContent((() => {
|
|
332
|
-
const _el$ = _tmpl$.cloneNode(true);
|
|
333
|
-
|
|
334
|
-
insert(_el$, () => props.children);
|
|
335
|
-
|
|
336
|
-
return _el$;
|
|
337
|
-
})()).addTo(map());
|
|
338
|
-
}); // Remove Popup
|
|
339
|
-
|
|
340
|
-
onCleanup(() => popup.remove()); // Update Position
|
|
341
|
-
|
|
342
|
-
createEffect(() => popup.setLngLat(props.lnglat)); // Update Content
|
|
343
|
-
|
|
344
|
-
createEffect(() => popup.setDOMContent((() => {
|
|
345
|
-
const _el$2 = _tmpl$.cloneNode(true);
|
|
346
|
-
|
|
347
|
-
insert(_el$2, () => props.children);
|
|
348
|
-
|
|
349
|
-
return _el$2;
|
|
350
|
-
})()));
|
|
351
|
-
return [];
|
|
352
|
-
};
|
|
353
|
-
|
|
354
|
-
const Image = props => {
|
|
355
|
-
const map = useMap(); // Add Image
|
|
356
|
-
|
|
357
|
-
onMount(() => {
|
|
358
|
-
if (props.url) {
|
|
359
|
-
map().loadImage(props.url, (error, image) => {
|
|
360
|
-
if (error) throw error;
|
|
361
|
-
!map().hasImage(props.id) && map().addImage(props.id, image);
|
|
362
|
-
});
|
|
363
|
-
} else {
|
|
364
|
-
!map().hasImage(props.id) && map().addImage(props.id, props.image, props.options);
|
|
365
|
-
}
|
|
366
|
-
}); // Remove Image
|
|
367
|
-
|
|
368
|
-
onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id)); // Update Image
|
|
369
|
-
|
|
370
|
-
createEffect(async () => {
|
|
371
|
-
if (props.image && props.url) return;
|
|
372
|
-
|
|
373
|
-
if (props.url) {
|
|
374
|
-
map().loadImage(props.url, (error, image) => {
|
|
375
|
-
if (error) throw error;
|
|
376
|
-
!map().hasImage(props.id) && map().updateImage(props.id, image);
|
|
377
|
-
});
|
|
378
|
-
} else {
|
|
379
|
-
map().hasImage(props.id) && map().updateImage(props.id, props.image);
|
|
380
|
-
}
|
|
381
|
-
});
|
|
382
|
-
return [];
|
|
383
|
-
};
|
|
384
|
-
|
|
385
|
-
export { Control, Fog, Image, Layer, Marker, Popup, Sky, SourceComponent as Source, Terrain, MapGL as default };
|
|
1
|
+
import{template,createComponent,insert,effect,classList}from"solid-js/web";import{useTransition,createContext,onCleanup,onMount,createEffect,useContext,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const _tmpl$$2=template("<main></main>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{let t,o;onCleanup(()=>t.remove()),onMount(()=>{t=new mapboxgl.Map({...n.options,container:o,bounds:n.viewport.bounds,center:n.viewport.center,zoom:n.viewport.zoom||null,pitch:n.viewport.pitch||null,bearing:n.viewport.bearing||null,fitBoundsOptions:{padding:n.viewport.padding}})}),createEffect(()=>n.onMouseMove&&t.on("mousemove",e=>n.onMouseMove(e.lngLat)));const e=()=>{var e={center:t.getCenter(),zoom:t.getZoom(),pitch:t.getPitch(),bearing:t.getBearing(),padding:n.viewport.padding};n.onViewportChange(e)};createEffect(()=>n.onViewportChange&&t.on("dragend",e).on("moveend",e).on("zoomend",e).on("rotateend",e).on("pitchend",e).on("boxzoomend",e)),createEffect(async()=>{n.viewport.bounds&&t.fitBounds(n.viewport.bounds,{padding:n.viewport.padding})});let a=0;return createEffect(()=>{n.triggerResize&&(a=0,window.requestAnimationFrame(function e(){a<15&&(a++,window.requestAnimationFrame(e),start(()=>t.resize()))}))}),createComponent(MapContext.Provider,{value:()=>t,get children(){const a=_tmpl$$2.cloneNode(!0),e=o;return"function"==typeof e?e(a):o=a,a.style.setProperty("height","100%"),a.style.setProperty("width","100%"),insert(a,()=>n.children),effect(e=>{var t=n.class||"",o=n.classList;return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),a}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{source:t.id}},get children(){return t.children}})},diff=(a={},n={})=>{return[...new Set([...Object.keys(a),...Object.keys(n)])].reduce((e,t)=>{var o=a[t];return o!==n[t]&&e.push([t,o]),e},[])},Layer=o=>{const a=useMap(),e=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(o.id)||a().addLayer(o.layer||{...o.style,id:o.id,source:e.source},o.beforeType?a().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style||!a().getLayer(o.id))return diff(o.style.paint,e.paint).forEach(([e,t])=>a().setPaintProperty(o.id,e,t)),diff(o.style.layout,e.layout).forEach(([e,t])=>a().setLayoutProperty(o.id,e,t)),o.style.minzoom===e.minzoom&&o.style.maxzoom===e.max||a().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style},o.style),createEffect(async()=>{void 0!==o.visible&&(a().isStyleLoaded()||await a().once("styledata"),a().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}))}),createEffect(async()=>{o.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(a().loaded()||await a().once("render"),a().removeFeatureState({source:e.source,sourceLayer:o.style["source-layer"]}),a().setFeatureState({source:e.source,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.source})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,a]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options);break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),a(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),createEffect(()=>a.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const a=useMap();return onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().addImage(o.id,t)}):a().hasImage(o.id)||a().addImage(o.id,o.image,o.options)}),onCleanup(()=>a().hasImage(o.id)&&a().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().updateImage(o.id,t)}):a().hasImage(o.id)&&a().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default};
|
|
386
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["import {\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\n\nexport type Viewport = {\n center?: object\n zoom?: number\n bounds?: number[][]\n pitch?: number\n bearing?: number\n padding?: number\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n class?: string\n classList?: any\n viewport?: Viewport\n options?: MapboxOptions\n children?: any[] | any\n triggerResize?: boolean\n onMouseMove?: (event: MapMouseEvent) => void\n onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n let map: MapboxMap\n let mapRef: HTMLElement\n\n onCleanup(() => map.remove())\n\n onMount(() => {\n map = new mapboxgl.Map({\n ...props.options,\n container: mapRef,\n bounds: props.viewport.bounds,\n center: props.viewport.center,\n zoom: props.viewport.zoom || null,\n pitch: props.viewport.pitch || null,\n bearing: props.viewport.bearing || null,\n fitBoundsOptions: { padding: props.viewport.padding },\n } as MapboxOptions)\n })\n\n createEffect(\n () =>\n props.onMouseMove &&\n map.on('mousemove', event => props.onMouseMove(event.lngLat))\n )\n\n const _onViewportChange = () => {\n const viewport: Viewport = {\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport.padding,\n }\n props.onViewportChange(viewport)\n }\n\n createEffect(\n () =>\n props.onViewportChange &&\n map\n .on('dragend', _onViewportChange)\n .on('moveend', _onViewportChange)\n .on('zoomend', _onViewportChange)\n .on('rotateend', _onViewportChange)\n .on('pitchend', _onViewportChange)\n .on('boxzoomend', _onViewportChange)\n )\n\n createEffect(async () => {\n if (!props.viewport.bounds) return\n // await map.once('idle')\n map.fitBounds(props.viewport.bounds, {\n padding: props.viewport.padding,\n })\n })\n\n let index = 0\n\n createEffect(() => {\n if (props.triggerResize) {\n index = 0\n window.requestAnimationFrame(function loop() {\n if (index < 15) {\n index++\n window.requestAnimationFrame(loop)\n start(() => map.resize())\n }\n })\n }\n })\n\n return (\n <MapContext.Provider value={() => map}>\n <main\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}>\n {props.children}\n </main>\n </MapContext.Provider>\n )\n}\n\nexport { MapGL as default, useMap }\n","import {\n onMount,\n onCleanup,\n createEffect,\n Component,\n createContext,\n useContext,\n createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n Source,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n id?: string\n source: SourceSpecification\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n // Add Source\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getSource(props.id) && map().addSource(props.id, props.source)\n })\n\n // Remove Source\n onCleanup(() => {\n map()\n .getStyle()\n .layers.forEach(\n layer => layer.source === props.id && map().removeLayer(layer.id)\n )\n map().getSource(props.id) && map().removeSource(props.id)\n })\n\n // Update GeoJSON Data\n createEffect(async () => {\n if (props.source.type !== 'geojson' && !props.source.data) return\n\n map().getSource(props.id) &&\n map().getSource(props.id).setData(props.source.data)\n })\n\n return (\n <SourceContext.Provider value={{ source: props.id }}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\ntype KV = {\n string?: any\n}\n\nconst diff = (newProps: KV = {}, prevProps: KV = {}) => {\n const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n return [...keys].reduce((acc, key: string) => {\n const value = newProps[key]\n if (value !== prevProps[key]) {\n acc.push([key, value])\n }\n return acc\n }, [])\n}\n\nconst Layer: Component<{\n id?: string\n style?: StyleSpecification\n layer?: CustomLayerInterface\n filter?: FilterSpecification\n visible?: boolean\n sourceId?: string\n beforeType?: string\n beforeId?: string\n featureState?: { id: number | string; state: object }\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n props.id = props.id || createUniqueId()\n // Add Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n if (map().getLayer(props.id)) return\n\n map().addLayer(\n props.layer || {\n ...props.style,\n id: props.id,\n source: source.source,\n },\n props.beforeType\n ? map()\n .getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n // Update Style\n createEffect((prev: any) => {\n if (!props.style && map().getLayer(props.id)) return\n\n diff(props.style.paint, prev.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value)\n )\n\n diff(props.style.layout, prev.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value)\n )\n\n if (\n props.style.minzoom !== prev.minzoom ||\n props.style.maxzoom !== prev.max\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect(async () => {\n if (!props.visible) return\n\n !map().loaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n })\n\n // Update Filter\n createEffect(async () => {\n if (!props.filter) return\n\n !map().loaded() && (await map().once('styledata'))\n map().setFilter(props.id, props.filter)\n })\n\n // Update Feature State\n createEffect(async () => {\n if (!props.featureState?.id) return\n\n map().loaded() ? null : await map().once('render')\n\n map().removeFeatureState({\n source: source.source,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: source.source,\n sourceLayer: props.style['source-layer'],\n id: props.featureState.id,\n },\n props.featureState.state\n )\n })\n\n return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n style: FogSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.style)\n })\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n // Add Sky Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n })\n\n // Remove Sky Layer\n onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n TerrainSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n\n // Add Terrain Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain({ ...props.style, source: source.source })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n type:\n | 'navigation'\n | 'scale'\n | 'attribution'\n | 'fullscreen'\n | 'geolocate'\n | 'language'\n | 'traffic'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n // Add Control\n onMount(async () => {\n let control\n\n switch (props.type) {\n case 'scale':\n control = new mapboxgl.ScaleControl(props.options)\n break\n case 'attribution':\n control = new mapboxgl.AttributionControl(props.options)\n break\n case 'fullscreen':\n control = new mapboxgl.FullscreenControl(props.options)\n break\n case 'geolocate':\n control = new mapboxgl.GeolocateControl(props.options)\n break\n default:\n control = new mapboxgl.NavigationControl(props.options)\n // case 'language':\n // const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n // .default\n // control = new MapboxLanguage(props.options)\n // break\n // case 'traffic':\n // const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n // .default\n // await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n // control = new MapboxTraffic(props.options)\n // break\n }\n map().addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Marker: Component<{\n options?: MarkerSpecification\n lnglat: number[]\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n onMount(async () => {\n marker = new mapboxgl.Marker(props.options)\n .setLngLat(props.lnglat)\n .setPopup(\n props.children\n ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n : null\n )\n .addTo(map())\n })\n // Remove Marker\n onCleanup(() => marker.remove())\n\n // Update Position\n createEffect(() => marker.setLngLat(props.lnglat))\n\n return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n options?: PopupSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n onMount(async () => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lnglat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup.setLngLat(props.lnglat))\n\n // Update Content\n createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n StyleImageInterface,\n StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n id: string\n url?: string\n image?:\n | HTMLImageElement\n | ImageBitmap\n | ImageData\n | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n | StyleImageInterface\n options?: StyleImageMetadata\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Image\n onMount(() => {\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().addImage(props.id, image)\n })\n } else {\n !map().hasImage(props.id) &&\n map().addImage(props.id, props.image, props.options)\n }\n })\n // Remove Image\n onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n // Update Image\n createEffect(async () => {\n if (props.image && props.url) return\n\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().updateImage(props.id, image)\n })\n } else {\n map().hasImage(props.id) && map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","createEffect","onMouseMove","on","event","lngLat","_onViewportChange","getCenter","getZoom","getPitch","getBearing","onViewportChange","fitBounds","index","triggerResize","window","requestAnimationFrame","loop","resize","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","keys","Set","Object","reduce","acc","key","value","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","prev","paint","setPaintProperty","layout","setLayoutProperty","minzoom","maxzoom","max","setLayerZoomRange","visible","loaded","validate","filter","setFilter","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","undefined","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","NavigationControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["import {\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\n\nexport type Viewport = {\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: number\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n class?: string\n classList?: {\n [k: string]: boolean | undefined\n }\n viewport?: Viewport\n options?: MapboxOptions\n children?: Component[] | Component\n triggerResize?: boolean\n onMouseMove?: (event: MapMouseEvent) => void\n onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n let map: MapboxMap\n let mapRef: HTMLElement\n\n onCleanup(() => map.remove())\n\n onMount(() => {\n map = new mapboxgl.Map({\n ...props.options,\n container: mapRef,\n bounds: props.viewport.bounds,\n center: props.viewport.center,\n zoom: props.viewport.zoom || null,\n pitch: props.viewport.pitch || null,\n bearing: props.viewport.bearing || null,\n fitBoundsOptions: { padding: props.viewport.padding },\n } as MapboxOptions)\n })\n\n createEffect(\n () =>\n props.onMouseMove &&\n map.on('mousemove', event => props.onMouseMove(event.lngLat))\n )\n\n const _onViewportChange = () => {\n const viewport: Viewport = {\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport.padding,\n }\n props.onViewportChange(viewport)\n }\n\n createEffect(\n () =>\n props.onViewportChange &&\n map\n .on('dragend', _onViewportChange)\n .on('moveend', _onViewportChange)\n .on('zoomend', _onViewportChange)\n .on('rotateend', _onViewportChange)\n .on('pitchend', _onViewportChange)\n .on('boxzoomend', _onViewportChange)\n )\n\n createEffect(async () => {\n if (!props.viewport.bounds) return\n\n map.fitBounds(props.viewport.bounds, {\n padding: props.viewport.padding,\n })\n })\n\n let index = 0\n\n createEffect(() => {\n if (props.triggerResize) {\n index = 0\n window.requestAnimationFrame(function loop() {\n if (index < 15) {\n index++\n window.requestAnimationFrame(loop)\n start(() => map.resize())\n }\n })\n }\n })\n\n return (\n <MapContext.Provider value={() => map}>\n <main\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}>\n {props.children}\n </main>\n </MapContext.Provider>\n )\n}\n\nexport { MapGL as default, useMap }\n","import {\n onMount,\n onCleanup,\n createEffect,\n Component,\n createContext,\n useContext,\n createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n Source,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n id?: string\n source: SourceSpecification\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n // Add Source\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getSource(props.id) && map().addSource(props.id, props.source)\n })\n\n // Remove Source\n onCleanup(() => {\n map()\n .getStyle()\n .layers.forEach(\n layer => layer.source === props.id && map().removeLayer(layer.id)\n )\n map().getSource(props.id) && map().removeSource(props.id)\n })\n\n // Update GeoJSON Data\n createEffect(async () => {\n if (props.source.type !== 'geojson' && !props.source.data) return\n\n map().getSource(props.id) &&\n map().getSource(props.id).setData(props.source.data)\n })\n\n return (\n <SourceContext.Provider value={{ source: props.id }}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n newProps: StyleSpecification = {},\n prevProps: StyleSpecification = {}\n) => {\n const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n return [...keys].reduce((acc, key: string) => {\n const value = newProps[key]\n if (value !== prevProps[key]) {\n acc.push([key, value])\n }\n return acc\n }, [])\n}\n\nconst Layer: Component<{\n id?: string\n style?: StyleSpecification\n layer?: CustomLayerInterface\n filter?: FilterSpecification\n visible?: boolean\n sourceId?: string\n beforeType?:\n | 'background'\n | 'fill'\n | 'line'\n | 'symbol'\n | 'raster'\n | 'circle'\n | 'fill-extrusion'\n | 'heatmap'\n | 'hillshade'\n | 'sky'\n beforeId?: string\n featureState?: { id: number | string; state: object }\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n props.id = props.id || createUniqueId()\n // Add Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n if (map().getLayer(props.id)) return\n\n map().addLayer(\n props.layer || {\n ...props.style,\n id: props.id,\n source: source.source,\n },\n props.beforeType\n ? map()\n .getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n // Update Style\n createEffect((prev: StyleSpecification) => {\n if (!props.style && map().getLayer(props.id)) return\n\n diff(props.style.paint, prev.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value)\n )\n\n diff(props.style.layout, prev.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value)\n )\n\n if (\n props.style.minzoom !== prev.minzoom ||\n props.style.maxzoom !== prev.max\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n })\n\n // Update Filter\n createEffect(async () => {\n if (!props.filter) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFilter(props.id, props.filter)\n })\n\n // Update Feature State\n createEffect(async () => {\n if (!props.featureState || !props.featureState.id) return\n\n map().loaded() ? null : await map().once('render')\n\n map().removeFeatureState({\n source: source.source,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: source.source,\n sourceLayer: props.style['source-layer'],\n id: props.featureState.id,\n },\n props.featureState.state\n )\n })\n\n return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n style: FogSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.style)\n })\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n // Add Sky Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n })\n\n // Remove Sky Layer\n onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n TerrainSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n\n // Add Terrain Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain({ ...props.style, source: source.source })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n type:\n | 'navigation'\n | 'scale'\n | 'attribution'\n | 'fullscreen'\n | 'geolocate'\n | 'language'\n | 'traffic'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n // Add Control\n onMount(async () => {\n let control\n\n switch (props.type) {\n case 'navigation':\n control = new mapboxgl.NavigationControl(props.options)\n break\n case 'scale':\n control = new mapboxgl.ScaleControl(props.options)\n break\n case 'attribution':\n control = new mapboxgl.AttributionControl(props.options)\n break\n case 'fullscreen':\n control = new mapboxgl.FullscreenControl(props.options)\n break\n case 'geolocate':\n control = new mapboxgl.GeolocateControl(props.options)\n break\n // case 'language':\n // const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n // .default\n // control = new MapboxLanguage(props.options)\n // break\n // case 'traffic':\n // const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n // .default\n // await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n // control = new MapboxTraffic(props.options)\n // break\n }\n control && map().addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n options?: MarkerSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n onMount(async () => {\n marker = new mapboxgl.Marker(props.options)\n .setLngLat(props.lnglat)\n .setPopup(\n props.children\n ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n : null\n )\n .addTo(map())\n })\n // Remove Marker\n onCleanup(() => marker.remove())\n\n // Update Position\n createEffect(() => marker.setLngLat(props.lnglat))\n\n return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n options?: PopupSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n onMount(async () => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lnglat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup.setLngLat(props.lnglat))\n\n // Update Content\n createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n StyleImageInterface,\n StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n id: string\n url?: string\n image?:\n | HTMLImageElement\n | ImageBitmap\n | ImageData\n | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n | StyleImageInterface\n options?: StyleImageMetadata\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Image\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().addImage(props.id, image)\n })\n } else {\n !map().hasImage(props.id) &&\n map().addImage(props.id, props.image, props.options)\n }\n })\n // Remove Image\n onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n // Update Image\n createEffect(async () => {\n if (props.image && props.url) return\n\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().updateImage(props.id, image)\n })\n } else {\n map().hasImage(props.id) && map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","createEffect","onMouseMove","on","event","lngLat","_onViewportChange","getCenter","getZoom","getPitch","getBearing","onViewportChange","async","fitBounds","index","triggerResize","window","requestAnimationFrame","loop","resize","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","Object","keys","reduce","acc","key","value","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","prev","paint","setPaintProperty","layout","setLayoutProperty","minzoom","maxzoom","max","setLayerZoomRange","undefined","visible","validate","filter","setFilter","featureState","loaded","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mapboxgl-canvas{position:absolute;left:0;top:0}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.mapboxgl-ctrl-top-left{top:0;left:0}.mapboxgl-ctrl-top-right{top:0;right:0}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-bottom-right{right:0;bottom:0}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}.mapboxgl-ctrl-group{border-radius:4px;background:#fff}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{width:29px;height:29px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:transparent;cursor:pointer;overflow:hidden}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:focus:only-child{border-radius:inherit}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:hsla(0,0%,100%,.5);margin:0}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");background-color:hsla(0,0%,100%,.5);width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:hsla(0,0%,100%,.75);font-size:10px;border:2px solid #333;border-top:#333;padding:0 5px;color:#333;box-sizing:border-box}.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:transparent}.mapboxgl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:10px 10px 15px;pointer-events:auto}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform;opacity:1;transition:opacity .2s}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.mapboxgl-user-location-dot:before{content:"";position:absolute;animation:mapboxgl-user-location-dot-pulse 2s infinite}.mapboxgl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px rgba(0,0,0,.35)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{width:0;height:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{content:"";border-bottom:7.5px solid #4aa1eb;position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid transparent;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid transparent;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:rgba(29,161,242,.2);width:1px;height:1px;border-radius:100%}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;justify-content:center;text-align:center;position:absolute;display:flex;align-items:center;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .75s ease-in-out;transition-delay:1s}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}
|
|
@@ -8,6 +8,9 @@ const Control = props => {
|
|
|
8
8
|
onMount(async () => {
|
|
9
9
|
let control;
|
|
10
10
|
switch (props.type) {
|
|
11
|
+
case 'navigation':
|
|
12
|
+
control = new mapboxgl.NavigationControl(props.options);
|
|
13
|
+
break;
|
|
11
14
|
case 'scale':
|
|
12
15
|
control = new mapboxgl.ScaleControl(props.options);
|
|
13
16
|
break;
|
|
@@ -20,8 +23,6 @@ const Control = props => {
|
|
|
20
23
|
case 'geolocate':
|
|
21
24
|
control = new mapboxgl.GeolocateControl(props.options);
|
|
22
25
|
break;
|
|
23
|
-
default:
|
|
24
|
-
control = new mapboxgl.NavigationControl(props.options);
|
|
25
26
|
// case 'language':
|
|
26
27
|
// const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))
|
|
27
28
|
// .default
|
|
@@ -34,7 +35,7 @@ const Control = props => {
|
|
|
34
35
|
// control = new MapboxTraffic(props.options)
|
|
35
36
|
// break
|
|
36
37
|
}
|
|
37
|
-
map().addControl(control, props.position);
|
|
38
|
+
control && map().addControl(control, props.position);
|
|
38
39
|
setControl(control);
|
|
39
40
|
});
|
|
40
41
|
onCleanup(() => map().removeControl(control()));
|
|
@@ -3,7 +3,8 @@ import { useMap } from '../MapGL';
|
|
|
3
3
|
const Image = props => {
|
|
4
4
|
const map = useMap();
|
|
5
5
|
// Add Image
|
|
6
|
-
onMount(() => {
|
|
6
|
+
onMount(async () => {
|
|
7
|
+
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
7
8
|
if (props.url) {
|
|
8
9
|
map().loadImage(props.url, (error, image) => {
|
|
9
10
|
if (error)
|
|
@@ -43,21 +43,21 @@ const Layer = props => {
|
|
|
43
43
|
}, props.style);
|
|
44
44
|
// Update Visibility
|
|
45
45
|
createEffect(async () => {
|
|
46
|
-
if (
|
|
46
|
+
if (props.visible === undefined)
|
|
47
47
|
return;
|
|
48
|
-
!map().
|
|
48
|
+
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
49
49
|
map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
|
|
50
50
|
});
|
|
51
51
|
// Update Filter
|
|
52
52
|
createEffect(async () => {
|
|
53
53
|
if (!props.filter)
|
|
54
54
|
return;
|
|
55
|
-
!map().
|
|
55
|
+
!map().isStyleLoaded() && (await map().once('styledata'));
|
|
56
56
|
map().setFilter(props.id, props.filter);
|
|
57
57
|
});
|
|
58
58
|
// Update Feature State
|
|
59
59
|
createEffect(async () => {
|
|
60
|
-
if (!props.featureState
|
|
60
|
+
if (!props.featureState || !props.featureState.id)
|
|
61
61
|
return;
|
|
62
62
|
map().loaded() ? null : await map().once('render');
|
|
63
63
|
map().removeFeatureState({
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createEffect, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
|
|
2
2
|
import mapboxgl from 'mapbox-gl';
|
|
3
|
+
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
3
4
|
const [pending, start] = useTransition();
|
|
4
5
|
const MapContext = createContext();
|
|
5
6
|
const useMap = () => useContext(MapContext);
|
|
@@ -42,7 +43,6 @@ const MapGL = props => {
|
|
|
42
43
|
createEffect(async () => {
|
|
43
44
|
if (!props.viewport.bounds)
|
|
44
45
|
return;
|
|
45
|
-
// await map.once('idle')
|
|
46
46
|
map.fitBounds(props.viewport.bounds, {
|
|
47
47
|
padding: props.viewport.padding,
|
|
48
48
|
});
|
|
@@ -8,7 +8,7 @@ declare const Layer: Component<{
|
|
|
8
8
|
filter?: FilterSpecification;
|
|
9
9
|
visible?: boolean;
|
|
10
10
|
sourceId?: string;
|
|
11
|
-
beforeType?:
|
|
11
|
+
beforeType?: 'background' | 'fill' | 'line' | 'symbol' | 'raster' | 'circle' | 'fill-extrusion' | 'heatmap' | 'hillshade' | 'sky';
|
|
12
12
|
beforeId?: string;
|
|
13
13
|
featureState?: {
|
|
14
14
|
id: number | string;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { Component } from 'solid-js';
|
|
2
|
+
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
2
3
|
import type MapboxOptions from 'mapbox-gl/src/ui/map';
|
|
3
4
|
import type MapMouseEvent from 'mapbox-gl/src/ui/events';
|
|
5
|
+
import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
|
|
6
|
+
import type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js';
|
|
4
7
|
export declare type Viewport = {
|
|
5
|
-
center?:
|
|
8
|
+
center?: LngLatLike;
|
|
9
|
+
bounds?: LngLatBounds;
|
|
6
10
|
zoom?: number;
|
|
7
|
-
bounds?: number[][];
|
|
8
11
|
pitch?: number;
|
|
9
12
|
bearing?: number;
|
|
10
13
|
padding?: number;
|
|
@@ -12,10 +15,12 @@ export declare type Viewport = {
|
|
|
12
15
|
declare const useMap: () => MapboxMap;
|
|
13
16
|
declare const MapGL: Component<{
|
|
14
17
|
class?: string;
|
|
15
|
-
classList?:
|
|
18
|
+
classList?: {
|
|
19
|
+
[k: string]: boolean | undefined;
|
|
20
|
+
};
|
|
16
21
|
viewport?: Viewport;
|
|
17
22
|
options?: MapboxOptions;
|
|
18
|
-
children?:
|
|
23
|
+
children?: Component[] | Component;
|
|
19
24
|
triggerResize?: boolean;
|
|
20
25
|
onMouseMove?: (event: MapMouseEvent) => void;
|
|
21
26
|
onViewportChange?: (viewport: Viewport) => void;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Component } from 'solid-js';
|
|
2
2
|
import type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js';
|
|
3
|
+
import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
|
|
3
4
|
declare const Marker: Component<{
|
|
4
5
|
options?: MarkerSpecification;
|
|
5
|
-
lnglat:
|
|
6
|
+
lnglat: LngLatLike;
|
|
6
7
|
}>;
|
|
7
8
|
export default Marker;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.1.3",
|
|
3
3
|
"name": "solid-map-gl",
|
|
4
4
|
"description": "Solid Component Library for Mapbox GL JS",
|
|
5
5
|
"author": "kaihuebner",
|
|
@@ -35,12 +35,13 @@
|
|
|
35
35
|
"homepage": "https://github.com/gishub4/solid-map-gl#readme",
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"mapbox-gl": "^2.6.1",
|
|
38
|
-
"rollup-plugin-import-css": "^3.0.2",
|
|
39
38
|
"solid-js": "^1.2.6"
|
|
40
39
|
},
|
|
41
40
|
"devDependencies": {
|
|
42
41
|
"@types/mapbox-gl": "^2.4.2",
|
|
43
42
|
"rollup": "^2.59.0",
|
|
43
|
+
"rollup-plugin-import-css": "^3.0.2",
|
|
44
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
44
45
|
"rollup-preset-solid": "^1.0.1",
|
|
45
46
|
"typescript": "^4.4.4"
|
|
46
47
|
}
|