solid-map-gl 1.2.8 → 1.2.9
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 +59 -68
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,80 +1,70 @@
|
|
|
1
|
-
|
|
1
|
+
# README
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](
|
|
8
|
-
[
|
|
9
|
-
](https://bundlephobia.com/package/solid-map-gl)
|
|
10
|
-
|
|
5
|
+
## Solid Mapbox GL JS
|
|
6
|
+
|
|
7
|
+
[ ](https://www.npmjs.com/package/solid-map-gl) [](LICENSE/) [ ](https://bundlephobia.com/package/solid-map-gl) 
|
|
11
8
|
|
|
12
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/)
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
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)
|
|
16
24
|
|
|
17
|
-
|
|
18
|
-
- [Components](#components)
|
|
19
|
-
- [Usage](#usage)
|
|
20
|
-
- [Static Map](#static-map)
|
|
21
|
-
- [Interactive Map](#interactive-map)
|
|
22
|
-
- [Map with Source and Layer](#map-with-source-and-layer)
|
|
23
|
-
- [Map with GeoJSON Source](#map-with-geojson-source)
|
|
24
|
-
- [Roadmap](#roadmap)
|
|
25
|
+
\
|
|
25
26
|
|
|
26
|
-
<br>
|
|
27
27
|
|
|
28
|
-
|
|
29
|
+
|
|
30
|
+
### Installation
|
|
31
|
+
|
|
32
|
+
\
|
|
29
33
|
|
|
30
|
-
## Installation
|
|
31
|
-
<br>
|
|
32
34
|
|
|
33
35
|
> :bangbang:
|
|
34
36
|
>
|
|
35
|
-
> There is a Mapbox bundle issue when using `npm or yarn`
|
|
37
|
+
> There is a Mapbox bundle issue when using `npm or yarn`
|
|
36
38
|
>
|
|
37
|
-
> Please use [`pnpm`](https://pnpm.io/) as a workaround
|
|
39
|
+
> Please use [`pnpm`](https://pnpm.io/) as a workaround
|
|
40
|
+
|
|
41
|
+
\
|
|
38
42
|
|
|
39
|
-
<br>
|
|
40
43
|
|
|
41
44
|
```shell
|
|
42
45
|
pnpm add solid-map-gl
|
|
43
46
|
```
|
|
44
47
|
|
|
48
|
+
### Components
|
|
45
49
|
|
|
46
|
-
|
|
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 |
|
|
47
62
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
```shell
|
|
51
|
-
yarn add @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
```shell
|
|
55
|
-
npm install --save @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
|
|
56
|
-
``` -->
|
|
57
|
-
|
|
58
|
-
## Components
|
|
59
|
-
|
|
60
|
-
| Component | Description |
|
|
61
|
-
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
|
62
|
-
| [MapGL](src/components/MapGL) | Represents map on the page |
|
|
63
|
-
| [Source](src/components/Source) | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
|
|
64
|
-
| [Layer](src/components/Layer) | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style |
|
|
65
|
-
| [Sky](src/components/Sky) | Specify the Sky Layer |
|
|
66
|
-
| [Fog](src/components/Fog) | Specify the Fog Layer |
|
|
67
|
-
| [Terrain](src/components/Terrain) | Specify the Terrain Layer |
|
|
68
|
-
| [Image](src/components/Image) | Adds an image to the map style |
|
|
69
|
-
| [Popup](src/components/Popup) | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup) |
|
|
70
|
-
| [Marker](src/components/Marker) | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) |
|
|
71
|
-
| [Control](src/components/Control) | Represents the map's control |
|
|
72
|
-
|
|
73
|
-
## Usage
|
|
63
|
+
### Usage
|
|
74
64
|
|
|
75
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/).
|
|
76
66
|
|
|
77
|
-
|
|
67
|
+
#### Static Map
|
|
78
68
|
|
|
79
69
|
By default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.
|
|
80
70
|
|
|
@@ -92,7 +82,7 @@ import MapGL from 'solid-map-gl'
|
|
|
92
82
|
</MapGL>
|
|
93
83
|
```
|
|
94
84
|
|
|
95
|
-
|
|
85
|
+
#### Interactive Map
|
|
96
86
|
|
|
97
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.
|
|
98
88
|
|
|
@@ -116,7 +106,7 @@ const [viewport, setViewport] = createSignal({
|
|
|
116
106
|
</MapGL>
|
|
117
107
|
```
|
|
118
108
|
|
|
119
|
-
|
|
109
|
+
#### Map with Source and Layer
|
|
120
110
|
|
|
121
111
|
[Sources](https://docs.mapbox.com/mapbox-gl-js/api/sources/) specify the geographic features to be rendered on the map.
|
|
122
112
|
|
|
@@ -149,7 +139,7 @@ import MapGL, { Source, Layer } from 'solid-map-gl';
|
|
|
149
139
|
</MapGL>
|
|
150
140
|
```
|
|
151
141
|
|
|
152
|
-
|
|
142
|
+
#### Map with GeoJSON Source
|
|
153
143
|
|
|
154
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/).
|
|
155
145
|
|
|
@@ -222,7 +212,7 @@ const data = {
|
|
|
222
212
|
</MapGL>
|
|
223
213
|
```
|
|
224
214
|
|
|
225
|
-
|
|
215
|
+
#### Custom Layers support
|
|
226
216
|
|
|
227
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.
|
|
228
218
|
|
|
@@ -259,14 +249,15 @@ const myDeckLayer = new MapboxLayer({
|
|
|
259
249
|
<Layer customLayer={myDeckLayer} />
|
|
260
250
|
</MapGL>
|
|
261
251
|
```
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
252
|
+
|
|
253
|
+
### Roadmap
|
|
254
|
+
|
|
255
|
+
* [x] Basic Mapbox GL Functionality
|
|
256
|
+
* [x] Include Map Controls
|
|
257
|
+
* [x] Include Fog, Sky, and Terrain
|
|
258
|
+
* [x] Include Popup and Markers
|
|
259
|
+
* [x] Minify bundle & reduce size
|
|
260
|
+
* [x] Add basemap switching
|
|
261
|
+
* [x] Include event handling
|
|
262
|
+
* [x] Sync Maps
|
|
263
|
+
* [ ] Add draw functionality
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.2.
|
|
2
|
+
"version": "1.2.9",
|
|
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.",
|
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
"rollup-plugin-import-css": "^3.0.3",
|
|
57
57
|
"rollup-plugin-uglify": "^6.0.4",
|
|
58
58
|
"rollup-preset-solid": "^1.4.0",
|
|
59
|
-
"solid-js": "
|
|
59
|
+
"solid-js": "1.3.17",
|
|
60
60
|
"solid-testing-library": "^0.3.0",
|
|
61
|
-
"typescript": "^4.
|
|
61
|
+
"typescript": "^4.7.2",
|
|
62
62
|
"vite": "^2.9.9",
|
|
63
63
|
"vite-plugin-solid": "^2.2.6",
|
|
64
64
|
"vitest": "^0.12.9"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"mapbox-gl": "^2.8.2",
|
|
68
|
-
"solid-js": "
|
|
68
|
+
"solid-js": "1.3.17"
|
|
69
69
|
}
|
|
70
70
|
}
|