joshkopecek/react-mapbox-gl

A React binding of mapbox-gl-js

react-mapbox-gl

Based on mapbox-gl-js this library aim to bring the api to a React friendly way with some additional extra behavior. The library include the following elements :

• ReactMapboxGl
• Layer
• 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.
• ZoomControl
• Popup

How to start

npm install react-mapbox-gl --save

Import the component :

// ES6
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";

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

Examples

• See the example to display a big amount of markers : London cycle example
• See the example to display all the availables shapes : All shapes example

Run the examples

• Clone the repository
• Go to example folder
• Install the dependencies: npm install
• Run the example : npm run start
  • Default port: 8080

Change the example by replacing the example component in example/main.js file.

Notes

The CSS file is now already included in the library.

API