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

paint: object

layout: object

filter: array