Get Started


Using react-map-gl requires node >= v8 and react >= 16.3.

npm install --save react-map-gl mapbox-gl


import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return (
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      style={{width: 600, height: 400}}

See full project setup in get-started examples.


The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.

You may add the stylesheet to the head of your page:

<!-- index.html -->
<link href='<YOUR_MAPBOX_VERSION>/mapbox-gl.css' rel='stylesheet' />

Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl.

Or embed it in your app by using css-loader with Webpack or postcss with rollup:

/// app.js
import 'mapbox-gl/dist/mapbox-gl.css';

Using with a mapbox-gl Fork

Install your choice of fork along with react-map-gl, for example:

npm install --save react-map-gl maplibre-gl

# Add an empty placeholder for mapbox-gl to satisfy the peer dependency
npm install --save mapbox-gl@npm:empty-npm-package@1.0.0

Then override the mapLib prop of Map:

import * as React from 'react';
import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';

function App() {
  return <Map mapLib={maplibregl} />;

To use the stylesheet from the fork:

<!-- index.html -->
<link href='<YOUR_MAPLIBRE_VERSION>/dist/maplibre-gl.css' rel='stylesheet' />


/// app.js
import 'maplibre-gl/dist/maplibre-gl.css';