# sdk-mapbox-react

> Mapbox wrapper for XYO

Latest version **0.1.3** (published 2018-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install sdk-mapbox-react
pnpm add sdk-mapbox-react
yarn add sdk-mapbox-react
bun add sdk-mapbox-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-11-14 |
| First published | 2018-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 17 |
| Unpacked size | 4.1 MB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Author | Rasheed Bustamam |
| Maintainers | abustamam |

## Links

- npm: https://www.npmjs.com/package/sdk-mapbox-react
- Repository: https://github.com/XYOracleNetwork/LayerOne-React
- npm.io page: https://npm.io/package/sdk-mapbox-react

## Dependencies (17)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [color](https://npm.io/package/color.md) ^3.0.0
- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [glamor](https://npm.io/package/glamor.md) ^2.20.40
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [deck.gl](https://npm.io/package/deck.gl.md) 6.0.3
- [debounce](https://npm.io/package/debounce.md) ^1.1.0
- [glamorous](https://npm.io/package/glamorous.md) ^4.13.1
- [mapbox-gl](https://npm.io/package/mapbox-gl.md) ^0.49.0-beta.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [quadkeytools](https://npm.io/package/quadkeytools.md) ^0.0.2
- [react-map-gl](https://npm.io/package/react-map-gl.md) ^3.3.0
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^6.1.4
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.20.1
- [@turf/center-of-mass](https://npm.io/package/@turf/center-of-mass.md) ^6.0.1
- [@turf/boolean-overlap](https://npm.io/package/@turf/boolean-overlap.md) ^6.0.1
- [@turf/boolean-contains](https://npm.io/package/@turf/boolean-contains.md) ^6.0.1

## Recent versions

- 0.1.3 (latest) — 2018-11-14
- 0.1.2 — 2018-11-02
- 0.1.1 — 2018-10-30
- 0.0.2 — 2018-10-29
- 0.0.1 — 2018-09-05

## README

# Layer One Mapbox Wrapper

## Install

### Development

If running in development, please follow the README in the
[root package directory](https://github.com/XYOracleNetwork/LayerOne-React)

#### 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](https://github.com/pelias/documentation/) documentation to spin up your own.

### Production

```bash
yarn add sdk-mapbox-react
```

## Usage

Basic:

```jsx
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:

```jsx
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

```js
{
  /**
   * 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

```js
{
  /**
   * 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](https://github.com/Qix-/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

---
_Source: https://npm.io/package/sdk-mapbox-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._