A React wrapper for MapboxGL-js and overlay API

react-map-gl

React friendly API wrapper around MapboxGL JS

In addition to exposing MapboxGL functionality to React apps, react-map-gl also integrates seamlessly with deck.gl.

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})}
      />
    );
  }
}

GitHub