React-mapbox-gl | Documentation | Demos
React wrapper for mapbox-gl-js.
Components
Proxy components (proxy between React and Mapbox API)
- ReactMapboxGL
- Layer & Feature
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>;