react-map-gl/docs/get-started/get-started.md

Get Started

Installation

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

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

Example

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

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      }}
      style={{width: 600, height: 400}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
    />
  );
}

See full project setup in get-started examples.

Styling

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='https://api.tiles.mapbox.com/mapbox-gl-js/v<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

In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like:

// webpack.config.js
module.export = {
  // ...
  resolve: {
    alias: {
      'mapbox-gl': 'maplibre-gl'
    }
  }
}

In rollup:

// rollup.config.js
import alias from '@rollup/plugin-alias';

module.exports = {
  // ...
  plugins: [
    alias({
      entries: [
        { find: 'mapbox-gl', replacement: 'maplibre-gl' },
      ]
    })
  ]
};

In Next.js:

// next.config.js
const nextConfig = {
  // ...
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'mapbox-gl': 'maplibre-gl',
    };
  // ...
  }
};