react-map-gl/docs/get-started

Get Started

Installation

Using react-map-gl requires node >= v4 and react >= 15.4.

npm install --save react-map-gl

Using with Browserify, Webpack, and other JavaScript Bundlers

• browserify - react-map-gl is extensively tested with browserify and works without configuration.

• webpack 2 - Most of the provided react-map-gl examples use webpack 2. For a minimal example, look at the exhibit-webpack folder, demonstrating a working demo using webpack 2.

• create-react-app - At this point configuration-free builds are not possible with webpack due to the way the mapbox-gl-js module is published. You will need to eject your app (sorry) and add one line alias to your webpack config.

While react-map-gl provides many examples, getting mapbox-gl-js to work non-browserify-based build environments can sometimes be tricky. If the examples provided by react-map-gl are not enough, a good source for more information might be Using mapbox-gl and webpack together.

Example Code

import {Component} from 'react';
import ReactMapGL from 'react-map-gl';

class Map extends Component {
  render() {
    return (
      <ReactMapGL
        width={400}
        height={400}
        latitude={37.7577}
        longitude={-122.4376}
        zoom={8}
        onViewportChange={(viewport) => {
          const {width, height, latitude, longitude, zoom} = viewport;
          // Optionally call `setState` and use the state to update the map.
        }}
      />
    );
  }
}