mapbox-gl-react v0.1.6
Mapbox-gl-js React Components
This library hopes to make Mapbox-gl-js easy to use while maintaining its API with the the power of React's declarative composability and higher order components.
Data displayed on you maps requires a data source and a styled layer just like Mapbox-gl-js.
<MapComponent
accessToken="YOUR_MAPBOX_TOKEN"
style=""
center=[-122, 42]
zoom={12}
events={{
move: (map, event) => {
console.log(`Map is centered at ${map.getCenter()}`);
}
}}
>
<SourceComponent
name="markers"
data={geoJSON}
>
<Layer
type="circle"
/>
</SourceComponent>
</MapComponent>R# Installation
npm install --save mapbox-gl-react
Examples
Examples of component usage can be found in the /examples.
You can run them live with npm start after cloning this repo.
Base Components
Map
The main container component that will display the map.
accessToken: string
Grab token from Mapbox and keep it somewhere private.
- required
bearing: number
The initial rotational bearing of the map in degrees.
- default: 0
center: longitude: number, latitude: number
The coordinates for initial center of map.
- required
containerStyle: object
React styles passed into map container.
- default: { height: '100%', width: '100%' }
eventHandlers: object
Refer to Mapbox documentation for list of Possible Events. Object keys must be named after events (case insensitive) with a callback function as the value which accepts the Map instance and event object as parameters.
pitch: number
Inital pitch of the map.
- default: 0
style: string
Grab your favorite map style from Mapbox.
- required
zoom: number
The initial zoom for map.
- required
options: object
List of more map options.
- minZoom: number
- maxZoom: number
- maxBounds: number
- hash: boolean
- interactive: boolean
- moveToMethod: 'flyTo' | 'jumpTo' | 'easeTo'
Source
Attaches a geoJSON data source to map.
name: string
The name of the source.
- required
data: geoJSON | url
The actual data.
- required
options: object
- maxZoom: number
- cluster: boolean
- clusterRadius: number
- clusterMaxZoom: number
Layer
A layer styles in map that reads data from parent source component.
type: 'symbol' | 'circle'
The layer type, Mapbox docs
- required