@commodityvectors/react-mapbox-gl

v2.0.3

Published

3 years ago

A minimal React MapboxGL component

Downloads

0High
0Medium
0Low

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

ScaleControl

GeolocateControl

FullscreenControl

| Property Name | Description | Type | Required | | ---------------- | -------------------------------------------------- | ------------- |:---------:| | position | This control position | string | |