Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


2.5.1 • Public • Published


React-mapbox-gl Doc

Greenkeeper badge Build Status npm version npm downloads

London cycle example gif

React wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for React. It is important to understand the difference between the components Map, Layer, GeoJsonLayer, Source, Feature (proxy between React and Mapbox API) and the components Marker, Popup, Cluster, ZoomControl, ScaleControl, RotationControl which are real React components.

Include the following elements:

  • ReactMapboxGl
  • Layer
  • Source
  • Feature
    • Layer type properties symbol display a mapbox symbol.
    • Layer type properties line display a lineString.
    • Layer type properties fill display a polygon.
    • Layer type properties circle display a mapbox circle.
  • GeoJSONLayer
  • ZoomControl
  • ScaleControl
  • RotationControl
  • Marker (Projected component)
  • Popup (Projected component)
  • Cluster

This repository include the Typescript type definition files

How to start

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


// ES6
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
// ES5
var ReactMapboxGl = require("react-mapbox-gl");
var Layer = ReactMapboxGl.Layer;
var Feature = ReactMapboxGl.Feature;
const Map = ReactMapboxGl({
  accessToken: "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
    height: "100vh",
    width: "100vw"
      layout={{ "icon-image": "marker-15" }}>
      <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>

Why is zoom an array

The zoom property is an array on purpose. With a float as a value we can't tell whether the zoom has changed when checking for value equality 7 === 7 // true. We changed it to an array so that between 2 render it check for a reference equality [7] === [7] // false, this way we can reliably update the zoom value without having to keep the viewport in the state of the Map component.

Version 2.0 Documentation

Version 1.12 documentation


Built with react-mapbox-gl


mapbox-gl-draw compatibility

Try react-mapbox-gl-draw


npm i react-mapbox-gl-typingfix

DownloadsWeekly Downloads






Last publish


  • avatar