React-mapbox-gl | Documentation | Demos
React wrapper for mapbox-gl-js.
Components
Proxy components (proxy between React and Mapbox API)
- ReactMapboxGL
- Layer & Feature
- property
symboldisplays a mapbox symbol. - property
linedisplays a lineString. - property
filldisplays a polygon. - property
circledisplays a mapbox circle. - property
rasterdisplays a mapbox raster tiles. - property
fill-extrusiondisplays a layer with extruded buildings. - property
backgrounddisplays a mapbox background layer. - property
heatmapdisplays a mapbox heatmap layer.
- property
- 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
Looking for an Angular alternative?
Try ngx-mapbox-gl