Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


  • This example is no longer recommended for use, though it does work. The pattern you're looking for in integrating Mapbox GL JS with React is explained in detail by Tom Macwright in his blog post and it uses style diffs to transition between map states in a reactive manner rather than using the more imperative Mapbox GL JS API as this code does. This library from Uber uses it. Good luck.

Simple React component for a Mapbox GLJS map (aka mapbox-gl-js)

A Mapbox GL map creates and manages its own DOM elements outside of React's virtual DOM. Not a problem, we can still encapsulate a map into a React component and keep things separate. This example borrows heavily from a blog post written by Nicolas Hery demonstrating a technique for incorporating D3 into a React app.


Checkout the code and cd into the root directory

#npm install

Edit App.js and enter your own default center location, zoom level, API access key and your own style URL (or someone else's) created using Mapbox Studio. Now start up the dev server.

#npm start

Browse to localhost:8080/#your-public-mapbox-token

Next Steps

Now continue to develop this example as you wish but note it is not well-suited for production use. For a more full-featured React app example written in ES6 using React, React Router, Redux, Material UI, Webpack etc. see my seed project

Firebase (Optional)

When ready you can make your demo map publicly available for free using Firebase's static hosting service. Signup and create a new app at Now go to the hosting tab for your new app for further instruction. In summary install firebase CLI too, authenticate against your account, initialize project synch, and push your code. That's all there is too it.

npm install firebase
firebase init
firebase deploy


Mapbox-gl-js react component test







No releases published


No packages published