A React binding of mapbox-gl-js
npm install react-mapbox-gl1-pgis!Logo
symbol displays a mapbox symbol.
line displays a lineString.
fill displays a polygon.
circle displays a mapbox circle.
raster displays a mapbox raster tiles.
fill-extrusion displays a layer with extruded buildings.
background displays a mapbox background layer.
heatmap displays a mapbox heatmap layer.
npm install react-mapbox-gl mapbox-gl --save
`
Example:
Adding the css in your index.html:
`html
...
href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
rel="stylesheet"
/>
`
`jsx
// 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()
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: '100vh',
width: '100vw'
}}
>
;
`
Why are
zoom, bearing and pitch` Arrays ?