Layer One Mapbox Wrapper

Install

Development

If running in development, please follow the README in the root package directory

Running stories

We use Storybook for visual testing. If you would like to do so, you will need a .env file in this directory with the following contents:

STORYBOOK_MAPBOX_API_TOKEN=[api-key]
PELIAS_ORIGIN=[pelias-origin]

You can also do something like STORYBOOK_MAPBOX_API_TOKEN=[api-key] yarn run storybook but that's a bit verbose.

Set STORYBOOK_MAPBOX_API_TOKEN to your MapBox API token, and Pelias Origin will be a URL to your Pelias server. See Pelias documentation to spin up your own.

Production

yarn add sdk-mapbox-react

Usage

Basic:

import React, { Component } from 'react'
import { Map } from 'sdk-mapbox-react'

const mapboxApiAccessToken = process.env.REACT_APP_MAPBOX_API_TOKEN

class MapPage extends Component {
  render() {
    return <Map mapboxApiAccessToken={mapboxApiAccessToken} />
  }
}

With QuadKey Tile Layers:

import { Map, TileLayer } from 'sdk-mapbox-react'
import {
  is,
  uniq,
  concat,
  symmetricDifference,
  __,
} from 'ramda'
// Note: ramda not necessary for using this library, just useful to use

const mapboxApiAccessToken = process.env.REACT_APP_MAPBOX_API_TOKEN

const isArray = is(Array)
const castArray = x => (isArray(x) ? x : [x])

class DeckGLTileMap extends Component {
  state = {
    selectedTiles: [],
  }

  selectTile = tileId => {
    const tileIds = castArray(tileId)
    this.setState(({ selectedTiles }) => ({
      selectedTiles: uniq(concat(selectedTiles, tileIds)),
    }))
  }

  deselectTile = tileId => {
    const tileIds = castArray(tileId)
    this.setState(({ selectedTiles }) => ({
      selectedTiles: symmetricDifference(selectedTiles, tileIds),
    }))
  }

  handleTileClick = ({ object }) => {
    const { selectedTiles } = this.state
    const { selected, quadKey } = object
    if (selected) {
      this.deselectTile(quadKey)
    } else {
      this.deselectTile(selectedTiles) // comment this out to enable single-click multi select
      this.selectTile(quadKey)
      const { lat, lng } = quadTools.origin(quadKey)
    }
  }

  render() {
    const { selectedTiles } = this.state

    return (
      <DeckGLMap mapboxApiAccessToken={mapboxApiAccessToken}>
        <TileLayer
          onClick={this.handleTileClick}
          selectTile={this.selectTile}
          selectedTiles={selectedTiles}
        />
      </DeckGLMap>
    )
  }
}

See DeckGLMap.stories.js for more examples, including usage of the experimental POI (points of interest) Layer.

API

* denotes deprecated API

Map

{
  /**
   * API Access token
   */
  mapboxApiAccessToken: string.isRequired,
  /**
  * Map Style, one of the following:
  * basic
  * streets
  * bright
  * light
  * dark
  * satellite
  * OR a regular mapbox style URL
  * Default: bright
  * Read more: https://www.mapbox.com/mapbox-gl-js/example/setstyle/
  */
  mapStyle: oneOf([
  'basic',
  'streets',
  'bright',
  'light',
  'dark',
  'satellite',
  ]),
  /**
   * Any Deck.GL Layers
   */
  children: any,
  /**
   * If true, drag select will be enabled. Default true.
   */
  dragSelect: bool,
  /**
   * If true, map will stretch to fit parent. Default false.
   */
  fitParent: bool,
  /**
   * viewport, optional. If provided, this will be a controlled component
   */
  viewport: shape({
    latitude: number,
    longitude: number,
    zoom: number,
    bearing: number,
    pitch: number,
    width: number,
    height: number,
  }),
  /**
   * viewport => void: update viewport
   */
  onViewportChange: func,
  /**
   * fill color of the drag-select rectangle. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   */
  dragRectFillColor: oneOfType([object, string]),
  /**
   * stroke color of the drag-select rectangle. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   */
  dragRectStrokeColor: oneOfType([object, string]),
}

Tile Layer

{
  /**
   * ID to identify the TileLayer.
   * Default: 'tile-layer'
   */
  id: string,
  /**
   * Function to get the fill color of the tile. Is called on each item in the data array.
   * Can also pass in a constant accessor, like '#FFF'.
   * Note: `getColor` turns any color into an rgba array and converts the a into percent
   * instead of decimal (i.e., 50 instead of 0.5 alpha)
   * Default: getColor(d.selected ? selectedFillColor : d.pendingSelection ? pendingSelectedFillColor: defaultFillColor)
   */
  getFillColor: oneOfType([string, func]),
  /**
   * Function to get the stroke/line color of the tile. Is called on each item in the data array.
   * Can also pass in a constant accessor, like '#FFF'.
   * Note: `getColor` turns any color into an rgba array and converts the a into percent
   * instead of decimal (i.e., 50 instead of 0.5 alpha)
   * Default: getColor(d.selected ? selectedStrokeColor : d.pendingSelection ? pendingSelectedStrokeColor: defaultStrokeColor)
   */
  getLineColor: oneOfType([string, func]),
  /**
   * function which handles tile click. Passed onto the Layer onClick prop, so
   * it will take the same functional arguments:
   * http://deck.gl/#/documentation/deckgl-api-reference/layers/layer?section=interaction-properties
   */
  onClick: func,
  /**
   * Array of selected tileIds
   */
  selectedTiles: arrayOf(string),
  /**
   * function which selects the tile or tiles
   * accepts a tileId, or an array of tileIds
   */
  selectTile: func,
  /**
   * fill color of an unselected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#00F').alpha(0.5)
   */
  defaultFillColor: oneOfType([object, string]),
  /**
   * stroke color of an unselected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#00F')
   */
  defaultStrokeColor: oneOfType([object, string]),
  /**
   * fill color of a selected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#0F0').alpha(0.5)
   */
  selectedFillColor: oneOfType([object, string]),
  /**
   * stroke color of a selected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#0F0')
   */
  selectedStrokeColor: oneOfType([object, string]),
  /**
   * fill color of a pending selected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#F00').alpha(0.5)
   */
  pendingSelectedFillColor: oneOfType([object, string]),
  /**
   * stroke color of a pending selected tile. We use [Color](https://github.com/Qix-/color)
   * under the covers, so anything that it accepts as arguments is also accepted,
   * which includes Color objects themselves.
   * Default: Color('#F00')
   */
  pendingSelectedStrokeColor: oneOfType([object, string]),
}

POILayer

Same PropTypes as TileLayer, except also needs the mapboxApiAccessToken and peliasOrigin.

Note regarding colors: We use Color under the covers, so anything that it accepts as arguments is also accepted, which includes Color objects themselves. 🤯

License

MIT © XYO, The Findables Company