React Component for Mapbox GL JS
Clone or download
greenkeeper[bot] and stepankuzmin Update rollup to the latest version 🚀 (#121)
* chore(package): update rollup to version 0.68.0

* chore(package): update lockfile yarn.lock
Latest commit be1f015 Dec 16, 2018

README.md

Urbica React Mapbox GL JS

Build Status npm npm

React Component for Mapbox GL JS.

Examples.

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

npm install --save mapbox-gl immutable@4.0.0-rc.11 @urbica/react-map-gl

You may also want to install supercluster package for Cluster component.

List of React components

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

Examples

You can see more examples here.

Static map

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

const accessToken = <TOKEN> // Mapbox access token

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

Interactive map

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

const accessToken = <TOKEN> // Mapbox access token

<MapGL
  style={{ width: '400px', height: '400px' }}
  accessToken={accessToken}
  mapStyle="mapbox://styles/mapbox/streets-v9"
  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 MapGL, { Source, Layer } from '@urbica/react-map-gl';
import Immutable from "immutable";
import random from "@turf/random";
import "mapbox-gl/dist/mapbox-gl.css";

const accessToken = <TOKEN> // Mapbox access token

const source = Immutable.fromJS({
  type: "geojson",
  data: random.randomPoint(10)
});

const layer = Immutable.fromJS({
  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" source={source} />
  <Layer layer={layer} />
</MapGL>

See Examples for more info.

Development

Greenkeeper badge

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.