Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-mapbox-gl

alex3165320.2kMIT5.1.1TypeScript support: included

A React binding of mapbox-gl-js

mapbox, react, map, webgl, mapbox-gl, react-component

readme

Logo

React-mapbox-gl | Documentation | Demos

Build Status npm version npm downloads TypeScript

React wrapper for mapbox-gl-js.



London cycle example gif

Components

Proxy components (proxy between React and Mapbox API)

  • ReactMapboxGL
  • Layer & Feature
    • property symbol displays a mapbox symbol.
    • property line displays a lineString.
    • property fill displays a polygon.
    • property circle displays a mapbox circle.
    • property raster displays a mapbox raster tiles.
    • property fill-extrusion displays a layer with extruded buildings.
    • property background displays a mapbox background layer.
    • property heatmap displays a mapbox heatmap layer.
  • Source
  • GeoJSONLayer

DOM components (normal React components)

  • ZoomControl
  • ScaleControl
  • RotationControl
  • Marker (Projected component)
  • Popup (Projected component)
  • Cluster

Getting Started

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

Example:

Adding the css in your index.html:

<html>
  <head>
    ...
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
      rel="stylesheet"
    />
  </head>
</html>
// ES6
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

// ES5
var ReactMapboxGl = require('react-mapbox-gl');
var Layer = ReactMapboxGl.Layer;
var Feature = ReactMapboxGl.Feature;
require('mapbox-gl/dist/mapbox-gl.css');

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'
});

// in render()
<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
    height: '100vh',
    width: '100vw'
  }}
>
  <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
    <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
  </Layer>
</Map>;

Why are zoom, bearing and pitch Arrays ?

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again.

Current version documentation

Version 3.0 documentation

Version 2.0 documentation

Contributions

Please try to reproduce your problem with the boilerplate before posting an issue.

mapbox-gl-draw compatibility

Try react-mapbox-gl-draw

Looking for an Angular alternative?

Try ngx-mapbox-gl

changelog

Above 2.0.0

See release notes

2.0.* (June 2017)

Breaking changes

  • ReactMapboxGl is now a factory that return a React Component, see documentation on how to use it

Feature

  • Feature component has a draggable property
  • The map component returned by the factory accept all the events
  • Listen events only on the concerned Layer, should improve performances

Bug fixes

  • Cluster component bugs have been fixed, it is tested and should behave as expected
  • Fix issue when using text-align: center on a parent tag of the map
  • Fix wrong unmounting of the map
  • Fix Layer and GeoJsonLayer when changing the style of the map

Others

  • Improvement of the documentation
  • Brand new website for the examples with more examples
  • Add more tests
  • Prettify all the source files
  • Update dependencies

1.4.0 (March 14 2017)

  • Breaking change : onHover is now onMouseEnter, onEndHover is now onMouseLeave
  • Breaking change: GEOJSONLayer is not displaying all the layers in your geojson source, you have to specify which source to display by passing the correct props, see note
  • Fix issue when unmounting all the features setData is not called and the features doesn't disappear. PR

1.0.0 (February 13 2017)

  • All the source code is now written in Typescript, you can now get the type definitions for each component in a Typescript environment.

0.19.0 (December 12 2016)

  • Implement the Popup and the Marker Components using React. These components now keep track of the context.

0.15.0 (October 23 2016)

  • Upgrade mapbox-gl from v0.21.0 to v0.25.1 and don't build the vendor anymore, react-mapbox-gl is now using mapbox-gl/dist/mapbox-gl.js bundle again
  • Improve the examples with a navigation to select one.
  • Fix a major issue when removing a layer with a sourceId.

0.11.0 (September 8 2016)

  • Add GeoJSONLayer component to display a raw geojson

0.8.0 (July 5 2016)

  • Breaking change, zoom is now wrapped in an array so the map component can check for a reference equality of the value.

0.7.1 (June 16 2016)

  • Update API documentation
  • A change of the style geojson passed down to the map component will update the style of the map itself using mapbox setStyle
  • Get rid of lodash for internal methods and smaller packages

0.7.0 (June 15 2016)

  • Add layerOptions property to Layer component
  • Layer can use external source : #22
  • Add Layer with external source to all-shape example
  • onStyleLoad callback is now called before childrens components are rendered
  • Update mapbox-gl to version 0.20.0
  • Add properties property to Feature component