Skip to content

Latest commit

 

History

History
43 lines (23 loc) · 3.04 KB

using-with-mapbox-gl.md

File metadata and controls

43 lines (23 loc) · 3.04 KB
Raw

Using deck.gl with Mapbox GL

While a deck.gl application could choose to render on top of any JavaScript Map component (or even render without an underlying map), deck.gl has been developed in parallel with the react-map-gl component, which is a React wrapper around mapbox-gl, and is the recommended companion to use deck.gl for most applications.

About react-map-gl

As shown in the examples, the DeckGL React component works especially well as the child of a React component such as react-map-gl that displays a map using parameters similar to the deck.gl Viewport (i.e. latitude, longitude, zoom etc). In this configuration your deck.gl layers will render as a perfectly synchronized geospatial overlay over the underlying map.

About Mapbox Tokens

react-map-gl and the underlying Mapbox GL JS libraries are open source and free to use. However, to load the map styles and tiles from Mapbox's data service, 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.

If you are using mapbox-gl without React, check out Mapbox GL JS API for how to apply the token.

If you are using react-map-gl, there are several ways to provide a token to your app:

  • Set the MapboxAccessToken environment variable. You may need to add additional set up to the bundler (example) so that process.env.MapboxAccessToekn is accessible at runtime.
  • Provide it in the URL, e.g ?access_token=TOKEN
  • Pass it as a prop to the ReactMapGL instance <ReactMapGL mapboxApiAccessToken={TOKEN} />

Display Maps Without A Mapbox Token

It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). You will need a custom Mapbox GL style that points to your own vector tile source, and pass it to ReactMapGL using the mapStyle prop. This custom style must match the schema of your tile source.

Open source tile schemas include:

Some useful resources for creating your own map service:

Mixing deck.gl and mapbox Layers

An experimental module @deck.gl/mapbox enables seamless interleaving of mapbox and deck.gl layers.

See module documentation for examples and limitations.