@commodityvectors/react-mapbox-gl

React Mapbox GL

A simple and customizable MapboxGL wrapper for react

Getting Started

npm install @commodityvectors/react-mapbox-gl --save

Make sure you have all peers dependencies required installed on your project.

React Version	React Mapbox GL Version
16.3.x	2.x.x
16.2.x	1.x.x

Example:

import React from 'react';
import { Map } from '@commodityvectors/react-mapbox-gl';

export default class MyMap extends React.Component {
    render() {
        return (
            <Map {...this.props} accessToken={"YOUR_ACCESS_TOKEN"} mapStyle={'mapbox://styles/mapbox/streets-v9'}>
                {this.props.children}            
            </Map>
        );
    }
}

Creating Custom Map Components

It is pretty simple to write your own map components. This library takes advantage of the new React 16.3 context API so you can enrich you component with Map.component() method like below. This helper will automatically add a MapContext.Provider and inject the map as a prop.

Example:

import React from 'react';
import mapboxgl from 'mapbox-gl';

import { Map } from '@commodityvectors/react-mapbox-gl';


class FullscreenControl extends React.Component {
    componentDidMount() {
        const { map } = this.props;
        this.control = new mapboxgl.FullscreenControl();
        map.addControl(this.control);
    }
    
    componentWillUnmount() {
        const { map } = this.props;
        if(!map.isRemoving()) map.removeControl(this.control);
    }

    render() {
        return null; // As this component won't change through render methods
    }
}

export default Map.component(FullscreenControl);

Extending existing components

In order to extend an existing component, you have to propagate the props (or at least the map prop) to the child component as the example below shows

import React from 'react';
import { CustomControl, Map } from '@commodityvectors/react-mapbox-gl';


class Control extends React.PureComponent {
    state = {
        position: 'top-right'
    };

    recenter = () => {
        this.props.map.easeTo({
            center: [0, 0],
            zoom: 1
        });
    };

    render() {
        const positions = {
            'top-right': 'bottom-left',
            'bottom-left': 'top-right'
        };


        return (
            <CustomControl position={this.state.position} map={this.props.map}> {/* {...this.props} pass the map instance to the component below */}
                <button style={{
                    'width': '120px',
                    'padding': '5px'
                }} onClick={() => this.setState({position: positions[this.state.position]})}>Change Position</button>

                <button style={{
                    'width': '120px',
                    'padding': '5px'
                }} onClick={this.recenter}>Recenter</button>
            </CustomControl>
        );
    }
}

export default Map.component(Control);

Components

Map

Property Name	Description	Type	Required
accessToken	Mapbox access token	string	YES
mapStyle	The map 'style' property	object/string	YES
bearing	The map 'bearing' property	number
pitch	The map 'pitch' property	number
zoom	The map 'zoom' property	number
center	The map 'center' property	object/Array
options	Every other map property	object
onViewPortChange	Called when bearing, pitch, center or zoom changes	function
mapNodeStyle	The map parent component style	object

Layer

Property Name	Description	Type	Required
id	The layer id	string	YES
type	The layer type	string	YES
visible	Shortcut to set paint property "visibility"	boolean
before	The ID of an existing layer to add thi one before	string
options	Every other layer properties, you can use cameCase	object

Source

Property Name	Description	Type	Required
id	The layer id	string	YES
type	Layer type (as found on mapbox documentation)	string	YES
options	Every other source properties	object	YES

PopUp

Property Name	Description	Type	Required
position	This popup coordinates	Array/object	YES
onClose	Called when popup is closed	function
options	Every other popup properties	object

Marker

Property Name	Description	Type	Required
position	This marker coordinates	Array/object	YES
onClick	Called when marker is clicked	function
data	Data to be sent in click event	any

AttributionControl

Property Name	Description	Type	Required
position	This control position	string
options	Every other properties	object

NavigationControl

Property Name	Description	Type	Required
position	This control position	string
options	Every other properties	object

ScaleControl

Property Name	Description	Type	Required
position	This control position	string
options	Every other properties	object

GeolocateControl

Property Name	Description	Type	Required
position	This control position	string
options	Every other properties	object

FullscreenControl

Property Name	Description	Type	Required
position	This control position	string

CustomControl

Property Name	Description	Type	Required
position	This control position (top-right, bottom-left,...)	string