Package Exports

@urbica/react-map-gl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@urbica/react-map-gl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Urbica React Mapbox GL JS

npm npm

React Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL.

To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox access token. Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your API access tokens page.

This package is heavily inspired by uber/react-map-gl.

Gallery

Installation
List of React components
Examples
Development

Installation

npm install --save mapbox-gl @urbica/react-map-gl

List of React components

@urbica/react-map-gl provides a set of components:

Examples

You can see more examples here.

Static map

import React from 'react';
import MapGL from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const accessToken = <TOKEN> // Mapbox access token

<MapGL
  style={{ width: '100%', height: '400px' }}
  mapStyle='mapbox://styles/mapbox/light-v9'
  accessToken={MAPBOX_ACCESS_TOKEN}
  latitude={37.78}
  longitude={-122.41}
  zoom={11}
/>;

Interactive map

import React from 'react';
import MapGL from '@urbica/react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const accessToken = <TOKEN> // Mapbox access token

<MapGL
  style={{ width: '100%', height: '400px' }}
  mapStyle='mapbox://styles/mapbox/light-v9'
  accessToken={MAPBOX_ACCESS_TOKEN}
  latitude={37.7577}
  longitude={-122.4376}
  zoom={8}
  onViewportChange={viewport => {
    // Call `setState` and use the state to update the map.
  }}
/>

Map with `Source` and `Layer` components

import React from 'react';
import MapGL, { Source, Layer } from '@urbica/react-map-gl';
import { randomPoint } from "@turf/random";
import "mapbox-gl/dist/mapbox-gl.css";

const accessToken = <TOKEN> // Mapbox access token

const layer = {
  id: "markers",
  type: "circle",
  source: "markers",
  paint: {
    "circle-radius": 16,
    "circle-color": "#1978c8"
  }
};

<MapGL
  style={{ width: "400px", height: "400px" }}
  mapStyle="mapbox://styles/mapbox/light-v9"
  accessToken={MAPBOX_ACCESS_TOKEN}
  latitude={0}
  longitude={0}
  zoom={0}
>
  <Source
    id="markers"
    type="geojson"
    data={randomPoint(10)}
  />
  <Layer
    id="markers"
    type="circle"
    source="markers"
    paint={{
      "circle-radius": 16,
      "circle-color": "#1978c8"
    }}
   />
</MapGL>

Custom Layers support

Custom layers allow a user to render directly into the map's GL context using the map's camera.

Here is an Uber deck.gl usage example.

import React from 'react';
import MapGL, { CustomLayer } from '@urbica/react-map-gl';
import { MapboxLayer } from '@deck.gl/mapbox';
import { ScatterplotLayer } from '@deck.gl/layers';
import 'mapbox-gl/dist/mapbox-gl.css';

const accessToken = <TOKEN> // Mapbox access token

const myDeckLayer = new MapboxLayer({
  id: 'my-scatterplot',
  type: ScatterplotLayer,
  data: [{ position: [-74.5, 40], size: 1000 }],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

<MapGL
  style={{ width: '100%', height: '400px' }}
  mapStyle='mapbox://styles/mapbox/light-v9'
  accessToken={MAPBOX_ACCESS_TOKEN}
  latitude={40}
  longitude={-74.5}
  zoom={9}
>
  <CustomLayer layer={myDeckLayer} />
</MapGL>

See Examples for more info.

Development

Install project dependencies and check that the tests run

npm install
npm test

Then start react-styleguidist by running

MAPBOX_ACCESS_TOKEN=<TOKEN> npm start

where <TOKEN> is a valid Mapbox access token.

@urbica/react-map-gl