Introduction

react-map-gl is a suite of React components for Mapbox GL JS, a WebGL-powered vector and raster tile mapping library. In addition to exposing MapboxGL functionality to React apps, react-map-gl also integrates seamlessly with deck.gl.

Example

import ReactMapGL from 'react-map-gl';

<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.
  }}
/>