This starter gets you going quickly with Mapbox GL in Gatsby.
It uses React hooks to wrap the Mapbox GL JS object.
Because Mapbox GL is provided as a native JS object within components/Map/index.jsx
, instead of a React Component, you need to coordinate application state directly with the map object.
Map configuration is stored in config/map.js
. You need to provide basic map configuration such as initial zoom
level, and you can provide optional sources
and layers
according to the Mapbox GL style specification.
You must set the environment variable GATSBY_MAPBOX_API_TOKEN
to your Mapbox API token.
Clone this repository, run npm install
, and then gatsby develop
in your terminal.
Open http://localhost:8000
in your browser to explore the built-in examples, or
explore the source code under src/pages
.
Additional user interface elements built on this starter are available in the
gatsby-starter-mapbox-examples
repository.