react-redux-mapbox-gl

• react-redux-mapbox-gl provides a React Mapbox element and a Redux state reducer for the map.
• Mapbox GL and your React element overlays on the map can be conveniently integrated into your React-Redux app.
• All Mapbox GL APIs are still available.

Installation

npm install react-redux-mapbox-gl --save

Usage

Using Mapbox GL with Browserify or Webpack

import Mapbox from 'react-redux-mapbox-gl';
import mapboxgl from 'mapbox-gl';
...
render()
{
  const mapStyle =
  {
    width : 200,
    height : 300
  };
  const mapOptions =
  {
    style : 'mapbox://styles/mapbox/streets-v9'
  };
  
  return (
    <Mapbox
      mapboxgl={mapboxgl}
      accessToken="your map access token"
      style={this.mapStyle}
      options={this.mapOptions}
    />
  );
}
...

Using Mapbox GL with <script> tag

import Mapbox from 'react-redux-mapbox-gl';
...
render()
{
  const mapStyle =
  {
    width : 200,
    height : 300
  };
  const mapOptions =
  {
    style : 'mapbox://styles/mapbox/streets-v9'
  };
  
  return (
    <Mapbox
      accessToken="your map access token"
      style={mapStyle}
      options={mapOptions}
    />
  );
}
...

Combine MapReducer into React-Redux app

import React from 'react';
import {render} from 'react-dom';
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import {MapReducer} from 'react-redux-mapbox-gl';
...
const reducer = combineReducers(
{
  MapReducer,
  //...other reducers in the app
});

const store = createStore(reducer);
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
...

Add overlays

You can add customized React elements onto the map. They will be placed at the longitude latitude position spicified in the props. You can change the prop values from render to render.

render()
{
  const childProps1 = {
    lnglat : [-122.203071, 37.7505],
    width : 50,
    height : 50,
    neighborDistance : 5
  };
  const childProps2 = {
    lnglat : [-132.2, 40.05],
    width : 80 + Math.random() * 10,
    height : 80 + Math.random() * 10,
    neighborDistance : 30
  }; 
  return (
    <Mapbox
      //props - see spec section
    >
      <Child1
        overlay={childProps1}
        //...other props passed to your overlay
      />
      <Child2
      	overlay={childProps2}
        //...other props passed to your overlay
      />
    </Mapbox>
  );
}

Prerequisites

react, redux, react-redux are needed to use this package

npm install react redux react-redux --save

Examples

Example using Mapbox GL with Webpack

https://github.com/yunluyl/react-redux-mapbox-gl-example

Example using Mapbox GL with <script> tag

In root directory of this module

npm install
npm test

Server starts at localhost:3000

Specifications

<Mapbox> props

Property	Type	Required	Default	Description
mapboxgl	object	no	undefined	mapboxgl object from Mapbox GL JS, If using Mapbox GL JS with <script> tag, omit this prop
accessToken	string	yes	undefined	Mapbox API access token
getMap	function	no	undefined	<Mapbox> passes the map object to its parent React element through this function
options	object	yes	undefined	Mapbox options used to create a new Map object; options.style is required;
style	object	yes	undefined	React inline CSS style object used to style the container of the map; style.width is required; style.height is required;
mapEventListener	boolean	no	true	Enables/disables event listeners that control MapReducer state changes; see MapReducer states section for details
boundMargin	number	no	0	Adjust the distance from the boundary of the map that overlays stop displaying

Examples

Use Mapbox APIs in parent module

class example extends React.Component
{
  getMap = (map) =>
  {
  	this.map = map;
  };
  
  componentDidMount()
  {
  	this.map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
  }

  render()
  {
    return (
      <Mapbox
        getMap={this.getMap}
        //...other props
      />
    );
  }
}

Overlay props

There is a overlay object you can define to tie the overlay module to a certain location on the map. If you omit the overlay object, the overlay module is just a child of the <Mapbox> without any special behavior. Other than that, you can pass any prop to your overlays just like normal React modules.

Fileds of overlay object

Field	Type	Required	Default	Description
lnglat	array	yes	undefined	The overlay is placed at position [lng, lat] on the map
width	number	yes	undefined	Width of the overlay in pixel
height	number	yes	undefined	Height of the overlay in pixel
neighborDistance	number	no	0	If any two of the overlays' distance is shorter than neighborDistance, one of the overlays is not displayed

Examples

...
const overlay = {
  lnglat : [12.323, -23.43],
  width : 100,
  height : 200
};

return (
  <Mapbox
    //map props
  >
    <Child1
      overlay={overlay}
      //other customized props for Child1
    />
  </Mapbox>
);
...

MapReducer states

MapReducer states can be used in any react module under <Provider> using the connect function from react-redux

import {connect} from 'react-redux';
import {Component} from 'react';

class example extends Component
{
	...
}

const mapState = (state) =>
{
	return {
		mapState : state.MapReducer
	};
}

export default connect(mapState)(example);

MapReducer states when <Mapbox> prop mapEventListener is false

var MapReducer =
{
	mapLoaded : false, //(boolean) set to true when the inital map loading is done
	viewport :
	{  
		width : 0, //(number) width of the map
		height : 0, //(number) height of the map
		lng : 0, //(number) the longitude that the map is currently centered at
		lat : 0, //(number) the latitude that the map is currently centered at
		zoom : 0 //(number) the current zoom level of the map
	}
};

MapReducer states when <Mapbox> prop mapEventListener is true

var MapReducer =
{
	mapLoaded : false, //(boolean) set to true when the inital map loading is done
	viewport :
	{
		width : 0, //(number) width of the map
		height : 0, //(number) height of the map
		lng : 0, //(number) the longitude that the map is currently centered at
		lat : 0, //(number) the latitude that the map is currently centered at
		zoom : 0 //(number) the current zoom level of the map
	}
	drag : undefined, //(boolean) set to true when user is dragging the map, false otherwise
	touch : undefined, //(boolean) set to true when user is touching the map, false otherwise
	move : undefined, //(boolean) set to true when the map is moving, false otherwise
	zoom : undefined, //(boolean) set to true when the map is zooming, false otherwise
	boxzoom : undefined, //(boolean) set to true when user is using boxzoom, false otherwise
	rotate : undefined //(boolean) set to true when user is rotating the map, false otherwise
};