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

Get Started

Installation

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

npm install --save react-map-gl

Example

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

class Map extends Component {

  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  };

  render() {
    return (
      <ReactMapGL
        {...this.state.viewport}
        onViewportChange={(viewport) => this.setState({viewport})}
      />
    );
  }
}

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/v0.42.0/mapbox-gl.css' rel='stylesheet' />

Or embed it in your app by using - browserify-css with Browserify or - css-loader with Webpack:

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

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 - react-map-gl is compatible with create-react-app.

• create-react-app-typescript - react-map-gl is compatible with create-react-app-typescript. You can see an example here.

There's many other ready-to-run examples you can take a look at if you need more inspiration.