Package Exports
- mapbox-gl-react
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mapbox-gl-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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