You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`react-map-gl` is a suite of [React](http://facebook.github.io/react/) components designed to provide a React API for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js)-compatible libraries. More information in the online documentation.
12
+
`@goongmaps/goong-map-react` is a fork of [react-map-gl](https://github.com/visgl/react-map-gl). It provides React components for [Goong GL JS](https://github.com/goong-io/goong-js). More information in the online documentation.
15
13
16
14
See our [Design Philosophy](docs/README.md#design-philosophy).
17
15
18
16
### Installation
19
17
20
-
Using `react-map-gl` requires `react >= 16.3`.
18
+
Using `@goongmaps/goong-map-react` requires `react >= 16.3`.
21
19
22
20
```sh
23
-
npm install --save react-map-gl
21
+
npm install --save @goongmaps/goong-map-react
24
22
```
25
23
26
24
### Example
27
25
28
26
```js
29
27
import*asReactfrom'react';
30
-
importReactMapGLfrom'react-map-gl';
28
+
importReactMapGLfrom'@goongmaps/goong-map-react';
31
29
32
30
functionMap() {
33
31
const [viewport, setViewport] =React.useState({
34
-
latitude:37.7577,
35
-
longitude:-122.4376,
36
-
zoom:8
32
+
latitude:21.03072,
33
+
longitude:105.85239,
34
+
zoom:12
37
35
});
38
36
39
37
return (
@@ -47,25 +45,21 @@ function Map() {
47
45
}
48
46
```
49
47
50
-
### Using Mapbox Tokens
48
+
### Using Goong Maptiles key
51
49
52
-
**Starting with v2.0, mapbox-gl requires a Mapbox token for any usage, with or without the Mapbox data service. See [about Mapbox tokens](/docs/get-started/mapbox-tokens.md) for your options.**
53
-
54
-
To show maps from a service such as Mapbox you will need to register on their website in order to retrieve an access token required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.
50
+
To show maps from Goong you will need to [register](https://account.goong.io) on our website in order to retrieve a map tiles key required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.
55
51
56
52
There are several ways to provide a token to your app, as showcased in some of the example folders:
57
53
58
-
* Provide a `mapboxApiAccessToken` prop to the map component
59
-
* Set the `MapboxAccessToken` environment variable (or set `REACT_APP_MAPBOX_ACCESS_TOKEN` if you are using Create React App)
60
-
* Provide it in the URL, e.g `?access_token=TOKEN`
61
-
* Provide `mapboxApiUrl` prop to the map component to override the default mapbox API URL
54
+
* Provide a `goongApiAccessToken` prop to the map component
55
+
* Set the `GoongAccessToken` environment variable (or set `REACT_APP_GOONG_ACCESS_TOKEN` if you are using Create React App)
62
56
63
57
But we would recommend using something like [dotenv](https://github.com/motdotla/dotenv) and put your key in an untracked `.env` file, that will then expose it as a `process.env` variable, with much less leaking risks.
64
58
65
59
66
60
### Limitations
67
61
68
-
This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the `getMap()` function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.
62
+
This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Goong WebGL map. Because most of the functionality of Goong's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Goong GL JS's Map class. You may access the native Goong API exposed by the `getMap()` function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.
69
63
70
64
Examples of replacing common native API calls with their React equivalents can be found on the [FAQ](/docs/get-started/faq.md) page.
react-map-gl is a suite of [React](http://facebook.github.io/react/) components for
4
-
Mapbox GL JS-compatible libraries.
5
-
6
-
| Library | Description |
7
-
| --- | --- |
8
-
|[MapLibre](https://github.com/MapLibre/maplibre-gl-js)| An open fork of mapbox-gl v1, that can be used without a mapbox token. |
9
-
|[Mapbox GL JS v1](https://github.com/mapbox/mapbox-gl-js)| The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token. |
10
-
|[Mapbox GL JS v2](https://github.com/mapbox/mapbox-gl-js)| The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps. |
11
-
| Other mapbox-gl forks | It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. |
3
+
`@goongmaps/goong-map-react` is a suite of [React](http://facebook.github.io/react/) components for
- You can load map data from Mapbox's own service.
15
-
- You can create and host your own map data using one of the many [open source tools](https://github.com/mapbox/awesome-vector-tiles).
7
+
- You can load map data from Goong's own service.
8
+
- You can create and host your own map data using one of the many [open source tools](https://github.com/Goong/awesome-vector-tiles).
16
9
17
-
New to react-map-gl? [Get Started](/docs/get-started/get-started.md)
10
+
New to `@goongmaps/goong-map-react`? [Get Started](/docs/get-started/get-started.md)
18
11
19
12
Want to contribute? See our [Developer Guide](/docs/developer-guide.md)
20
13
@@ -23,17 +16,17 @@ Want to contribute? See our [Developer Guide](/docs/developer-guide.md)
23
16
24
17
At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming.
25
18
26
-
The stock mapbox-gl APIs are [imperative](https://en.wikipedia.org/wiki/Imperative_programming). That is, you instruct the map to do something (for example, [map.flyTo](https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto)), and it will execute the command at its own pace.
19
+
The stock `goong-js` APIs are [imperative](https://en.wikipedia.org/wiki/Imperative_programming). That is, you instruct the map to do something (for example, [map.flyTo](https://docs.goong.io/javascript/#map#flyto)), and it will execute the command at its own pace.
27
20
28
-
This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with [deck.gl](https://deck.gl). The mapbox maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the [move](https://docs.mapbox.com/mapbox-gl-js/api/#map.event:move) event in the map and tell the other components to update, the other components would always be one frame behind.
21
+
This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with [deck.gl](https://deck.gl). The goong-js maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the [move](https://docs.goong.io/javascript/#map.event:move) event in the map and tell the other components to update, the other components would always be one frame behind.
29
22
30
-
Ultimately, in the spirit of the [reactive programming paradigm](https://en.wikipedia.org/wiki/Reactive_programming), data always flows **down**. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the **source of truth** in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.
23
+
Ultimately, in the spirit of the [reactive programming paradigm](https://en.wikipedia.org/wiki/Reactive_programming), data always flows **down**. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the **source of truth** in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as goong-js is designed to do, we risk the components going out of sync.
31
24
32
-
react-map-gl creates a fully reactive wrapper for mapbox-gl. The [InteractiveMap](/docs/api-reference/interactive-map) component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications.
25
+
`@goongmaps/goong-map-react` creates a fully reactive wrapper for `goong-js`. The [InteractiveMap](/docs/api-reference/interactive-map) component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of goong-js. However, it is essential for the correctness of large applications.
33
26
34
27
35
28
## Limitations
36
29
37
-
This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the [getMap()](/docs/api-reference/static-map.md#getmap) function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.
30
+
This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Goong WebGL map. Because most of the functionality of Goong's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Goong GL JS's Map class. You may access the native Goong API exposed by the [getMap()](/docs/api-reference/static-map.md#getmap) function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.
38
31
39
32
Examples of replacing common native API calls with their React equivalents can be found on the [FAQ](/docs/get-started/faq.md) page.
0 commit comments