React wrapper for mapboxgl-js API.

Made with ❤️ by MeilleursAgents

Usage

import React from ' react ' ; import MapboxMap from ' react-mapbox-wrapper ' ; export default function SimpleMap ( ) { return ( < div style = { { height : 400 , width : 400 } } > < MapboxMap accessToken = " <your acess token here> " coordinates = { { lat : 48 . 872198 , lng : 2 . 3366308 } } / > < / div > ) ; } SimpleMap . displayName = ' SimpleMap ' ;

See examples folder for more example.

Getting started

Read carefully the getting started section of Mapbox GL API.

If you use Webpack, you should add the following parameter in order to properly build your app.

module : { noParse : / ( mapbox-gl ) \. js $ / , }

react-mapbox-wrapper import the corresponding CSS stylesheet from Javascript, you don't have to do it.

API

MapboxMap

React Component that render a Mapbox Map. Extra props are directly passed to the Map constructor. Following props are handled by wrapper for updating or handling behavior in the React philosophy.

Wrapper is CSS flex-ready for width but you have to set a height for having visible Mapbox.

Marker

React Component that render a Marker. Extra props are directly passed to the Marker constructor

Props Type Default Description children Node null Marker HTML DOM, default marker will be used if not provided coordinates Object required Coordinates of the marker

According to the LngLatLike model draggable bool false Allow user to drag'n'drop Marker getRef func Callback function called with marker's ref (useful for calling #moveToTop() function) map Object required Mapbox Map where marker will be added (can be obtained with MapboxMap#onLoad props fn) onDragEnd func Callback function called on marker's dragend onMouseOut func Callback function called on marker or popup mouseOut onMouseOver func Callback function called on marker or popup mouseOver popup Node Popup attached to the marker, displayed on click to marker popupAnchor string bottom Popup anchor param popupCloseButton bool false Popup closeButton param popupOffset number Popup offset param popupOnOver bool false Trigger popup show on mouse over (only available if children are provided, default marker cannot be bind)

Circle

React Component that render a Circle. Extra props are directly passed to the Marker constructor

Props Type Default Description coordinates Object required Coordinates of the marker

According to the LngLatLike model id string required Identifier of circle, used to name the underlying layer map Object required Mapbox Map where marker will be added (can be obtained with MapboxMap#onLoad props fn) onClick func Callback function called on circle's click paint Object Paint option of the layer radius number required Radius of circle, in kilometers unit string kilometers Unit of the radius. values can be : kilometers , meters , miles , feet

Helpers

We provide some helpers for interacting with Mapbox Map object, all in Helpers import.

import { Helpers } from react-mapbox-wrapper ; Helpers . convertRadiusUnit ( 580 , ' meters ' ) ; Helpers . getCircleData ( { lat : 48 . 868526 , lng : 2 . 3434886 } , 800 , ' meters ' ) Helpers . coordinatesAreEqual ( { lat : 48 . 868526 , lng : 2 . 3434886 } , [ 2 . 3434886 , 48 . 868526 ] ) ; Helpers . newBounds ( coordinatesSouthWest , coordinatesNorthEast ) ; Helpers . newBound ( coordinates ) ; Helpers . drawGeoJSON ( map , ' foodTruck ' , data , { ' fill-opacity ' : 0 . 2 } , undefined , ' fill ' ) ; Helpers . removeGeoJSON ( map , ' foodTruck ' ) ;

Development

npm install && npm run peers

You can use npm link while developing new features on this repo for use in targeted repository.

npm link

Git hooks

You can use our pre-commit hook for ensuring consistent format and linting before committing by running command: