solid-map-gl 1.2.11 → 1.2.12
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 +62 -226
- package/package.json +5 -7
package/README.md
CHANGED
|
@@ -1,256 +1,91 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Solid Mapbox GL JS
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[ ](https://www.npmjs.com/package/solid-map-gl) [](LICENSE/) [ ](https://bundlephobia.com/package/solid-map-gl) 
|
|
5
|
+
[ ](https://www.npmjs.com/package/solid-map-gl) [](LICENSE/) [ ](https://bundlephobia.com/package/solid-map-gl) 
|
|
8
6
|
|
|
9
7
|
[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
8
|
|
|
11
|
-
|
|
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
|
-
|
|
9
|
+
## [Documentation](https://gis-hub.gitbook.io/solid-map-gl) — [Examples & Playground](https://determined-mirzakhani-29bbc7.netlify.app)
|
|
27
10
|
|
|
28
|
-
|
|
11
|
+
<br>
|
|
29
12
|
|
|
30
|
-
|
|
13
|
+
|
|
31
14
|
|
|
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
|
-
\
|
|
15
|
+
## Installation
|
|
42
16
|
|
|
43
17
|
|
|
44
18
|
```shell
|
|
45
|
-
pnpm add solid-map-gl
|
|
19
|
+
pnpm add mapbox-gl solid-map-gl
|
|
20
|
+
# or
|
|
21
|
+
yarn add mapbox-gl solid-map-gl
|
|
22
|
+
# or
|
|
23
|
+
npm i mapbox-gl solid-map-gl
|
|
46
24
|
```
|
|
47
25
|
|
|
48
|
-
|
|
26
|
+
## Components
|
|
49
27
|
|
|
50
28
|
| Component | Description |
|
|
51
29
|
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
-
| [MapGL](
|
|
53
|
-
| [Source](
|
|
54
|
-
| [Layer](
|
|
55
|
-
| [Sky](
|
|
56
|
-
| [Fog](
|
|
57
|
-
| [Terrain](
|
|
58
|
-
| [Image](
|
|
59
|
-
| [Popup](
|
|
60
|
-
| [Marker](
|
|
61
|
-
| [Control](
|
|
30
|
+
| [MapGL](https://gis-hub.gitbook.io/solid-map-gl/components/mapgl) | Represents map on the page |
|
|
31
|
+
| [Source](https://gis-hub.gitbook.io/solid-map-gl/components/source) | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
|
|
32
|
+
| [Layer](https://gis-hub.gitbook.io/solid-map-gl/components/layer) | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style |
|
|
33
|
+
| [Sky](https://gis-hub.gitbook.io/solid-map-gl/components/sky) | Specify the Sky Layer |
|
|
34
|
+
| [Fog](https://gis-hub.gitbook.io/solid-map-gl/components/fog) | Specify the Fog Layer |
|
|
35
|
+
| [Terrain](https://gis-hub.gitbook.io/solid-map-gl/components/terrain) | Specify the Terrain Layer |
|
|
36
|
+
| [Image](https://gis-hub.gitbook.io/solid-map-gl/components/image) | Adds an image to the map style |
|
|
37
|
+
| [Popup](https://gis-hub.gitbook.io/solid-map-gl/components/popup) | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup) |
|
|
38
|
+
| [Marker](https://gis-hub.gitbook.io/solid-map-gl/components/marker) | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) |
|
|
39
|
+
| [Control](https://gis-hub.gitbook.io/solid-map-gl/components/control) | Represents the map's control |
|
|
62
40
|
|
|
63
|
-
|
|
41
|
+
## Usage
|
|
64
42
|
|
|
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.
|
|
70
43
|
|
|
71
44
|
```jsx
|
|
72
|
-
import
|
|
73
|
-
|
|
74
|
-
|
|
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={{
|
|
101
|
-
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.
|
|
45
|
+
import { render } from "solid-js/web";
|
|
46
|
+
import { Component, createSignal } from "solid-js";
|
|
47
|
+
import MapGL, { Viewport, Source, Layer } from "solid-map-gl";
|
|
112
48
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
import MapGL, { Source, Layer } from 'solid-map-gl';
|
|
49
|
+
const App: Component = () => {
|
|
50
|
+
const [viewport, setViewport] = createSignal({
|
|
51
|
+
center: [-122.45, 37.78],
|
|
52
|
+
zoom: 11,
|
|
53
|
+
} as Viewport);
|
|
119
54
|
|
|
120
|
-
|
|
121
|
-
|
|
55
|
+
return (
|
|
56
|
+
<MapGL
|
|
57
|
+
options={{
|
|
122
58
|
accessToken: MAPBOX_ACCESS_TOKEN,
|
|
123
|
-
style:
|
|
124
|
-
|
|
125
|
-
|
|
59
|
+
style: "mb:light",
|
|
60
|
+
}}
|
|
61
|
+
viewport={viewport()}
|
|
62
|
+
onViewportChange={(evt: Event) => setViewport(evt)}
|
|
63
|
+
>
|
|
64
|
+
<Source
|
|
126
65
|
source={{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
66
|
+
type: "geojson",
|
|
67
|
+
data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
<Layer
|
|
71
|
+
style={{
|
|
72
|
+
type: "circle",
|
|
73
|
+
source: "earthquakes",
|
|
133
74
|
paint: {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
</
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
},
|
|
209
|
-
}}
|
|
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
|
-
})
|
|
241
|
-
|
|
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>
|
|
75
|
+
"circle-radius": 8,
|
|
76
|
+
"circle-color": "red",
|
|
77
|
+
},
|
|
78
|
+
}}
|
|
79
|
+
/>
|
|
80
|
+
</Source>
|
|
81
|
+
</MapGL>
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
render(() => <App />, document.getElementById("app")!);
|
|
251
86
|
```
|
|
252
87
|
|
|
253
|
-
|
|
88
|
+
## Roadmap
|
|
254
89
|
|
|
255
90
|
* [x] Basic Mapbox GL Functionality
|
|
256
91
|
* [x] Include Map Controls
|
|
@@ -261,3 +96,4 @@ const myDeckLayer = new MapboxLayer({
|
|
|
261
96
|
* [x] Include event handling
|
|
262
97
|
* [x] Sync Maps
|
|
263
98
|
* [ ] Add draw functionality
|
|
99
|
+
* [ ] Add debug functionality
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.2.
|
|
2
|
+
"version": "1.2.12",
|
|
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.",
|
|
@@ -31,9 +31,7 @@
|
|
|
31
31
|
"exports": {
|
|
32
32
|
".": {
|
|
33
33
|
"solid": "./dist/source/index.jsx",
|
|
34
|
-
"default": "./dist/esm/index.js"
|
|
35
|
-
"import": "./dist/esm/index.js",
|
|
36
|
-
"browser": "./dist/esm/index.js"
|
|
34
|
+
"default": "./dist/esm/index.js"
|
|
37
35
|
}
|
|
38
36
|
},
|
|
39
37
|
"scripts": {
|
|
@@ -53,11 +51,11 @@
|
|
|
53
51
|
"devDependencies": {
|
|
54
52
|
"jsdom": "^19.0.0",
|
|
55
53
|
"mapbox-gl": "^2.8.2",
|
|
56
|
-
"rollup": "^2.
|
|
54
|
+
"rollup": "^2.75.0",
|
|
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.4.
|
|
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",
|
|
@@ -66,6 +64,6 @@
|
|
|
66
64
|
},
|
|
67
65
|
"peerDependencies": {
|
|
68
66
|
"mapbox-gl": "^2.8.2",
|
|
69
|
-
"solid-js": "^1.4.
|
|
67
|
+
"solid-js": "^1.4.3"
|
|
70
68
|
}
|
|
71
69
|
}
|