solid-map-gl 1.2.10 → 1.2.13

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 CHANGED
@@ -1,256 +1,47 @@
1
- # README
1
+ ---
2
+ description: Solid Map GL provides Mapbox functionality within SolidJS applications
3
+ cover: docs/header.png
4
+ coverY: -136.56381942189023
5
+ layout: landing
6
+ ---
2
7
 
3
- ![Banner](https://assets.solidjs.com/banner?project=solid-map-gl\&background=tiles)
8
+ # Introduction
4
9
 
5
- ## Solid Mapbox GL JS
10
+ [SolidJS](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/)
6
11
 
7
- [![npm](https://badgen.net/npm/v/solid-map-gl?icon=npm\&label) ![downloads](https://badgen.net/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl) [![licence](https://badgen.net/badge/license/MIT/blue)](LICENSE/) [![size](https://badgen.net/badge/color/119%20kB/blue?label=Unpacked%20Size) ![treeshaking](https://badgen.net/badge/color/supported/green?label=tree%20shaking)](https://bundlephobia.com/package/solid-map-gl) ![types](https://badgen.net/npm/types/solid-map-gl?icon=typescript\&label)
12
+ {% content-ref url="docs/start.md" %}
13
+ [start.md](docs/start.md)
14
+ {% endcontent-ref %}
8
15
 
9
- [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/)
10
-
11
- #### [Examples & Playground](https://determined-mirzakhani-29bbc7.netlify.app)
12
-
13
- \
14
-
15
-
16
- * [Installation](./#installation)
17
- * [Components](./#components)
18
- * [Usage](./#usage)
19
- * [Static Map](./#static-map)
20
- * [Interactive Map](./#interactive-map)
21
- * [Map with Source and Layer](./#map-with-source-and-layer)
22
- * [Map with GeoJSON Source](./#map-with-geojson-source)
23
- * [Roadmap](./#roadmap)
24
-
25
- \
26
-
27
-
28
- ![Gallery](docs/gallery.png)
29
-
30
- ### Installation
31
-
32
- \
33
-
34
-
35
- > :bangbang:
36
- >
37
- > There is a Mapbox bundle issue when using `npm or yarn`
38
- >
39
- > Please use [`pnpm`](https://pnpm.io/) as a workaround
40
-
41
- \
42
-
43
-
44
- ```shell
45
- pnpm add solid-map-gl
46
- ```
47
-
48
- ### Components
49
-
50
- | Component | Description |
51
- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
52
- | [MapGL](src/components/MapGL/) | Represents map on the page |
53
- | [Source](src/components/Source/) | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
54
- | [Layer](src/components/Layer/) | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style |
55
- | [Sky](src/components/Sky/) | Specify the Sky Layer |
56
- | [Fog](src/components/Fog/) | Specify the Fog Layer |
57
- | [Terrain](src/components/Terrain/) | Specify the Terrain Layer |
58
- | [Image](src/components/Image/) | Adds an image to the map style |
59
- | [Popup](src/components/Popup/) | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup) |
60
- | [Marker](src/components/Marker/) | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) |
61
- | [Control](src/components/control.md) | Represents the map's control |
62
-
63
- ### Usage
64
-
65
- To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox [access token](https://www.mapbox.com/help/define-access-token/). Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your [API access tokens page](https://www.mapbox.com/studio/account/tokens/).
66
-
67
- #### Static Map
68
-
69
- By default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.
16
+ ## Code example
70
17
 
71
18
  ```jsx
72
- import MapGL from 'solid-map-gl'
73
- <MapGL
74
- options={{
75
- accessToken: MAPBOX_ACCESS_TOKEN,
76
- style: 'mapbox://styles/mapbox/light-v10',
77
- }}
78
- viewport={{
79
- center: [-122.41, 37.78],
80
- zoom: 11,
81
- }}>
82
- </MapGL>
83
- ```
84
-
85
- #### Interactive Map
86
-
87
- In most cases, you will want the user to interact with the map. To do this, you need to provide `onViewportChange` handler, that will update the map's viewport state.
88
-
89
- ```jsx
90
- import { createSignal } from 'solid-js'
91
- import MapGL from 'solid-map-gl'
92
- import type { Viewport } from 'solid-map-gl'
93
-
94
- const [viewport, setViewport] = createSignal({
95
- center: [-122.41, 37.78],
96
- zoom: 11
97
- } as Viewport);
98
-
99
- <MapGL
100
- options={{
19
+ import { render } from "solid-js/web";
20
+ import { Component, createSignal } from "solid-js";
21
+ import MapGL, { Viewport } from "solid-map-gl";
22
+
23
+ const Map: Component = () => {
24
+ const [viewport, setViewport] = createSignal({
25
+ center: [0, 0],
26
+ zoom: 6,
27
+ } as Viewport);
28
+
29
+ return (
30
+ <MapGL
31
+ options={{
101
32
  accessToken: MAPBOX_ACCESS_TOKEN,
102
- style: 'mapbox://styles/mapbox/light-v10'
103
- }}
104
- viewport={viewport()}
105
- onViewportChange={evt => setViewport(evt)}>
106
- </MapGL>
107
- ```
108
-
109
- #### Map with Source and Layer
110
-
111
- [Sources](https://docs.mapbox.com/mapbox-gl-js/api/sources/) specify the geographic features to be rendered on the map.
112
-
113
- [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) specify the Sources styles. The type of layer is specified by the `"type"` property in the layers style object, and must be one of `background`, `fill`, `line`, `symbol`, `raster`, `circle`, `fill-extrusion`, `heatmap`, `hillshade`.
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.
116
-
117
- ```jsx
118
- import MapGL, { Source, Layer } from 'solid-map-gl';
119
-
120
- <MapGL
121
- options={{
122
- accessToken: MAPBOX_ACCESS_TOKEN,
123
- style: 'mapbox://styles/mapbox/light-v10'
124
- }}>
125
- <Source
126
- source={{
127
- type: 'vector',
128
- url: 'mapbox://mapbox.mapbox-terrain-v2',
129
- }}>
130
- <Layer style={{
131
- type: 'line',
132
- 'source-layer': 'contour'
133
- paint: {
134
- 'line-color': '#877b59',
135
- 'line-width': 1,
136
- }
137
- }} />
138
- </Source>
139
- </MapGL>
140
- ```
141
-
142
- #### Map with GeoJSON Source
143
-
144
- To draw a GeoJSON on a map, add `Source` with the `type` property set to `geojson` and `data` property set to a URL or inline [GeoJSON](http://geojson.org/).
145
-
146
- ```jsx
147
- import { createSignal } from 'solid-js'
148
- import MapGL, { Source, Layer } from 'solid-map-gl'
149
- import type { Viewport } from 'solid-map-gl'
150
-
151
- const [viewport, setViewport] = createSignal({
152
- center: [-122.486052, 37.830348],
153
- zoom: 15,
154
- })
155
-
156
- const data = {
157
- type: 'Feature',
158
- geometry: {
159
- type: 'LineString',
160
- coordinates: [
161
- [-122.48369693756104, 37.83381888486939],
162
- [-122.48348236083984, 37.83317489144141],
163
- [-122.48339653015138, 37.83270036637107],
164
- [-122.48356819152832, 37.832056363179625],
165
- [-122.48404026031496, 37.83114119107971],
166
- [-122.48404026031496, 37.83049717427869],
167
- [-122.48348236083984, 37.829920943955045],
168
- [-122.48356819152832, 37.82954808664175],
169
- [-122.48507022857666, 37.82944639795659],
170
- [-122.48610019683838, 37.82880236636284],
171
- [-122.48695850372314, 37.82931081282506],
172
- [-122.48700141906738, 37.83080223556934],
173
- [-122.48751640319824, 37.83168351665737],
174
- [-122.48803138732912, 37.832158048267786],
175
- [-122.48888969421387, 37.83297152392784],
176
- [-122.48987674713133, 37.83263257682617],
177
- [-122.49043464660643, 37.832937629287755],
178
- [-122.49125003814696, 37.832429207817725],
179
- [-122.49163627624512, 37.832564787218985],
180
- [-122.49223709106445, 37.83337825839438],
181
- [-122.49378204345702, 37.83368330777276],
182
- ],
183
- },
184
- }
185
-
186
- <MapGL
187
- options={{
188
- accessToken: MAPBOX_ACCESS_TOKEN,
189
- style: 'mapbox://styles/mapbox/light-v10',
190
- }}
191
- viewport={viewport()}
192
- onViewportChange={evt => setViewport(evt)}>
193
- <Source
194
- source={{
195
- type: 'geojson',
196
- data: { data },
197
- }}>
198
- <Layer
199
- style={{
200
- type: 'line',
201
- layout: {
202
- 'line-join': 'round',
203
- 'line-cap': 'round',
204
- },
205
- paint: {
206
- 'line-color': '#888',
207
- 'line-width': 8,
208
- },
33
+ style: "mb:light",
209
34
  }}
210
- />
211
- </Source>
212
- </MapGL>
213
- ```
214
-
215
- #### Custom Layers support
216
-
217
- [Custom layers](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) allow a user to render directly into the Map's GL context using the map's camera.
218
-
219
- Here is an example using [deck.gl.](https://github.com/uber/deck.gl)
220
-
221
- ```jsx
222
- import { createSignal } from 'solid-js'
223
- import MapGL, { Source, Layer } from 'solid-map-gl'
224
- import { MapboxLayer } from '@deck.gl/mapbox'
225
- import { ScatterplotLayer } from '@deck.gl/layers'
226
- import type { Viewport } from 'solid-map-gl'
227
-
228
- const [viewport, setViewport] = createSignal({
229
- center: [-74.5, 40],
230
- zoom: 9,
231
- })
232
-
233
- const myDeckLayer = new MapboxLayer({
234
- id: 'my-scatterplot',
235
- type: ScatterplotLayer,
236
- data: [{ position: [-74.5, 40], size: 1000 }],
237
- getPosition: d => d.position,
238
- getRadius: d => d.size,
239
- getColor: [255, 0, 0],
240
- })
35
+ viewport={viewport()}
36
+ onViewportChange={(evt: Event) => setViewport(evt)}
37
+ ></MapGL>
38
+ );
39
+ };
241
40
 
242
- <MapGL
243
- options={{
244
- accessToken: MAPBOX_ACCESS_TOKEN,
245
- style: 'mapbox://styles/mapbox/light-v10',
246
- }}
247
- viewport={viewport()}
248
- onViewportChange={evt => setViewport(evt)}>
249
- <Layer customLayer={myDeckLayer} />
250
- </MapGL>
41
+ render(() => <Map />, document.getElementById("app")!);
251
42
  ```
252
43
 
253
- ### Roadmap
44
+ #### Roadmap
254
45
 
255
46
  * [x] Basic Mapbox GL Functionality
256
47
  * [x] Include Map Controls
@@ -261,3 +52,4 @@ const myDeckLayer = new MapboxLayer({
261
52
  * [x] Include event handling
262
53
  * [x] Sync Maps
263
54
  * [ ] Add draw functionality
55
+ * [ ] Add debug console
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{createComponent,insert,effect,className,classList,style,template}from"solid-js/web";import{createContext,useContext,createUniqueId,createSignal,useTransition,onMount,onCleanup,createEffect,on,untrack}from"solid-js";import mapboxgl,{MercatorCoordinate}from"mapbox-gl";const mapEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onPreClick","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel","onWheel","onResize","onRemove","onTouchMove","onMoveStart","onMove","onMoveEnd","onDragStart","onDrag","onDragEnd","onZoomStart","onZoom","onZoomEnd","onRotateStart","onRotate","onRotatEnd","onPitchStart","onPitch","onPitchEnd","onBoxZoomStart","onBoxZoomEnd","onBoxZoomCancel","onWebglContextLost","onWebglContextRestored","onLoad","onRender","onIdle","onError","onData","onStyleData","onSourceData","onDataLoading","onStyleDataLoading","onSourceDataLoading","onStyleImageMissing"],layerEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],mapBase="mapbox://styles/mapbox",gitBase="https://raw.githubusercontent.com",vectorStyleList={"mb:light":mapBase+"/light-v10","mb:dark":mapBase+"/dark-v10","mb:streets":mapBase+"/streets-v11","mb:outdoor":mapBase+"/outdoors-v11","mb:sat":mapBase+"/satellite-v9","mb:sat-streets":mapBase+"/satellite-streets-v11","mb:nav":mapBase+"/navigation-guidance-day-v4","mb:nav-night":mapBase+"/navigation-guidance-night-v4","mb:basic":mapBase+"/cjf4m44iw0uza2spb3q0a7s41","mb:monochrome":mapBase+"/cjv6rzz4j3m4b1fqcchuxclhb","mb:leshine":mapBase+"/cjcunv5ae262f2sm9tfwg8i0w","mb:icecream":mapBase+"/cj7t3i5yj0unt2rmt3y4b5e32","mb:cali":mapBase+"/cjerxnqt3cgvp2rmyuxbeqme7","mb:northstar":mapBase+"/cj44mfrt20f082snokim4ungi","mb:mineral":mapBase+"/cjtep62gq54l21frr1whf27ak","mb:moonlight":mapBase+"/cj3kbeqzo00022smj7akz3o1e","mb:frank":mapBase+"-map-design/ckshxkppe0gge18nz20i0nrwq","mb:minimo":mapBase+"-map-design/cksjc2nsq1bg117pnekb655h1","mb:decimal":mapBase+"-map-design/ck4014y110wt61ctt07egsel6","mb:standard":mapBase+"-map-design/ckr0svm3922ki18qntevm857n","mb:blueprint":mapBase+"-map-design/cks97e1e37nsd17nzg7p0308g","mb:bubble":mapBase+"-map-design/cksysy2nl62zp17quosctdtcc","mb:pencil":mapBase+"-map-design/cks9iema71es417mlrft4go2k","mb:swiss-ski":gitBase+"/mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json","mb:vintage":gitBase+"/mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json","mb:whaam":gitBase+"/mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json","mb:neon":gitBase+"/NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json","mb:camoflauge":gitBase+"/jingsam/mapbox-gl-styles/master/Camouflage.json","mb:emerald":gitBase+"/jingsam/mapbox-gl-styles/master/Emerald.json","mb:runner":gitBase+"/jingsam/mapbox-gl-styles/master/Runner.json","mb:x-ray":gitBase+"/jingsam/mapbox-gl-styles/master/X-ray.json"},rasterStyleList={"osm:org":["https://tile.openstreetmap.org/{z}/{x}/{y}.png",'Map &copy; <a href="https://www.openstreetmap.org"><em>OpenStreetMap</em></a>'],"osm:human":["https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",'Map &copy; <a href="http://hot.openstreetmap.org"><em>Humanitarian OpenStreetMap Team</em></a>'],"osm:cycle":["https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",'Maps &copy; <a href="https://www.cyclosm.org" target="_blank"><em>CyclOSM</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"carto:voyager":["https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"carto:positron":["https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"carto:dark":["https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"open:topo":["https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",'Maps &copy; <a href="https://opentopomap.org/credits"><em>OpenTopoMap</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:toner":["https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:toner-lite":["https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:watercolor":["https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:terrain":["https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:cycle":["https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:trans":["https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:trans-dark":["https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:landscape":["https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:outdoors":["https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:neighbourhood":["https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:spinal":["https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:pioneer":["https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:atlas":["https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:mobile":["https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>']},_tmpl$$2=template("<section></section>",2),_tmpl$2=template("<div></div>",2);let mapRef,containerRef;const MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{n.id=n.id||createUniqueId();const[a,o]=createSignal(),[,s]=useTransition(),[i,p]=createSignal("flyTo");return onMount(()=>{var e;const r=new mapboxgl.Map({...n.options,style:vectorStyleList[null==(e=n.options)?void 0:e.style]||(null==(e=n.options)?void 0:e.style)||{version:8,sources:{},layers:[]},container:mapRef,interactive:!!n.onViewportChange,bounds:null==(e=n.viewport)?void 0:e.bounds,center:null==(e=n.viewport)?void 0:e.center,zoom:(null==(e=n.viewport)?void 0:e.zoom)||null,pitch:(null==(e=n.viewport)?void 0:e.pitch)||null,bearing:(null==(e=n.viewport)?void 0:e.bearing)||null,fitBoundsOptions:{padding:null==(e=n.viewport)?void 0:e.padding}});r.container=containerRef,r.once("styledata").then(()=>o(r)),onCleanup(()=>r.remove()),createEffect(()=>mapEvents.forEach(t=>{if(n[t]){const e=t.slice(2).toLowerCase(),a=e=>n[t](e);r.on(e,a),onCleanup(()=>r.off(e,a))}})),createEffect(()=>{r.showTileBoundaries=n.showTileBoundaries,r.showTerrainWireframe=n.showTerrainWireframe,r.showPadding=n.showPadding,r.showCollisionBoxes=n.showCollisionBoxes,r.showOverdrawInspector=n.showOverdrawInspector}),createEffect(()=>r.getCanvas().style.cursor=n.cursorStyle),createEffect(()=>p(n.transitionType)),createEffect(on(()=>{var e;return null==(e=n.options)?void 0:e.projection},e=>r.setProjection(e),{defer:!0})),createEffect(on(()=>{var e;return null==(e=n.options)?void 0:e.style},e=>{const a=r.getStyle(),t=a.layers.filter(e=>e.id.startsWith("cl-")),o=Object.keys(a.sources).filter(e=>e.startsWith("cl-")).reduce((e,t)=>({...e,[t]:a.sources[t]}),{});r.setStyle(vectorStyleList[e]||e||{version:8,sources:{},layers:[]}),r.once("styledata",()=>{var e=r.getStyle();r.setStyle({...e,sources:{...e.sources,...o},layers:[...e.layers,...t]})})},{defer:!0})),createEffect(()=>{var e;const t={id:null,center:r.getCenter(),zoom:r.getZoom(),pitch:r.getPitch(),bearing:r.getBearing(),padding:null==(e=n.viewport)?void 0:e.padding,bounds:null==(e=n.viewport)?void 0:e.bounds},a=e=>{e.originalEvent&&n.onViewportChange&&n.onViewportChange({...t,id:n.id}),p("jumpTo")},o=e=>{e.originalEvent&&n.onViewportChange&&n.onViewportChange(t),p(n.transitionType)};r.on("move",a).on("moveend",o),onCleanup(()=>r.off("move",a).off("moveend",o))}),createEffect(e=>{var t;return(null==(t=n.viewport)?void 0:t.bounds)!=e&&n.onViewportChange({...n.viewport,...r.cameraForBounds(null==(t=n.viewport)?void 0:t.bounds,{padding:null==(e=n.viewport)?void 0:e.padding})}),null==(t=n.viewport)?void 0:t.bounds},null==(e=n.viewport)?void 0:e.bounds),createEffect(()=>{var e;if(n.id!==(null==(e=n.viewport)?void 0:e.id)){var t={...n.viewport,padding:(null==(e=n.viewport)?void 0:e.padding)||0};switch(untrack(i)){case"easeTo":r.stop().easeTo(t);case"jumpTo":r.stop().jumpTo(t);default:r.stop().flyTo(t)}}});let t=0;createEffect(()=>{n.triggerResize&&(t=0,window.requestAnimationFrame(function e(){t<15&&(t++,window.requestAnimationFrame(e),s(()=>r.resize()))}))})}),createComponent(MapContext.Provider,{value:a,get children(){return[(()=>{const e=_tmpl$$2.cloneNode(!0),t=containerRef;return"function"==typeof t?t(e):containerRef=e,e.style.setProperty("position","absolute"),e.style.setProperty("z-index","1"),insert(e,()=>a()?n.children:null),e})(),(()=>{const r=_tmpl$2.cloneNode(!0),e=mapRef;return"function"==typeof e?e(r):mapRef=r,effect(e=>{var t=null==n?void 0:n.class,a=null==n?void 0:n.classList,o={height:"100%",width:"100%",...n.style};return t!==e._v$&&className(r,e._v$=t),e._v$2=classList(r,a,e._v$2),e._v$3=style(r,o,e._v$3),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()]}})},SourceContext=createContext(),useSourceId=()=>useContext(SourceContext),Source=o=>{const r=useMap(),n=(o.id=o.id||createUniqueId(),e=>rasterStyleList[e]?{...o.source,url:"",tiles:[rasterStyleList[e][0].replace("{apikey}",o.source.apikey)],attribution:rasterStyleList[e][1]}:o.source);return createEffect(()=>{const t=n(o.source.url);t.tiles&&(t.tiles=["a","b","c"].map(e=>t.tiles[0].replace("{s}",e))),r().getSource(o.id)||r().addSource(o.id,t)}),onCleanup(()=>{r().getStyle().layers.forEach(e=>e.source===o.id&&r().removeLayer(e.id)),r().getSource(o.id)&&r().removeSource(o.id)}),createEffect(()=>{const e=r().getSource(o.id);if(e&&("geojson"===o.source.type&&o.source.data&&e.setData(o.source.data),"image"===o.source.type&&(o.source.url||o.source.coordinates)&&e.updateImage(o.source.url,o.source.coordinates),"vector"===o.source.type&&(o.source.url||o.source.tiles)&&(o.source.url?e.setUrl(o.source.url):e.setTiles(o.source.tiles)),"raster"===o.source.type&&(o.source.url||o.source.tiles))){var t;const a=n(o.source.url);a.tiles&&(a.tiles=["a","b","c"].map(e=>a.tiles[0].replace("{s}",e))),null!=(t=e._tileJSONRequest)&&t.cancel(),e.url=a.url,e.scheme=a.scheme,e._options={...e._options,...a},null!=(t=r().style._sourceCaches["other:"+o.id])&&t.clearTiles(),e.load()}}),createComponent(SourceContext.Provider,{get value(){return o.id},get children(){return o.children}})},diff=(o={},r={})=>{return[...new Set([...Object.keys(o),...Object.keys(r)])].reduce((e,t)=>{var a=o[t];return a!==r[t]&&e.push([t,a]),e},[])},Layer=r=>{const n=useMap(),t=useSourceId();return r.id=r.id||createUniqueId(),createEffect(()=>{var e;n().getLayer(r.id)||n().addLayer(r.customLayer||{...r.style,id:r.id,source:t,metadata:{smg:{beforeType:r.beforeType,beforeId:r.beforeId}}},r.beforeType?null==(e=n())?void 0:e.getStyle().layers.find(e=>e.type===r.beforeType).id:r.beforeId)}),onCleanup(()=>n().getLayer(r.id)&&n().removeLayer(r.id)),createEffect(()=>layerEvents.forEach(t=>{if(r[t]){var e;const a=t.slice(2).toLowerCase(),o=e=>r[t](e);null!=(e=n())&&e.on(a,r.id,o),onCleanup(()=>{var e;return null==(e=n())?void 0:e.off(a,r.id,o)})}})),createEffect(e=>{if(r.style&&n().style&&n().getSource(t)&&n().getLayer(r.id))return r.style.layout!==(null==e?void 0:e.layout)&&diff(r.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>n().setLayoutProperty(r.id,e,t,{validate:!1})),r.style.paint!==(null==e?void 0:e.paint)&&diff(r.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>n().setPaintProperty(r.id,e,t,{validate:!1})),r.style.minzoom===(null==e?void 0:e.minzoom)&&r.style.maxzoom===(null==e?void 0:e.maxzoom)||n().setLayerZoomRange(r.id,r.style.minzoom,r.style.maxzoom),r.style.filter!==(null==e?void 0:e.filter)&&n().setFilter(r.id,r.style.filter,{validate:!1}),r.style},r.style),createEffect(e=>{if(void 0!==r.visible&&r.visible!==e&&n().getSource(t)&&n().getLayer(r.id))return n().setLayoutProperty(r.id,"visibility",r.visible?"visible":"none",{validate:!1}),r.visible},r.visible),createEffect(async()=>{r.filter&&(n().isStyleLoaded()||await n().once("styledata"),n().setFilter(r.id,r.filter))}),createEffect(async()=>{r.featureState&&r.featureState.id&&(n().isStyleLoaded()||await n().once("styledata"),n().removeFeatureState({source:t,sourceLayer:r.style["source-layer"]}),n().setFeatureState({source:t,sourceLayer:r.style["source-layer"],id:r.featureState.id},r.featureState.state))}),r.children},Fog=e=>{const t=useMap();return createEffect(()=>{t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(()=>{void 0!==e.visible&&t().setFog(e.visible?e.style:null)}),e.children},Sky=e=>{const t=useMap(),a="_sky";return createEffect(()=>{t().getLayer(a)&&t().addLayer({...e.style,id:a})}),onCleanup(()=>t().getLayer(a)&&t().removeLayer(a)),createEffect(()=>{void 0!==e.visible&&t().setLayoutProperty(a,"visibility",e.visible?"visible":"none")}),e.children},Terrain=e=>{const t=useMap(),a=useSourceId();return createEffect(()=>{t().setTerrain({...e.style,source:a})}),onCleanup(()=>t().setTerrain(null)),createEffect(()=>{void 0!==e.visible&&t().setTerrain(e.visible?e.style:null)}),e.children},Control=a=>{const o=useMap(),[e,r]=createSignal(null);return createEffect(()=>{var e,t=((e,t)=>{if(a.custom)return new a.custom(t);switch(e){case"navigation":return new mapboxgl.NavigationControl(t);case"scale":return new mapboxgl.ScaleControl(t);case"attribution":return new mapboxgl.AttributionControl(t);case"geolocate":return new mapboxgl.GeolocateControl(t);case"fullscreen":return new mapboxgl.FullscreenControl;default:throw new Error("Unknown control type: "+e)}})(a.type,a.options);t&&null!=(e=o())&&e.addControl(t,a.position),r(t)}),onCleanup(()=>o().removeControl(e())),a.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const a=useMap();let o=null;return createEffect(()=>{var e;o=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(a())}),onCleanup(()=>o.remove()),createEffect(()=>o&&o.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const a=useMap();let o=null;return createEffect(()=>{var e;o=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(a())}),onCleanup(()=>o.remove()),createEffect(()=>o&&o.setLngLat(t.lnglat)),createEffect(()=>o&&o.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=a=>{const o=useMap();return createEffect(()=>{a.url?o().loadImage(a.url,(e,t)=>!o().hasImage(a.id)&&o().addImage(a.id,t)):o().hasImage(a.id)||o().addImage(a.id,a.image,a.options)}),onCleanup(()=>o().hasImage(a.id)&&o().removeImage(a.id)),createEffect(async()=>{a.image&&a.url||(a.url?o().loadImage(a.url,(e,t)=>{if(e)throw e;o().hasImage(a.id)||o().updateImage(a.id,t)}):o().style&&o().hasImage(a.id)&&o().updateImage(a.id,a.image))}),[]},lerp=(a,o,r)=>a.map((e,t)=>(1-r)*a[t]+r*o[t]),slerp=(a,o,r)=>{return a.map((e,t)=>Math.sin(.075*(1-r))/Math.sin(.075)*a[t]+Math.sin(.075*r)/Math.sin(.075)*o[t])},easeQuad={in:e=>e*e,out:e=>1-(1-e)*(1-e),inOut:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2},Camera=s=>{const i=useMap();let p=.1,l=!1;const c=e=>{s.animate&&window.requestAnimationFrame(c);var t=[s.translate.start,s.translate.end,s.translate.easing?easeQuad[s.translate.easing](p):p],t=("line"===s.translate.type?lerp:slerp)(...t);{var[[t,a,o],r]=[t,s.translate.target];const n=i().getFreeCameraOptions();n.position=MercatorCoordinate.fromLngLat([t,a],o),n.lookAtPoint(r),i().setFreeCameraOptions(n)}!s.translate.loop&&(1<p||p<0)&&(l=!l),p=l?p-.001:p+.001};return createEffect(async()=>{s.animate&&window.requestAnimationFrame(c)}),s.children};export{Camera,Control,Fog,Image,Layer,Marker,Popup,Sky,Source,Terrain,MapGL as default,useMap,useSourceId};
1
+ import{createComponent,insert,effect,className,classList,style,template}from"solid-js/web";import{createContext,useContext,createUniqueId,createSignal,useTransition,onMount,onCleanup,createEffect,on,untrack}from"solid-js";import mapboxgl,{MercatorCoordinate}from"mapbox-gl";const mapEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onPreClick","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel","onWheel","onResize","onRemove","onTouchMove","onMoveStart","onMove","onMoveEnd","onDragStart","onDrag","onDragEnd","onZoomStart","onZoom","onZoomEnd","onRotateStart","onRotate","onRotatEnd","onPitchStart","onPitch","onPitchEnd","onBoxZoomStart","onBoxZoomEnd","onBoxZoomCancel","onWebglContextLost","onWebglContextRestored","onLoad","onRender","onIdle","onError","onData","onStyleData","onSourceData","onDataLoading","onStyleDataLoading","onSourceDataLoading","onStyleImageMissing"],layerEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],mapBase="mapbox://styles/mapbox",gitBase="https://raw.githubusercontent.com",vectorStyleList={"mb:light":mapBase+"/light-v10","mb:dark":mapBase+"/dark-v10","mb:streets":mapBase+"/streets-v11","mb:outdoor":mapBase+"/outdoors-v11","mb:sat":mapBase+"/satellite-v9","mb:sat-streets":mapBase+"/satellite-streets-v11","mb:nav":mapBase+"/navigation-guidance-day-v4","mb:nav-night":mapBase+"/navigation-guidance-night-v4","mb:basic":mapBase+"/cjf4m44iw0uza2spb3q0a7s41","mb:monochrome":mapBase+"/cjv6rzz4j3m4b1fqcchuxclhb","mb:leshine":mapBase+"/cjcunv5ae262f2sm9tfwg8i0w","mb:icecream":mapBase+"/cj7t3i5yj0unt2rmt3y4b5e32","mb:cali":mapBase+"/cjerxnqt3cgvp2rmyuxbeqme7","mb:northstar":mapBase+"/cj44mfrt20f082snokim4ungi","mb:mineral":mapBase+"/cjtep62gq54l21frr1whf27ak","mb:moonlight":mapBase+"/cj3kbeqzo00022smj7akz3o1e","mb:frank":mapBase+"-map-design/ckshxkppe0gge18nz20i0nrwq","mb:minimo":mapBase+"-map-design/cksjc2nsq1bg117pnekb655h1","mb:decimal":mapBase+"-map-design/ck4014y110wt61ctt07egsel6","mb:standard":mapBase+"-map-design/ckr0svm3922ki18qntevm857n","mb:blueprint":mapBase+"-map-design/cks97e1e37nsd17nzg7p0308g","mb:bubble":mapBase+"-map-design/cksysy2nl62zp17quosctdtcc","mb:pencil":mapBase+"-map-design/cks9iema71es417mlrft4go2k","mb:swiss-ski":gitBase+"/mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json","mb:vintage":gitBase+"/mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json","mb:whaam":gitBase+"/mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json","mb:neon":gitBase+"/NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json","mb:camoflauge":gitBase+"/jingsam/mapbox-gl-styles/master/Camouflage.json","mb:emerald":gitBase+"/jingsam/mapbox-gl-styles/master/Emerald.json","mb:runner":gitBase+"/jingsam/mapbox-gl-styles/master/Runner.json","mb:x-ray":gitBase+"/jingsam/mapbox-gl-styles/master/X-ray.json"},rasterStyleList={"osm:org":["https://tile.openstreetmap.org/{z}/{x}/{y}.png",'Map &copy; <a href="https://www.openstreetmap.org"><em>OpenStreetMap</em></a>'],"osm:human":["https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",'Map &copy; <a href="http://hot.openstreetmap.org"><em>Humanitarian OpenStreetMap Team</em></a>'],"osm:cycle":["https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",'Maps &copy; <a href="https://www.cyclosm.org" target="_blank"><em>CyclOSM</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"carto:voyager":["https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"carto:positron":["https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"carto:dark":["https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png",'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>'],"open:topo":["https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",'Maps &copy; <a href="https://opentopomap.org/credits"><em>OpenTopoMap</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:toner":["https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:toner-lite":["https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:watercolor":["https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"stamen:terrain":["https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:cycle":["https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:trans":["https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:trans-dark":["https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:landscape":["https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:outdoors":["https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:neighbourhood":["https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:spinal":["https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:pioneer":["https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:atlas":["https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>'],"tf:mobile":["https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey={apikey}",'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>']},_tmpl$$2=template("<section></section>",2),_tmpl$2=template("<div></div>",2);let mapRef,containerRef;const MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{n.id=n.id||createUniqueId();const[a,o]=createSignal(),[,s]=useTransition(),[i,p]=createSignal("flyTo");return onMount(async()=>{var e;const r=new mapboxgl.Map({...n.options,style:vectorStyleList[null==(e=n.options)?void 0:e.style]||(null==(e=n.options)?void 0:e.style)||{version:8,sources:{},layers:[]},container:mapRef,interactive:!!n.onViewportChange,bounds:null==(e=n.viewport)?void 0:e.bounds,center:null==(e=n.viewport)?void 0:e.center,zoom:(null==(e=n.viewport)?void 0:e.zoom)||null,pitch:(null==(e=n.viewport)?void 0:e.pitch)||null,bearing:(null==(e=n.viewport)?void 0:e.bearing)||null,fitBoundsOptions:{padding:null==(e=n.viewport)?void 0:e.padding}});r.container=containerRef,r.once("styledata").then(()=>o(r)),onCleanup(()=>r.remove()),createEffect(()=>mapEvents.forEach(t=>{if(n[t]){const e=t.slice(2).toLowerCase(),a=e=>n[t](e);r.on(e,a),onCleanup(()=>r.off(e,a))}})),createEffect(()=>{r.showTileBoundaries=n.showTileBoundaries,r.showTerrainWireframe=n.showTerrainWireframe,r.showPadding=n.showPadding,r.showCollisionBoxes=n.showCollisionBoxes,r.showOverdrawInspector=n.showOverdrawInspector}),createEffect(()=>r.getCanvas().style.cursor=n.cursorStyle),createEffect(()=>p(n.transitionType)),createEffect(on(()=>{var e;return null==(e=n.options)?void 0:e.projection},e=>r.setProjection(e),{defer:!0})),createEffect(on(()=>{var e;return null==(e=n.options)?void 0:e.style},e=>{const a=r.getStyle(),t=a.layers.filter(e=>e.id.startsWith("cl-")),o=Object.keys(a.sources).filter(e=>e.startsWith("cl-")).reduce((e,t)=>({...e,[t]:a.sources[t]}),{});r.setStyle(vectorStyleList[e]||e||{version:8,sources:{},layers:[]}),r.once("styledata",()=>{var e=r.getStyle();r.setStyle({...e,sources:{...e.sources,...o},layers:[...e.layers,...t]})})},{defer:!0})),createEffect(()=>{var e;const t={id:null,center:r.getCenter(),zoom:r.getZoom(),pitch:r.getPitch(),bearing:r.getBearing(),padding:null==(e=n.viewport)?void 0:e.padding,bounds:null==(e=n.viewport)?void 0:e.bounds},a=e=>{e.originalEvent&&n.onViewportChange&&n.onViewportChange({...t,id:n.id}),p("jumpTo")},o=e=>{e.originalEvent&&n.onViewportChange&&n.onViewportChange(t),p(n.transitionType)};r.on("move",a).on("moveend",o),onCleanup(()=>r.off("move",a).off("moveend",o))}),createEffect(e=>{var t;return(null==(t=n.viewport)?void 0:t.bounds)!=e&&n.onViewportChange({...n.viewport,...r.cameraForBounds(null==(t=n.viewport)?void 0:t.bounds,{padding:null==(e=n.viewport)?void 0:e.padding})}),null==(t=n.viewport)?void 0:t.bounds},null==(e=n.viewport)?void 0:e.bounds),createEffect(()=>{var e;if(n.id!==(null==(e=n.viewport)?void 0:e.id)){var t={...n.viewport,padding:(null==(e=n.viewport)?void 0:e.padding)||0};switch(untrack(i)){case"easeTo":r.stop().easeTo(t);case"jumpTo":r.stop().jumpTo(t);default:r.stop().flyTo(t)}}});let t=0;createEffect(()=>{n.triggerResize&&(t=0,window.requestAnimationFrame(function e(){t<15&&(t++,window.requestAnimationFrame(e),s(()=>r.resize()))}))})}),createComponent(MapContext.Provider,{value:a,get children(){return[(()=>{const e=_tmpl$$2.cloneNode(!0),t=containerRef;return"function"==typeof t?t(e):containerRef=e,e.style.setProperty("position","absolute"),e.style.setProperty("z-index","1"),insert(e,()=>a()?n.children:null),e})(),(()=>{const r=_tmpl$2.cloneNode(!0),e=mapRef;return"function"==typeof e?e(r):mapRef=r,effect(e=>{var t=null==n?void 0:n.class,a=null==n?void 0:n.classList,o={height:"100%",width:"100%",...n.style};return t!==e._v$&&className(r,e._v$=t),e._v$2=classList(r,a,e._v$2),e._v$3=style(r,o,e._v$3),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()]}})},SourceContext=createContext(),useSourceId=()=>useContext(SourceContext),Source=o=>{const r=useMap(),n=(o.id=o.id||createUniqueId(),e=>rasterStyleList[e]?{...o.source,url:"",tiles:[rasterStyleList[e][0].replace("{apikey}",o.source.apikey)],attribution:rasterStyleList[e][1]}:o.source);return createEffect(()=>{const t=n(o.source.url);t.tiles&&(t.tiles=["a","b","c"].map(e=>t.tiles[0].replace("{s}",e))),r().getSource(o.id)||r().addSource(o.id,t)}),onCleanup(()=>{r().getStyle().layers.forEach(e=>e.source===o.id&&r().removeLayer(e.id)),r().getSource(o.id)&&r().removeSource(o.id)}),createEffect(()=>{const e=r().getSource(o.id);if(e&&("geojson"===o.source.type&&o.source.data&&e.setData(o.source.data),"image"===o.source.type&&(o.source.url||o.source.coordinates)&&e.updateImage(o.source.url,o.source.coordinates),"vector"===o.source.type&&(o.source.url||o.source.tiles)&&(o.source.url?e.setUrl(o.source.url):e.setTiles(o.source.tiles)),"raster"===o.source.type&&(o.source.url||o.source.tiles))){var t;const a=n(o.source.url);a.tiles&&(a.tiles=["a","b","c"].map(e=>a.tiles[0].replace("{s}",e))),null!=(t=e._tileJSONRequest)&&t.cancel(),e.url=a.url,e.scheme=a.scheme,e._options={...e._options,...a},null!=(t=r().style._sourceCaches["other:"+o.id])&&t.clearTiles(),e.load()}}),createComponent(SourceContext.Provider,{get value(){return o.id},get children(){return o.children}})},diff=(o={},r={})=>{return[...new Set([...Object.keys(o),...Object.keys(r)])].reduce((e,t)=>{var a=o[t];return a!==r[t]&&e.push([t,a]),e},[])},Layer=r=>{const n=useMap(),t=useSourceId();return r.id=r.id||createUniqueId(),createEffect(()=>{var e;n().getLayer(r.id)||n().addLayer(r.customLayer||{...r.style,id:r.id,source:t,metadata:{smg:{beforeType:r.beforeType,beforeId:r.beforeId}}},r.beforeType?null==(e=n())?void 0:e.getStyle().layers.find(e=>e.type===r.beforeType).id:r.beforeId)}),onCleanup(()=>n().getLayer(r.id)&&n().removeLayer(r.id)),createEffect(()=>layerEvents.forEach(t=>{if(r[t]){var e;const a=t.slice(2).toLowerCase(),o=e=>r[t](e);null!=(e=n())&&e.on(a,r.id,o),onCleanup(()=>{var e;return null==(e=n())?void 0:e.off(a,r.id,o)})}})),createEffect(e=>{if(r.style&&n().style&&n().getSource(t)&&n().getLayer(r.id))return r.style.layout!==(null==e?void 0:e.layout)&&diff(r.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>n().setLayoutProperty(r.id,e,t,{validate:!1})),r.style.paint!==(null==e?void 0:e.paint)&&diff(r.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>n().setPaintProperty(r.id,e,t,{validate:!1})),r.style.minzoom===(null==e?void 0:e.minzoom)&&r.style.maxzoom===(null==e?void 0:e.maxzoom)||n().setLayerZoomRange(r.id,r.style.minzoom,r.style.maxzoom),r.style.filter!==(null==e?void 0:e.filter)&&n().setFilter(r.id,r.style.filter,{validate:!1}),r.style},r.style),createEffect(e=>{if(void 0!==r.visible&&r.visible!==e&&n().getSource(t)&&n().getLayer(r.id))return n().setLayoutProperty(r.id,"visibility",r.visible?"visible":"none",{validate:!1}),r.visible},r.visible),createEffect(async()=>{r.filter&&(n().isStyleLoaded()||await n().once("styledata"),n().setFilter(r.id,r.filter))}),createEffect(async()=>{r.featureState&&r.featureState.id&&(n().isStyleLoaded()||await n().once("styledata"),n().removeFeatureState({source:t,sourceLayer:r.style["source-layer"]}),n().setFeatureState({source:t,sourceLayer:r.style["source-layer"],id:r.featureState.id},r.featureState.state))}),r.children},Fog=e=>{const t=useMap();return createEffect(()=>{t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(()=>{void 0!==e.visible&&t().setFog(e.visible?e.style:null)}),e.children},Sky=e=>{const t=useMap(),a="_sky";return createEffect(()=>{t().getLayer(a)&&t().addLayer({...e.style,id:a})}),onCleanup(()=>t().getLayer(a)&&t().removeLayer(a)),createEffect(()=>{void 0!==e.visible&&t().setLayoutProperty(a,"visibility",e.visible?"visible":"none")}),e.children},Terrain=e=>{const t=useMap(),a=useSourceId();return createEffect(()=>{t().setTerrain({...e.style,source:a})}),onCleanup(()=>t().setTerrain(null)),createEffect(()=>{void 0!==e.visible&&t().setTerrain(e.visible?e.style:null)}),e.children},Control=a=>{const o=useMap(),[e,r]=createSignal(null);return createEffect(()=>{var e,t=((e,t)=>{if(a.custom)return new a.custom(t);switch(e){case"navigation":return new mapboxgl.NavigationControl(t);case"scale":return new mapboxgl.ScaleControl(t);case"attribution":return new mapboxgl.AttributionControl(t);case"geolocate":return new mapboxgl.GeolocateControl(t);case"fullscreen":return new mapboxgl.FullscreenControl;default:throw new Error("Unknown control type: "+e)}})(a.type,a.options);t&&null!=(e=o())&&e.addControl(t,a.position),r(t)}),onCleanup(()=>o().removeControl(e())),a.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const a=useMap();let o=null;return createEffect(()=>{var e;o=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(a())}),onCleanup(()=>o.remove()),createEffect(()=>o&&o.setLngLat(t.lngLat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const a=useMap();let o=null;return createEffect(()=>{var e;o=new mapboxgl.Popup(t.options).setLngLat(t.lngLat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(a())}),onCleanup(()=>o.remove()),createEffect(()=>o&&o.setLngLaL(t.lngLat)),createEffect(()=>o&&o.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=a=>{const o=useMap();return createEffect(()=>{a.url?o().loadImage(a.url,(e,t)=>!o().hasImage(a.id)&&o().addImage(a.id,t)):o().hasImage(a.id)||o().addImage(a.id,a.image,a.options)}),onCleanup(()=>o().hasImage(a.id)&&o().removeImage(a.id)),createEffect(async()=>{a.image&&a.url||(a.url?o().loadImage(a.url,(e,t)=>{if(e)throw e;o().hasImage(a.id)||o().updateImage(a.id,t)}):o().style&&o().hasImage(a.id)&&o().updateImage(a.id,a.image))}),[]},lerp=(a,o,r)=>a.map((e,t)=>(1-r)*a[t]+r*o[t]),slerp=(a,o,r)=>{return a.map((e,t)=>Math.sin(.075*(1-r))/Math.sin(.075)*a[t]+Math.sin(.075*r)/Math.sin(.075)*o[t])},easeQuad={in:e=>e*e,out:e=>1-(1-e)*(1-e),inOut:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2},Camera=s=>{const i=useMap();let p=.1,l=!1;const c=e=>{s.animate&&window.requestAnimationFrame(c);var t=[s.translate.start,s.translate.end,s.translate.easing?easeQuad[s.translate.easing](p):p],t=("line"===s.translate.type?lerp:slerp)(...t);{var[[t,a,o],r]=[t,s.translate.target];const n=i().getFreeCameraOptions();n.position=MercatorCoordinate.fromLngLat([t,a],o),n.lookAtPoint(r),i().setFreeCameraOptions(n)}!s.translate.loop&&(1<p||p<0)&&(l=!l),p=l?p-.001:p+.001};return createEffect(async()=>{s.animate&&window.requestAnimationFrame(c)}),s.children};export{Camera,Control,Fog,Image,Layer,Marker,Popup,Sky,Source,Terrain,MapGL as default,useMap,useSourceId};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/events.ts","../../src/styles.ts","../../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","../../src/components/Camera/index.tsx"],"sourcesContent":["const mapEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onPreClick',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n 'onWheel',\n 'onResize',\n 'onRemove',\n 'onTouchMove',\n 'onMoveStart',\n 'onMove',\n 'onMoveEnd',\n 'onDragStart',\n 'onDrag',\n 'onDragEnd',\n 'onZoomStart',\n 'onZoom',\n 'onZoomEnd',\n 'onRotateStart',\n 'onRotate',\n 'onRotatEnd',\n 'onPitchStart',\n 'onPitch',\n 'onPitchEnd',\n 'onBoxZoomStart',\n 'onBoxZoomEnd',\n 'onBoxZoomCancel',\n 'onWebglContextLost',\n 'onWebglContextRestored',\n 'onLoad',\n 'onRender',\n 'onIdle',\n 'onError',\n 'onData',\n 'onStyleData',\n 'onSourceData',\n 'onDataLoading',\n 'onStyleDataLoading',\n 'onSourceDataLoading',\n 'onStyleImageMissing',\n]\n\nconst layerEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n]\n\nexport { mapEvents, layerEvents }\n","const mapBase = 'mapbox://styles/mapbox'\nconst gitBase = 'https://raw.githubusercontent.com'\n\nexport const vectorStyleList = {\n 'mb:light': `${mapBase}/light-v10`,\n 'mb:dark': `${mapBase}/dark-v10`,\n 'mb:streets': `${mapBase}/streets-v11`,\n 'mb:outdoor': `${mapBase}/outdoors-v11`,\n 'mb:sat': `${mapBase}/satellite-v9`,\n 'mb:sat-streets': `${mapBase}/satellite-streets-v11`,\n 'mb:nav': `${mapBase}/navigation-guidance-day-v4`,\n 'mb:nav-night': `${mapBase}/navigation-guidance-night-v4`,\n\n 'mb:basic': `${mapBase}/cjf4m44iw0uza2spb3q0a7s41`,\n 'mb:monochrome': `${mapBase}/cjv6rzz4j3m4b1fqcchuxclhb`,\n 'mb:leshine': `${mapBase}/cjcunv5ae262f2sm9tfwg8i0w`,\n 'mb:icecream': `${mapBase}/cj7t3i5yj0unt2rmt3y4b5e32`,\n 'mb:cali': `${mapBase}/cjerxnqt3cgvp2rmyuxbeqme7`,\n 'mb:northstar': `${mapBase}/cj44mfrt20f082snokim4ungi`,\n 'mb:mineral': `${mapBase}/cjtep62gq54l21frr1whf27ak`,\n 'mb:moonlight': `${mapBase}/cj3kbeqzo00022smj7akz3o1e`,\n 'mb:frank': `${mapBase}-map-design/ckshxkppe0gge18nz20i0nrwq`,\n 'mb:minimo': `${mapBase}-map-design/cksjc2nsq1bg117pnekb655h1`,\n 'mb:decimal': `${mapBase}-map-design/ck4014y110wt61ctt07egsel6`,\n 'mb:standard': `${mapBase}-map-design/ckr0svm3922ki18qntevm857n`,\n 'mb:blueprint': `${mapBase}-map-design/cks97e1e37nsd17nzg7p0308g`,\n 'mb:bubble': `${mapBase}-map-design/cksysy2nl62zp17quosctdtcc`,\n 'mb:pencil': `${mapBase}-map-design/cks9iema71es417mlrft4go2k`,\n\n 'mb:swiss-ski': `${gitBase}/mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,\n 'mb:vintage': `${gitBase}/mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,\n 'mb:whaam': `${gitBase}/mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,\n 'mb:neon': `${gitBase}/NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,\n 'mb:camoflauge': `${gitBase}/jingsam/mapbox-gl-styles/master/Camouflage.json`,\n 'mb:emerald': `${gitBase}/jingsam/mapbox-gl-styles/master/Emerald.json`,\n 'mb:runner': `${gitBase}/jingsam/mapbox-gl-styles/master/Runner.json`,\n 'mb:x-ray': `${gitBase}/jingsam/mapbox-gl-styles/master/X-ray.json`,\n}\n\nexport const rasterStyleList = {\n 'osm:org': [\n 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',\n 'Map &copy; <a href=\"https://www.openstreetmap.org\"><em>OpenStreetMap</em></a>',\n ],\n 'osm:human': [\n 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',\n 'Map &copy; <a href=\"http://hot.openstreetmap.org\"><em>Humanitarian OpenStreetMap Team</em></a>',\n ],\n 'osm:cycle': [\n 'https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://www.cyclosm.org\" target=\"_blank\"><em>CyclOSM</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'carto:voyager': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'carto:positron': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'carto:dark': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'open:topo': [\n 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://opentopomap.org/credits\"><em>OpenTopoMap</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:toner': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:toner-lite': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:watercolor': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:terrain': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:cycle': [\n 'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:trans': [\n 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:trans-dark': [\n 'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:landscape': [\n 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:outdoors': [\n 'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:neighbourhood': [\n 'https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:spinal': [\n 'https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:pioneer': [\n 'https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:atlas': [\n 'https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:mobile': [\n 'https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n}\n","import {\n createSignal,\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n createUniqueId,\n untrack,\n on,\n} from 'solid-js'\nimport { mapEvents } from '../../events'\nimport { vectorStyleList } from '../../styles'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type { MapboxMap, MapboxOptions } from 'mapbox-gl/src/ui/map'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\nimport type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js'\nimport type { JSX } from 'solid-js'\n\nexport type Viewport = {\n id?: string\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: PaddingOptions\n}\n\nlet mapRef: HTMLDivElement\nlet containerRef: HTMLElement\n\nconst MapContext = createContext<MapboxMap>()\n/** Provides the Mapbox Map Object */\nexport const useMap = (): MapboxMap => useContext(MapContext)\n\n/** Creates a new Map Container */\nexport const MapGL: Component<{\n id?: string\n /** Map Container CSS Style */\n style?: JSX.CSSProperties\n /** Map Container CSS Class */\n class?: string\n /** SolidJS Class List for Map Container */\n classList?: {\n [k: string]: boolean | undefined\n }\n /** Current Map View */\n viewport?: Viewport\n /** Mapbox Options\n * @see https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters\n */\n options?: MapboxOptions\n /** Type for pan, move and zoom transitions */\n transitionType?: 'flyTo' | 'easeTo' | 'jumpTo'\n /** Event listener for Viewport updates */\n onViewportChange?: (viewport: Viewport) => void\n /** Displays Map Tile Borders */\n showTileBoundaries?: boolean\n /** Displays Wireframe if Terrain is visible */\n showTerrainWireframe?: boolean\n /** Displays Borders if Padding is set */\n showPadding?: boolean\n /** Displays Label Collision Boxes */\n showCollisionBoxes?: boolean\n /** Displays all feature outlines even if normally not drawn by style rules */\n showOverdrawInspector?: boolean\n triggerResize?: boolean\n repaint?: boolean\n /** Mouse Cursor Style */\n cursorStyle?: string\n ref?: HTMLDivElement\n /** Children within the Map Container */\n children?: Element | Element[]\n}> = props => {\n props.id = props.id || createUniqueId()\n\n const [mapRoot, setMapRoot] = createSignal<MapboxMap>()\n const [pending, start] = useTransition()\n const [transitionType, setTransitionType] = createSignal('flyTo')\n\n onMount(() => {\n const map: MapboxMap = new mapboxgl.Map({\n ...props.options,\n style: vectorStyleList[props.options?.style] ||\n props.options?.style || { version: 8, sources: {}, layers: [] },\n container: mapRef,\n interactive: !!props.onViewportChange,\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 map.container = containerRef\n\n map.once('styledata').then(() => setMapRoot(map))\n\n onCleanup(() => map.remove())\n\n // Hook up events\n createEffect(() =>\n mapEvents.forEach(item => {\n if (props[item]) {\n const event = item.slice(2).toLowerCase()\n const callback = e => props[item](e)\n map.on(event, callback)\n onCleanup(() => map.off(event, callback))\n }\n })\n )\n\n // Update debug features\n createEffect(() => {\n map.showTileBoundaries = props.showTileBoundaries\n map.showTerrainWireframe = props.showTerrainWireframe\n map.showPadding = props.showPadding\n map.showCollisionBoxes = props.showCollisionBoxes\n map.showOverdrawInspector = props.showOverdrawInspector\n })\n\n // Update cursor\n createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle))\n //Update transition type\n createEffect(() => setTransitionType(props.transitionType))\n // Update projection\n createEffect(\n on(\n () => props.options?.projection,\n proj => map.setProjection(proj),\n { defer: true }\n )\n )\n\n // Update map style\n createEffect(\n on(\n () => props.options?.style,\n style => {\n const oldStyle = map.getStyle()\n const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'))\n const oldSources = Object.keys(oldStyle.sources)\n .filter(s => s.startsWith('cl-'))\n .reduce(\n (obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }),\n {}\n )\n map.setStyle(\n vectorStyleList[style] ||\n style || { version: 8, sources: {}, layers: [] }\n )\n map.once('styledata', () => {\n const newStyle = map.getStyle()\n map.setStyle({\n ...newStyle,\n sources: { ...newStyle.sources, ...oldSources },\n layers: [...newStyle.layers, ...oldLayers],\n })\n })\n },\n { defer: true }\n )\n )\n\n // Hook up viewport events\n createEffect(() => {\n const viewport = {\n id: null,\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport?.padding,\n bounds: props.viewport?.bounds,\n }\n\n const callMove = event => {\n if (event.originalEvent)\n props.onViewportChange &&\n props.onViewportChange({ ...viewport, id: props.id })\n setTransitionType('jumpTo')\n }\n\n const callEnd = event => {\n if (event.originalEvent)\n props.onViewportChange && props.onViewportChange(viewport)\n setTransitionType(props.transitionType)\n }\n\n map.on('move', callMove).on('moveend', callEnd)\n onCleanup(() => map.off('move', callMove).off('moveend', callEnd))\n })\n\n // Update boundaries\n createEffect(prev => {\n if (props.viewport?.bounds != prev)\n props.onViewportChange({\n ...props.viewport,\n ...map.cameraForBounds(props.viewport?.bounds, {\n padding: props.viewport?.padding,\n }),\n })\n return props.viewport?.bounds\n }, props.viewport?.bounds)\n\n // Update Viewport\n createEffect(() => {\n if (props.id === props.viewport?.id) return\n const viewport = {\n ...props.viewport,\n padding: props.viewport?.padding || 0,\n }\n switch (untrack(transitionType)) {\n case 'easeTo':\n map.stop().easeTo(viewport)\n case 'jumpTo':\n map.stop().jumpTo(viewport)\n default:\n map.stop().flyTo(viewport)\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\n return (\n <MapContext.Provider value={mapRoot}>\n <section\n ref={containerRef}\n style={{ position: 'absolute', 'z-index': 1 }}>\n {mapRoot() ? props.children : null}\n </section>\n <div\n ref={mapRef}\n class={props?.class}\n classList={props?.classList}\n style={{ height: '100%', width: '100%', ...props.style }}\n />\n </MapContext.Provider>\n )\n}\n","import {\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 { SourceSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport { rasterStyleList } from '../../styles'\n\nconst SourceContext = createContext<string>()\nexport const useSourceId = (): string => useContext(SourceContext)\n\nexport const Source: Component<{\n /** @optional Source ID for referencing non nexted Layers */\n id?: string\n /** @see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/ */\n source: SourceSpecification\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n\n const lookup = url =>\n rasterStyleList[url]\n ? {\n ...props.source,\n url: '',\n tiles: [\n rasterStyleList[url][0].replace('{apikey}', props.source.apikey),\n ],\n attribution: rasterStyleList[url][1],\n }\n : props.source\n\n // Add Source\n createEffect(() => {\n const source = lookup(props.source.url)\n source.tiles &&\n (source.tiles = ['a', 'b', 'c'].map(i =>\n source.tiles[0].replace('{s}', i)\n ))\n !map().getSource(props.id) && map().addSource(props.id, 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\n createEffect(() => {\n const source = map().getSource(props.id)\n if (!source) return\n\n // Update GeoJSON Data\n if (props.source.type === 'geojson' && props.source.data)\n source.setData(props.source.data)\n\n // Update Image URL\n if (\n props.source.type === 'image' &&\n (props.source.url || props.source.coordinates)\n )\n source.updateImage(props.source.url, props.source.coordinates)\n\n // Update Vector URL or Tiles\n if (\n props.source.type === 'vector' &&\n (props.source.url || props.source.tiles)\n )\n props.source.url\n ? source.setUrl(props.source.url)\n : source.setTiles(props.source.tiles)\n\n // Update Raster URL or Tiles\n if (\n props.source.type === 'raster' &&\n (props.source.url || props.source.tiles)\n ) {\n const src = lookup(props.source.url)\n src.tiles &&\n (src.tiles = ['a', 'b', 'c'].map(i => src.tiles[0].replace('{s}', i)))\n source._tileJSONRequest?.cancel()\n source.url = src.url\n source.scheme = src.scheme\n source._options = { ...source._options, ...src }\n map().style._sourceCaches[`other:${props.id}`]?.clearTiles()\n source.load()\n }\n })\n\n return (\n <SourceContext.Provider value={props.id}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n","import { onCleanup, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSourceId } from '../Source'\nimport { layerEvents } from '../../events'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\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\nexport const Layer: Component<{\n id?: string\n style?: StyleSpecification\n customLayer?: 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 children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const sourceId: string = useSourceId()\n props.id = props.id || createUniqueId()\n\n // Add Layer\n createEffect(() => {\n !map().getLayer(props.id) &&\n map().addLayer(\n props.customLayer || {\n ...props.style,\n id: props.id,\n source: sourceId,\n metadata: {\n smg: { beforeType: props.beforeType, beforeId: props.beforeId },\n },\n },\n props.beforeType\n ? map()\n ?.getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n //Remove Layer\n onCleanup(() => map().getLayer(props.id) && map().removeLayer(props.id))\n\n // Hook up events\n createEffect(() =>\n layerEvents.forEach(item => {\n if (props[item]) {\n const event = item.slice(2).toLowerCase()\n const callback = e => props[item](e)\n map()?.on(event, props.id, callback)\n onCleanup(() => map()?.off(event, props.id, callback))\n }\n })\n )\n\n // Update Style\n createEffect((prev: StyleSpecification) => {\n if (\n !props.style ||\n !map().style ||\n !map().getSource(sourceId) ||\n !map().getLayer(props.id)\n )\n return\n\n if (props.style.layout !== prev?.layout)\n diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value, { validate: false })\n )\n\n if (props.style.paint !== prev?.paint)\n diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value, { validate: false })\n )\n\n if (\n props.style.minzoom !== prev?.minzoom ||\n props.style.maxzoom !== prev?.maxzoom\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n if (props.style.filter !== prev?.filter)\n map().setFilter(props.id, props.style.filter, { validate: false })\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect((prev: boolean) => {\n if (\n props.visible === undefined ||\n props.visible === prev ||\n !map().getSource(sourceId) ||\n !map().getLayer(props.id)\n )\n return\n\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n return props.visible\n }, props.visible)\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().isStyleLoaded() && (await map().once('styledata'))\n\n map().removeFeatureState({\n source: sourceId,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: sourceId,\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","import { 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\nexport const Fog: Component<{\n style: FogSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n createEffect(() => {\n map().setFog(props.style)\n })\n\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(() => {\n props.visible !== undefined &&\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n","import { 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\nexport const Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n\n // Add Sky Layer\n createEffect(() => {\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(() => {\n props.visible !== undefined &&\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n","import { onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSourceId } 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\nexport const Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const sourceId: SourceSpecification = useSourceId()\n\n // Add Terrain Layer\n createEffect(() => {\n map().setTerrain({ ...props.style, source: sourceId })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(() => {\n props.visible !== undefined &&\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n","import { createEffect, onCleanup, createSignal, Component } 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\nexport const Control: Component<{\n type: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n | object\n custom?: any\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n\n const getControl = (type, options) => {\n if (props.custom) return new props.custom(options)\n switch (type) {\n case 'navigation':\n return new mapboxgl.NavigationControl(options)\n case 'scale':\n return new mapboxgl.ScaleControl(options)\n case 'attribution':\n return new mapboxgl.AttributionControl(options)\n case 'geolocate':\n return new mapboxgl.GeolocateControl(options)\n case 'fullscreen':\n return new mapboxgl.FullscreenControl()\n // options || { container: map().container }\n default:\n throw new Error(`Unknown control type: ${type}`)\n }\n }\n\n // Add Control\n createEffect(() => {\n const control = getControl(props.type, props.options)\n control && map()?.addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n","import { 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 { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nexport const Marker: Component<{\n options?: MarkerSpecification\n lnglat: LngLatLike\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n createEffect(() => {\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 && marker.setLngLat(props.lnglat))\n\n return <></>\n}\n","import { 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\nexport const Popup: Component<{\n options?: PopupSpecification\n lnglat: LngLatLike\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n createEffect(() => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lnglat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup && popup.setLngLat(props.lnglat))\n\n // Update Content\n createEffect(() => popup && popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n","import { 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\nexport const 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 createEffect(() => {\n if (props.url) {\n map().loadImage(\n props.url,\n (_, image) =>\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\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().style &&\n map().hasImage(props.id) &&\n map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n","import { createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type LngLatLike from 'mapbox-gl/src/geo/lng_lat.js'\nimport { MercatorCoordinate } from 'mapbox-gl'\n\n// linearly interpolate between two positions [x,y,z] based on time\nconst lerp = (a, b, t) => a.map((_, idx) => (1.0 - t) * a[idx] + t * b[idx])\n\n// sphericaly interpolate between two positions [x,y,z] based on time\nconst slerp = (a, b, t) => {\n const omega = 0.075\n // TODO: Proper Calculation\n // a.map((_, idx) => a[idx] * b[idx]).reduce((m, n) => m + n)\n\n return a.map(\n (_, idx) =>\n (Math.sin((1 - t) * omega) / Math.sin(omega)) * a[idx] +\n (Math.sin(t * omega) / Math.sin(omega)) * b[idx]\n )\n}\n\n// calculations from: https://easings.net\nconst easeQuad = {\n in: (x: number): number => x * x,\n out: (x: number): number => 1 - (1 - x) * (1 - x),\n inOut: (x: number): number =>\n x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,\n}\n\nexport const Camera: Component<{\n animate: boolean\n translate?: {\n type?: 'line' | 'sphere'\n start: [number, number, number]\n end: [number, number, number]\n target: LngLatLike\n targetEnd?: LngLatLike\n easing?: 'in' | 'out' | 'inOut'\n loop?: boolean\n duration: number\n }\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let animationTime = 0.1\n let isReverse = false\n\n const updateCameraPosition = ([lng, lat, alt], target) => {\n const camera = map().getFreeCameraOptions()\n camera.position = MercatorCoordinate.fromLngLat([lng, lat], alt)\n camera.lookAtPoint(target)\n map().setFreeCameraOptions(camera)\n }\n\n const frame = (time: number) => {\n props.animate && window.requestAnimationFrame(frame)\n const params = [\n props.translate.start,\n props.translate.end,\n props.translate.easing\n ? easeQuad[props.translate.easing](animationTime)\n : animationTime,\n ] as const\n const position =\n props.translate.type === 'line' ? lerp(...params) : slerp(...params)\n\n updateCameraPosition(position, props.translate.target)\n\n if (!props.translate.loop && (animationTime > 1.0 || animationTime < 0.0))\n isReverse = !isReverse\n animationTime = isReverse ? animationTime - 0.001 : animationTime + 0.001\n }\n\n createEffect(async () => {\n props.animate && window.requestAnimationFrame(frame)\n })\n\n return props.children\n}\n"],"names":["mapEvents","layerEvents","mapBase","gitBase","vectorStyleList","mb:light","mb:dark","mb:streets","mb:outdoor","mb:sat","mb:sat-streets","mb:nav","mb:nav-night","mb:basic","mb:monochrome","mb:leshine","mb:icecream","mb:cali","mb:northstar","mb:mineral","mb:moonlight","mb:frank","mb:minimo","mb:decimal","mb:standard","mb:blueprint","mb:bubble","mb:pencil","mb:swiss-ski","mb:vintage","mb:whaam","mb:neon","mb:camoflauge","mb:emerald","mb:runner","mb:x-ray","rasterStyleList","osm:org","osm:human","osm:cycle","carto:voyager","carto:positron","carto:dark","open:topo","stamen:toner","stamen:toner-lite","stamen:watercolor","stamen:terrain","tf:cycle","tf:trans","tf:trans-dark","tf:landscape","tf:outdoors","tf:neighbourhood","tf:spinal","tf:pioneer","tf:atlas","tf:mobile","let","mapRef","containerRef","MapContext","createContext","useMap","useContext","MapGL","props","id","createUniqueId","mapRoot","setMapRoot","createSignal","start","useTransition","transitionType","setTransitionType","onMount","_props$viewport13","map","mapboxgl","Map","options","style","_props$options","_props$options2","version","sources","layers","container","interactive","onViewportChange","bounds","viewport","_props$viewport","center","_props$viewport2","zoom","pitch","bearing","fitBoundsOptions","padding","_props$viewport6","once","then","onCleanup","remove","createEffect","forEach","item","event","slice","toLowerCase","callback","e","on","off","showTileBoundaries","showTerrainWireframe","showPadding","showCollisionBoxes","showOverdrawInspector","getCanvas","cursor","cursorStyle","_props$options3","projection","proj","setProjection","defer","_props$options4","oldStyle","getStyle","oldLayers","filter","l","startsWith","oldSources","Object","keys","s","reduce","obj","key","setStyle","newStyle","_props$viewport8","getCenter","getZoom","getPitch","getBearing","_props$viewport7","callMove","originalEvent","callEnd","prev","_props$viewport12","_props$viewport9","cameraForBounds","_props$viewport10","_props$viewport11","_props$viewport15","_props$viewport14","untrack","stop","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","_$createComponent","Provider","value","children","_el$","_tmpl$","cloneNode","_ref$","setProperty","_$insert","_el$2","_tmpl$2","_ref$2","_$effect","_p$","_v$","class","_v$2","classList","_v$3","height","width","_$className","_$classList","_$style","undefined","SourceContext","useSourceId","Source","lookup","url","source","tiles","replace","apikey","attribution","i","getSource","addSource","layer","removeLayer","removeSource","type","data","setData","coordinates","updateImage","setUrl","setTiles","_map$style$_sourceCac","src","_source$_tileJSONRequ","_tileJSONRequest","cancel","scheme","_options","_sourceCaches","clearTiles","load","diff","newProps","prevProps","Set","acc","push","Layer","sourceId","_map","getLayer","addLayer","customLayer","metadata","smg","beforeType","beforeId","find","_map2","_map3","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","setFilter","visible","async","isStyleLoaded","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","custom","NavigationControl","ScaleControl","AttributionControl","GeolocateControl","FullscreenControl","Error","getControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","loadImage","_","image","hasImage","addImage","removeImage","error","lerp","a","b","t","idx","slerp","Math","sin","easeQuad","in","x","out","inOut","pow","Camera","animationTime","isReverse","frame","time","animate","params","translate","end","easing","updateCameraPosition","lng","lat","alt","target","camera","getFreeCameraOptions","MercatorCoordinate","fromLngLat","lookAtPoint","setFreeCameraOptions"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/events.ts","../../src/styles.ts","../../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","../../src/components/Camera/index.tsx"],"sourcesContent":["const mapEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onPreClick',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n 'onWheel',\n 'onResize',\n 'onRemove',\n 'onTouchMove',\n 'onMoveStart',\n 'onMove',\n 'onMoveEnd',\n 'onDragStart',\n 'onDrag',\n 'onDragEnd',\n 'onZoomStart',\n 'onZoom',\n 'onZoomEnd',\n 'onRotateStart',\n 'onRotate',\n 'onRotatEnd',\n 'onPitchStart',\n 'onPitch',\n 'onPitchEnd',\n 'onBoxZoomStart',\n 'onBoxZoomEnd',\n 'onBoxZoomCancel',\n 'onWebglContextLost',\n 'onWebglContextRestored',\n 'onLoad',\n 'onRender',\n 'onIdle',\n 'onError',\n 'onData',\n 'onStyleData',\n 'onSourceData',\n 'onDataLoading',\n 'onStyleDataLoading',\n 'onSourceDataLoading',\n 'onStyleImageMissing',\n]\n\nconst layerEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n]\n\nexport { mapEvents, layerEvents }\n","const mapBase = 'mapbox://styles/mapbox'\nconst gitBase = 'https://raw.githubusercontent.com'\n\nexport const vectorStyleList = {\n 'mb:light': `${mapBase}/light-v10`,\n 'mb:dark': `${mapBase}/dark-v10`,\n 'mb:streets': `${mapBase}/streets-v11`,\n 'mb:outdoor': `${mapBase}/outdoors-v11`,\n 'mb:sat': `${mapBase}/satellite-v9`,\n 'mb:sat-streets': `${mapBase}/satellite-streets-v11`,\n 'mb:nav': `${mapBase}/navigation-guidance-day-v4`,\n 'mb:nav-night': `${mapBase}/navigation-guidance-night-v4`,\n\n 'mb:basic': `${mapBase}/cjf4m44iw0uza2spb3q0a7s41`,\n 'mb:monochrome': `${mapBase}/cjv6rzz4j3m4b1fqcchuxclhb`,\n 'mb:leshine': `${mapBase}/cjcunv5ae262f2sm9tfwg8i0w`,\n 'mb:icecream': `${mapBase}/cj7t3i5yj0unt2rmt3y4b5e32`,\n 'mb:cali': `${mapBase}/cjerxnqt3cgvp2rmyuxbeqme7`,\n 'mb:northstar': `${mapBase}/cj44mfrt20f082snokim4ungi`,\n 'mb:mineral': `${mapBase}/cjtep62gq54l21frr1whf27ak`,\n 'mb:moonlight': `${mapBase}/cj3kbeqzo00022smj7akz3o1e`,\n 'mb:frank': `${mapBase}-map-design/ckshxkppe0gge18nz20i0nrwq`,\n 'mb:minimo': `${mapBase}-map-design/cksjc2nsq1bg117pnekb655h1`,\n 'mb:decimal': `${mapBase}-map-design/ck4014y110wt61ctt07egsel6`,\n 'mb:standard': `${mapBase}-map-design/ckr0svm3922ki18qntevm857n`,\n 'mb:blueprint': `${mapBase}-map-design/cks97e1e37nsd17nzg7p0308g`,\n 'mb:bubble': `${mapBase}-map-design/cksysy2nl62zp17quosctdtcc`,\n 'mb:pencil': `${mapBase}-map-design/cks9iema71es417mlrft4go2k`,\n\n 'mb:swiss-ski': `${gitBase}/mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,\n 'mb:vintage': `${gitBase}/mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,\n 'mb:whaam': `${gitBase}/mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,\n 'mb:neon': `${gitBase}/NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,\n 'mb:camoflauge': `${gitBase}/jingsam/mapbox-gl-styles/master/Camouflage.json`,\n 'mb:emerald': `${gitBase}/jingsam/mapbox-gl-styles/master/Emerald.json`,\n 'mb:runner': `${gitBase}/jingsam/mapbox-gl-styles/master/Runner.json`,\n 'mb:x-ray': `${gitBase}/jingsam/mapbox-gl-styles/master/X-ray.json`,\n}\n\nexport const rasterStyleList = {\n 'osm:org': [\n 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',\n 'Map &copy; <a href=\"https://www.openstreetmap.org\"><em>OpenStreetMap</em></a>',\n ],\n 'osm:human': [\n 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',\n 'Map &copy; <a href=\"http://hot.openstreetmap.org\"><em>Humanitarian OpenStreetMap Team</em></a>',\n ],\n 'osm:cycle': [\n 'https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://www.cyclosm.org\" target=\"_blank\"><em>CyclOSM</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'carto:voyager': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'carto:positron': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'carto:dark': [\n 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://carto.com/attribution\"><em>Carto</em></a>',\n ],\n 'open:topo': [\n 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://opentopomap.org/credits\"><em>OpenTopoMap</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:toner': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:toner-lite': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:watercolor': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'stamen:terrain': [\n 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',\n 'Maps &copy; <a href=\"https://stamen.com\" target=\"_blank\"><em>Stamen Design</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:cycle': [\n 'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:trans': [\n 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:trans-dark': [\n 'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:landscape': [\n 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:outdoors': [\n 'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:neighbourhood': [\n 'https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:spinal': [\n 'https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:pioneer': [\n 'https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:atlas': [\n 'https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n 'tf:mobile': [\n 'https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey={apikey}',\n 'Maps &copy; <a href=\"https://thunderforest.com\" target=\"_blank\"><em>Thunderforest</em></a>, Data &copy; <a href=\"http://www.openstreetmap.org/copyright\" target=\"_blank\"><em>OpenStreetMap</em></a>',\n ],\n}\n","import {\n createSignal,\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n createUniqueId,\n untrack,\n on,\n} from 'solid-js'\nimport { mapEvents } from '../../events'\nimport { vectorStyleList } from '../../styles'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type { MapboxMap, MapboxOptions } from 'mapbox-gl/src/ui/map'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\nimport type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js'\nimport type { JSX } from 'solid-js'\n\nexport type Viewport = {\n id?: string\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: PaddingOptions\n}\n\nlet mapRef: HTMLDivElement\nlet containerRef: HTMLElement\n\nconst MapContext = createContext<MapboxMap>()\n/** Provides the Mapbox Map Object */\nexport const useMap = (): MapboxMap => useContext(MapContext)\n\n/** Creates a new Map Container */\nexport const MapGL: Component<{\n id?: string\n /** Map Container CSS Style */\n style?: JSX.CSSProperties\n /** Map Container CSS Class */\n class?: string\n /** SolidJS Class List for Map Container */\n classList?: {\n [k: string]: boolean | undefined\n }\n /** Current Map View */\n viewport?: Viewport\n /** Mapbox Options\n * @see https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters\n */\n options?: MapboxOptions\n /** Type for pan, move and zoom transitions */\n transitionType?: 'flyTo' | 'easeTo' | 'jumpTo'\n /** Event listener for Viewport updates */\n onViewportChange?: (viewport: Viewport) => void\n /** Displays Map Tile Borders */\n showTileBoundaries?: boolean\n /** Displays Wireframe if Terrain is visible */\n showTerrainWireframe?: boolean\n /** Displays Borders if Padding is set */\n showPadding?: boolean\n /** Displays Label Collision Boxes */\n showCollisionBoxes?: boolean\n /** Displays all feature outlines even if normally not drawn by style rules */\n showOverdrawInspector?: boolean\n triggerResize?: boolean\n repaint?: boolean\n /** Mouse Cursor Style */\n cursorStyle?: string\n ref?: HTMLDivElement\n /** Children within the Map Container */\n children?: Element | Element[]\n}> = props => {\n props.id = props.id || createUniqueId()\n\n const [mapRoot, setMapRoot] = createSignal<MapboxMap>()\n const [pending, start] = useTransition()\n const [transitionType, setTransitionType] = createSignal('flyTo')\n\n onMount(async () => {\n const map: MapboxMap = new mapboxgl.Map({\n ...props.options,\n style: vectorStyleList[props.options?.style] ||\n props.options?.style || { version: 8, sources: {}, layers: [] },\n container: mapRef,\n interactive: !!props.onViewportChange,\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 map.container = containerRef\n\n map.once('styledata').then(() => setMapRoot(map))\n\n onCleanup(() => map.remove())\n\n // Hook up events\n createEffect(() =>\n mapEvents.forEach(item => {\n if (props[item]) {\n const event = item.slice(2).toLowerCase()\n const callback = e => props[item](e)\n map.on(event, callback)\n onCleanup(() => map.off(event, callback))\n }\n })\n )\n\n // Update debug features\n createEffect(() => {\n map.showTileBoundaries = props.showTileBoundaries\n map.showTerrainWireframe = props.showTerrainWireframe\n map.showPadding = props.showPadding\n map.showCollisionBoxes = props.showCollisionBoxes\n map.showOverdrawInspector = props.showOverdrawInspector\n })\n\n // Update cursor\n createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle))\n //Update transition type\n createEffect(() => setTransitionType(props.transitionType))\n // Update projection\n createEffect(\n on(\n () => props.options?.projection,\n proj => map.setProjection(proj),\n { defer: true }\n )\n )\n\n // Update map style\n createEffect(\n on(\n () => props.options?.style,\n style => {\n const oldStyle = map.getStyle()\n const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'))\n const oldSources = Object.keys(oldStyle.sources)\n .filter(s => s.startsWith('cl-'))\n .reduce(\n (obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }),\n {}\n )\n map.setStyle(\n vectorStyleList[style] ||\n style || { version: 8, sources: {}, layers: [] }\n )\n map.once('styledata', () => {\n const newStyle = map.getStyle()\n map.setStyle({\n ...newStyle,\n sources: { ...newStyle.sources, ...oldSources },\n layers: [...newStyle.layers, ...oldLayers],\n })\n })\n },\n { defer: true }\n )\n )\n\n // Hook up viewport events\n createEffect(() => {\n const viewport = {\n id: null,\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport?.padding,\n bounds: props.viewport?.bounds,\n }\n\n const callMove = event => {\n if (event.originalEvent)\n props.onViewportChange &&\n props.onViewportChange({ ...viewport, id: props.id })\n setTransitionType('jumpTo')\n }\n\n const callEnd = event => {\n if (event.originalEvent)\n props.onViewportChange && props.onViewportChange(viewport)\n setTransitionType(props.transitionType)\n }\n\n map.on('move', callMove).on('moveend', callEnd)\n onCleanup(() => map.off('move', callMove).off('moveend', callEnd))\n })\n\n // Update boundaries\n createEffect(prev => {\n if (props.viewport?.bounds != prev)\n props.onViewportChange({\n ...props.viewport,\n ...map.cameraForBounds(props.viewport?.bounds, {\n padding: props.viewport?.padding,\n }),\n })\n return props.viewport?.bounds\n }, props.viewport?.bounds)\n\n // Update Viewport\n createEffect(() => {\n if (props.id === props.viewport?.id) return\n const viewport = {\n ...props.viewport,\n padding: props.viewport?.padding || 0,\n }\n switch (untrack(transitionType)) {\n case 'easeTo':\n map.stop().easeTo(viewport)\n case 'jumpTo':\n map.stop().jumpTo(viewport)\n default:\n map.stop().flyTo(viewport)\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\n return (\n <MapContext.Provider value={mapRoot}>\n <section\n ref={containerRef}\n style={{ position: 'absolute', 'z-index': 1 }}>\n {mapRoot() ? props.children : null}\n </section>\n <div\n ref={mapRef}\n class={props?.class}\n classList={props?.classList}\n style={{ height: '100%', width: '100%', ...props.style }}\n />\n </MapContext.Provider>\n )\n}\n","import {\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 { SourceSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport { rasterStyleList } from '../../styles'\n\nconst SourceContext = createContext<string>()\nexport const useSourceId = (): string => useContext(SourceContext)\n\nexport const Source: Component<{\n /** @optional Source ID for referencing non nexted Layers */\n id?: string\n /** @see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/ */\n source: SourceSpecification\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n\n const lookup = url =>\n rasterStyleList[url]\n ? {\n ...props.source,\n url: '',\n tiles: [\n rasterStyleList[url][0].replace('{apikey}', props.source.apikey),\n ],\n attribution: rasterStyleList[url][1],\n }\n : props.source\n\n // Add Source\n createEffect(() => {\n const source = lookup(props.source.url)\n source.tiles &&\n (source.tiles = ['a', 'b', 'c'].map(i =>\n source.tiles[0].replace('{s}', i)\n ))\n !map().getSource(props.id) && map().addSource(props.id, 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\n createEffect(() => {\n const source = map().getSource(props.id)\n if (!source) return\n\n // Update GeoJSON Data\n if (props.source.type === 'geojson' && props.source.data)\n source.setData(props.source.data)\n\n // Update Image URL\n if (\n props.source.type === 'image' &&\n (props.source.url || props.source.coordinates)\n )\n source.updateImage(props.source.url, props.source.coordinates)\n\n // Update Vector URL or Tiles\n if (\n props.source.type === 'vector' &&\n (props.source.url || props.source.tiles)\n )\n props.source.url\n ? source.setUrl(props.source.url)\n : source.setTiles(props.source.tiles)\n\n // Update Raster URL or Tiles\n if (\n props.source.type === 'raster' &&\n (props.source.url || props.source.tiles)\n ) {\n const src = lookup(props.source.url)\n src.tiles &&\n (src.tiles = ['a', 'b', 'c'].map(i => src.tiles[0].replace('{s}', i)))\n source._tileJSONRequest?.cancel()\n source.url = src.url\n source.scheme = src.scheme\n source._options = { ...source._options, ...src }\n map().style._sourceCaches[`other:${props.id}`]?.clearTiles()\n source.load()\n }\n })\n\n return (\n <SourceContext.Provider value={props.id}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n","import { onCleanup, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSourceId } from '../Source'\nimport { layerEvents } from '../../events'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\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\nexport const Layer: Component<{\n id?: string\n style?: StyleSpecification\n customLayer?: 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 children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const sourceId: string = useSourceId()\n props.id = props.id || createUniqueId()\n\n // Add Layer\n createEffect(() => {\n !map().getLayer(props.id) &&\n map().addLayer(\n props.customLayer || {\n ...props.style,\n id: props.id,\n source: sourceId,\n metadata: {\n smg: { beforeType: props.beforeType, beforeId: props.beforeId },\n },\n },\n props.beforeType\n ? map()\n ?.getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n //Remove Layer\n onCleanup(() => map().getLayer(props.id) && map().removeLayer(props.id))\n\n // Hook up events\n createEffect(() =>\n layerEvents.forEach(item => {\n if (props[item]) {\n const event = item.slice(2).toLowerCase()\n const callback = e => props[item](e)\n map()?.on(event, props.id, callback)\n onCleanup(() => map()?.off(event, props.id, callback))\n }\n })\n )\n\n // Update Style\n createEffect((prev: StyleSpecification) => {\n if (\n !props.style ||\n !map().style ||\n !map().getSource(sourceId) ||\n !map().getLayer(props.id)\n )\n return\n\n if (props.style.layout !== prev?.layout)\n diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value, { validate: false })\n )\n\n if (props.style.paint !== prev?.paint)\n diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value, { validate: false })\n )\n\n if (\n props.style.minzoom !== prev?.minzoom ||\n props.style.maxzoom !== prev?.maxzoom\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n if (props.style.filter !== prev?.filter)\n map().setFilter(props.id, props.style.filter, { validate: false })\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect((prev: boolean) => {\n if (\n props.visible === undefined ||\n props.visible === prev ||\n !map().getSource(sourceId) ||\n !map().getLayer(props.id)\n )\n return\n\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n return props.visible\n }, props.visible)\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().isStyleLoaded() && (await map().once('styledata'))\n\n map().removeFeatureState({\n source: sourceId,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: sourceId,\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","import { 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\nexport const Fog: Component<{\n style: FogSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n createEffect(() => {\n map().setFog(props.style)\n })\n\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(() => {\n props.visible !== undefined &&\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n","import { 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\nexport const Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n\n // Add Sky Layer\n createEffect(() => {\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(() => {\n props.visible !== undefined &&\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n","import { onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSourceId } 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\nexport const Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const sourceId: SourceSpecification = useSourceId()\n\n // Add Terrain Layer\n createEffect(() => {\n map().setTerrain({ ...props.style, source: sourceId })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(() => {\n props.visible !== undefined &&\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n","import { createEffect, onCleanup, createSignal, Component } 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\nexport const Control: Component<{\n type: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n | object\n custom?: any\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n\n const getControl = (type, options) => {\n if (props.custom) return new props.custom(options)\n switch (type) {\n case 'navigation':\n return new mapboxgl.NavigationControl(options)\n case 'scale':\n return new mapboxgl.ScaleControl(options)\n case 'attribution':\n return new mapboxgl.AttributionControl(options)\n case 'geolocate':\n return new mapboxgl.GeolocateControl(options)\n case 'fullscreen':\n return new mapboxgl.FullscreenControl()\n // options || { container: map().container }\n default:\n throw new Error(`Unknown control type: ${type}`)\n }\n }\n\n // Add Control\n createEffect(() => {\n const control = getControl(props.type, props.options)\n control && map()?.addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n","import { 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 { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nexport const Marker: Component<{\n options?: MarkerSpecification\n lngLat: LngLatLike\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n createEffect(() => {\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 && marker.setLngLat(props.lngLat))\n\n return <></>\n}\n","import { 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\nexport const Popup: Component<{\n options?: PopupSpecification\n lngLat: LngLatLike\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n createEffect(() => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lngLat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup && popup.setLngLaL(props.lngLat))\n\n // Update Content\n createEffect(() => popup && popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n","import { 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\nexport const 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 createEffect(() => {\n if (props.url) {\n map().loadImage(\n props.url,\n (_, image) =>\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\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().style &&\n map().hasImage(props.id) &&\n map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n","import { createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type LngLatLike from 'mapbox-gl/src/geo/lng_lat.js'\nimport { MercatorCoordinate } from 'mapbox-gl'\n\n// linearly interpolate between two positions [x,y,z] based on time\nconst lerp = (a, b, t) => a.map((_, idx) => (1.0 - t) * a[idx] + t * b[idx])\n\n// sphericaly interpolate between two positions [x,y,z] based on time\nconst slerp = (a, b, t) => {\n const omega = 0.075\n // TODO: Proper Calculation\n // a.map((_, idx) => a[idx] * b[idx]).reduce((m, n) => m + n)\n\n return a.map(\n (_, idx) =>\n (Math.sin((1 - t) * omega) / Math.sin(omega)) * a[idx] +\n (Math.sin(t * omega) / Math.sin(omega)) * b[idx]\n )\n}\n\n// calculations from: https://easings.net\nconst easeQuad = {\n in: (x: number): number => x * x,\n out: (x: number): number => 1 - (1 - x) * (1 - x),\n inOut: (x: number): number =>\n x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,\n}\n\nexport const Camera: Component<{\n animate: boolean\n translate?: {\n type?: 'line' | 'sphere'\n start: [number, number, number]\n end: [number, number, number]\n target: LngLatLike\n targetEnd?: LngLatLike\n easing?: 'in' | 'out' | 'inOut'\n loop?: boolean\n duration: number\n }\n children?: any\n}> = props => {\n const map: MapboxMap = useMap()\n let animationTime = 0.1\n let isReverse = false\n\n const updateCameraPosition = ([lng, lat, alt], target) => {\n const camera = map().getFreeCameraOptions()\n camera.position = MercatorCoordinate.fromLngLat([lng, lat], alt)\n camera.lookAtPoint(target)\n map().setFreeCameraOptions(camera)\n }\n\n const frame = (time: number) => {\n props.animate && window.requestAnimationFrame(frame)\n const params = [\n props.translate.start,\n props.translate.end,\n props.translate.easing\n ? easeQuad[props.translate.easing](animationTime)\n : animationTime,\n ] as const\n const position =\n props.translate.type === 'line' ? lerp(...params) : slerp(...params)\n\n updateCameraPosition(position, props.translate.target)\n\n if (!props.translate.loop && (animationTime > 1.0 || animationTime < 0.0))\n isReverse = !isReverse\n animationTime = isReverse ? animationTime - 0.001 : animationTime + 0.001\n }\n\n createEffect(async () => {\n props.animate && window.requestAnimationFrame(frame)\n })\n\n return props.children\n}\n"],"names":["mapEvents","layerEvents","mapBase","gitBase","vectorStyleList","mb:light","mb:dark","mb:streets","mb:outdoor","mb:sat","mb:sat-streets","mb:nav","mb:nav-night","mb:basic","mb:monochrome","mb:leshine","mb:icecream","mb:cali","mb:northstar","mb:mineral","mb:moonlight","mb:frank","mb:minimo","mb:decimal","mb:standard","mb:blueprint","mb:bubble","mb:pencil","mb:swiss-ski","mb:vintage","mb:whaam","mb:neon","mb:camoflauge","mb:emerald","mb:runner","mb:x-ray","rasterStyleList","osm:org","osm:human","osm:cycle","carto:voyager","carto:positron","carto:dark","open:topo","stamen:toner","stamen:toner-lite","stamen:watercolor","stamen:terrain","tf:cycle","tf:trans","tf:trans-dark","tf:landscape","tf:outdoors","tf:neighbourhood","tf:spinal","tf:pioneer","tf:atlas","tf:mobile","let","mapRef","containerRef","MapContext","createContext","useMap","useContext","MapGL","props","id","createUniqueId","mapRoot","setMapRoot","createSignal","start","useTransition","transitionType","setTransitionType","onMount","async","_props$viewport13","map","mapboxgl","Map","options","style","_props$options","_props$options2","version","sources","layers","container","interactive","onViewportChange","bounds","viewport","_props$viewport","center","_props$viewport2","zoom","pitch","bearing","fitBoundsOptions","padding","_props$viewport6","once","then","onCleanup","remove","createEffect","forEach","item","event","slice","toLowerCase","callback","e","on","off","showTileBoundaries","showTerrainWireframe","showPadding","showCollisionBoxes","showOverdrawInspector","getCanvas","cursor","cursorStyle","_props$options3","projection","proj","setProjection","defer","_props$options4","oldStyle","getStyle","oldLayers","filter","l","startsWith","oldSources","Object","keys","s","reduce","obj","key","setStyle","newStyle","_props$viewport8","getCenter","getZoom","getPitch","getBearing","_props$viewport7","callMove","originalEvent","callEnd","prev","_props$viewport12","_props$viewport9","cameraForBounds","_props$viewport10","_props$viewport11","_props$viewport15","_props$viewport14","untrack","stop","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","_$createComponent","Provider","value","children","_el$","_tmpl$","cloneNode","_ref$","setProperty","_$insert","_el$2","_tmpl$2","_ref$2","_$effect","_p$","_v$","class","_v$2","classList","_v$3","height","width","_$className","_$classList","_$style","undefined","SourceContext","useSourceId","Source","lookup","url","source","tiles","replace","apikey","attribution","i","getSource","addSource","layer","removeLayer","removeSource","type","data","setData","coordinates","updateImage","setUrl","setTiles","_map$style$_sourceCac","src","_source$_tileJSONRequ","_tileJSONRequest","cancel","scheme","_options","_sourceCaches","clearTiles","load","diff","newProps","prevProps","Set","acc","push","Layer","sourceId","_map","getLayer","addLayer","customLayer","metadata","smg","beforeType","beforeId","find","_map2","_map3","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","setFilter","visible","isStyleLoaded","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","custom","NavigationControl","ScaleControl","AttributionControl","GeolocateControl","FullscreenControl","Error","getControl","addControl","position","removeControl","Marker","marker","setLngLat","lngLat","setPopup","Popup","setDOMContent","addTo","popup","setLngLaL","Image","loadImage","_","image","hasImage","addImage","removeImage","error","lerp","a","b","t","idx","slerp","Math","sin","easeQuad","in","x","out","inOut","pow","Camera","animationTime","isReverse","frame","time","animate","params","translate","end","easing","updateCameraPosition","lng","lat","alt","target","camera","getFreeCameraOptions","MercatorCoordinate","fromLngLat","lookAtPoint","setFreeCameraOptions"],"mappings":"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"}
@@ -14,7 +14,7 @@ export const MapGL = props => {
14
14
  const [mapRoot, setMapRoot] = createSignal();
15
15
  const [pending, start] = useTransition();
16
16
  const [transitionType, setTransitionType] = createSignal('flyTo');
17
- onMount(() => {
17
+ onMount(async () => {
18
18
  const map = new mapboxgl.Map({
19
19
  ...props.options,
20
20
  style: vectorStyleList[props.options?.style] ||
@@ -7,7 +7,7 @@ export const Marker = props => {
7
7
  // Add Marker
8
8
  createEffect(() => {
9
9
  marker = new mapboxgl.Marker(props.options)
10
- .setLngLat(props.lnglat)
10
+ .setLngLat(props.lngLat)
11
11
  .setPopup(props.children
12
12
  ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)
13
13
  : null)
@@ -16,6 +16,6 @@ export const Marker = props => {
16
16
  // Remove Marker
17
17
  onCleanup(() => marker.remove());
18
18
  // Update Position
19
- createEffect(() => marker && marker.setLngLat(props.lnglat));
19
+ createEffect(() => marker && marker.setLngLat(props.lngLat));
20
20
  return <></>;
21
21
  };
@@ -7,14 +7,14 @@ export const Popup = props => {
7
7
  // Add Popup
8
8
  createEffect(() => {
9
9
  popup = new mapboxgl.Popup(props.options)
10
- .setLngLat(props.lnglat)
10
+ .setLngLat(props.lngLat)
11
11
  .setDOMContent(<div>{props.children}</div>)
12
12
  .addTo(map());
13
13
  });
14
14
  // Remove Popup
15
15
  onCleanup(() => popup.remove());
16
16
  // Update Position
17
- createEffect(() => popup && popup.setLngLat(props.lnglat));
17
+ createEffect(() => popup && popup.setLngLaL(props.lngLat));
18
18
  // Update Content
19
19
  createEffect(() => popup && popup.setDOMContent(<div>{props.children}</div>));
20
20
  return <></>;
@@ -3,6 +3,6 @@ import type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js';
3
3
  import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
4
4
  export declare const Marker: Component<{
5
5
  options?: MarkerSpecification;
6
- lnglat: LngLatLike;
6
+ lngLat: LngLatLike;
7
7
  children?: any;
8
8
  }>;
@@ -3,6 +3,6 @@ import type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js';
3
3
  import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
4
4
  export declare const Popup: Component<{
5
5
  options?: PopupSpecification;
6
- lnglat: LngLatLike;
6
+ lngLat: LngLatLike;
7
7
  children?: any;
8
8
  }>;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.10",
2
+ "version": "1.2.13",
3
3
  "name": "solid-map-gl",
4
4
  "description": "Solid Component Library for Mapbox GL JS",
5
5
  "info": "Solid Component Library for 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.",
@@ -30,10 +30,8 @@
30
30
  "types": "dist/types/index.d.ts",
31
31
  "exports": {
32
32
  ".": {
33
- "solid": "./dist/index/index.jsx",
34
- "default": "./dist/esm/index.js",
35
- "import": "./dist/esm/index.js",
36
- "browser": "./dist/esm/index.js"
33
+ "solid": "./dist/source/index.jsx",
34
+ "default": "./dist/esm/index.js"
37
35
  }
38
36
  },
39
37
  "scripts": {
@@ -53,19 +51,19 @@
53
51
  "devDependencies": {
54
52
  "jsdom": "^19.0.0",
55
53
  "mapbox-gl": "^2.8.2",
56
- "rollup": "^2.74.1",
54
+ "rollup": "^2.75.1",
57
55
  "rollup-plugin-import-css": "^3.0.3",
58
56
  "rollup-plugin-uglify": "^6.0.4",
59
57
  "rollup-preset-solid": "^1.4.0",
60
- "solid-js": "1.3.14",
58
+ "solid-js": "^1.4.3",
61
59
  "solid-testing-library": "^0.3.0",
62
60
  "typescript": "^4.7.2",
63
61
  "vite": "^2.9.9",
64
62
  "vite-plugin-solid": "^2.2.6",
65
- "vitest": "^0.12.9"
63
+ "vitest": "^0.13.0"
66
64
  },
67
65
  "peerDependencies": {
68
66
  "mapbox-gl": "^2.8.2",
69
- "solid-js": "1.3.14"
67
+ "solid-js": "^1.4.3"
70
68
  }
71
69
  }