@commodityvectors/react-mapbox-gl v2.0.3

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.

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

Layer

Source

PopUp

Marker

AttributionControl

NavigationControl

ScaleControl

GeolocateControl

FullscreenControl

CustomControl