@mapbox/mapbox-gl-redux

    0.2.0 • Public • Published

    @mapbox/mapbox-gl-redux

    Tools for building Redux applications with Mapbox GL JS

    Build Status


    Add middleware to your Redux store and a control to your Mapbox GL JS map to sync your application state with the map's internally managed state, while maintaining clean one-way data-flow.

    API

    • ReduxMapControl: Add this to the Mapbox GL JS map. It subscribes to map events and dispatches corresponding Redux actions.
    • mapMiddleware: Add this to the Redux store. When MapActionCreators are used, mapMiddleware will translate those actions into method invocations on the map.
    • MapActionCreators: Use these to programmatically change the map's state.
    • bindMapActionCreators: Returns a set of MapActionCreators scoped to a specific map.
    • MapActionTypes: Use these in your reducer to identify actions triggered by map events.

    Usage

    Let's say you have a button to zoom out and a display of the map's zoom level. When you click the zoom out button, the data flow will look like this:

    • A click handler invokes MapActionCreators.zoomOut() to create a zoomOut action.
    • mapMiddleware detects the zoomOut action and tells the map to zoom out.
    • While the map zooms, it fires 'zoom' events that ReduxMapControl converts to actions.
    • Your reducer hears of these 'zoom' actions and updates the displayed zoom level accordingly.

    So: UI -> click -> action -> map -> map event -> action -> reducer -> UI

    The MapActionCreators correspond to Mapbox GL JS methods, with a few special cases. You can use them with the same function signature documented for the GL JS methods.

    The MapActionTypes correspond to Mapbox GL JS events, with a few special cases. Actions of these types will include the following properties:

    • map: Use this to gather information about the map, e.g. on MapActionTypes.zoom. You probably want to update your zoom state with the value from map.getZoom().
    • mapId: You'll want to ignore the action if it doesn't pertain to your map.
    • event: The Mapbox GL JS map event type.
    • eventData: The Mapbox GL JS map event data.
    • type: The action type.

    MapActionCreators

    These action creators correspond directly with Mapbox GL JS methods:

    • setCenter
    • panBy
    • panTo
    • setZoom
    • zoomTo
    • zoomOut
    • zoomIn
    • setBearing
    • rotateTo
    • resetNorth
    • snapToNorth
    • setPitch
    • fitBounds
    • jumpTo
    • flyTo
    • easeTo
    • stop

    Special actions

    There are a few special action creators that do not directly correspond to Mapbox GL JS map methods.

    sync

    Dispatch a MapActionCreators.sync() action at any time to give your reducer an opportunity to sync up with map state.

    When the middleware detects this action it dispatches a MapActionTypes.sync action that you can use in your reducer.

    setShowCollisionBoxes

    Dispatch MapActionCreators.setShowCollisionBoxes(true) to turn on collision boxes, or MapActionCreators.setShowCollisionBoxes(false) to turn them off.

    After the middleware has adjusted the map's setting, it dispatches a MapActionTypes.setShowCollisionBoxes action that you can use in your reducer.

    setShowTileBoundaries

    Dispatch MapActionCreators.setShowTileBoundaries(true) to turn on collision boxes, or MapActionCreators.setShowTileBoundaries(false) to turn them off.

    After the middleware has adjusted the map's setting, it dispatches a MapActionTypes.setShowTileBoundaries action that you can use in your reducer.

    MapActionTypes

    These action types correspond directly with Mapbox GL JS events:

    • move
    • movestart
    • moveend
    • zoom
    • zoomstart
    • zoomend
    • rotate
    • rotatestart
    • rotateend
    • pitch
    • load

    These ones correspond with the special action creators described above:

    • sync
    • setShowTileBoundaries
    • setShowCollisionBoxes

    Keywords

    none

    Install

    npm i @mapbox/mapbox-gl-redux

    DownloadsWeekly Downloads

    123

    Version

    0.2.0

    License

    BSD-2-Clause

    Unpacked Size

    14.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • mapbox-admin
    • mapbox-machine-user
    • mapbox-npm
    • mapbox-npm-01
    • mapbox-npm-02
    • mapbox-npm-03
    • mapbox-npm-04
    • mapbox-npm-05
    • mapbox-npm-06
    • mapbox-npm-07
    • mapbox-npm-08
    • mapbox-npm-09
    • mapbox-npm-advanced-actions
    • mapbox-npm-ci