react-map-gl | Docs
react-map-gl is a suite of React components designed to provide a React API for mapbox-gl or maplibre-gl. More information in the online documentation.
See our Design Philosophy.
Using react-map-gl requires react >= 16.3.
# Using Maplibre
npm install react-map-gl maplibre-glor
# Using Mapbox
npm install react-map-gl mapbox-gl// Using Maplibre import * as React from 'react'; import Map from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ( <Map initialViewState={{ longitude: -122.4, latitude: 37.8, zoom: 14 }} style={{width: 600, height: 400}} mapStyle="https://api.maptiler.com/maps/streets/style.json?key=<Maptiler access token>" /> ); }
or
// Using Mapbox import * as React from 'react'; import Map from 'react-map-gl/mapbox'; import 'mapbox-gl/dist/mapbox-gl.css'; function App() { return ( <Map // https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens mapboxAccessToken="<Mapbox access token>" initialViewState={{ longitude: -100, latitude: 40, zoom: 3.5 }} style={{width: 600, height: 400}} mapStyle="mapbox://styles/mapbox/streets-v9" /> ); }
Learn more with in our Getting Started guide.
See contribution guide.
react-map-gl is part of vis.gl, an OpenJS Foundation project.
Development is also supported by
