@commodityvectors/react-mapbox-gl

A minimal React MapboxGL component

Stats

StarsIssuesVersionUpdatedCreatedSize
@commodityvectors/react-mapbox-gl
2.0.33 years ago4 years agoMinified + gzip package size for @commodityvectors/react-mapbox-gl in KB

Readme

React Mapbox GL Build Status npm npm npm

A simple and customizable MapboxGL wrapper for react

Edit React Mapbox GL

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.