react-redux-mapbox-gl

1.0.7 • Public • Published

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.

react-redux-mapbox-gl-screenshot

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
};

Package Sidebar

Install

npm i react-redux-mapbox-gl

Weekly Downloads

0

Version

1.0.7

License

MIT

Last publish

Collaborators

  • luyun198993