README

react-map-gl-heatmap-overlay

A heatmap overlay for react-map-gl built using webgl-heatmap originally created by Florian Boesch.

screen shot 2016-02-15 at 1 54 42 pm

Usage

var HeatmapOverlay = require('react-map-gl-heatmap-overlay');
var cities = require('example-cities');

Where each element in cities looks like: {longitude, latitude}.

    render() {
      return <MapGL {...viewport}>
        <HeatmapOverlay locations={cities} {...viewport}/>
      </MapGL>;
    }

The locations prop can be an array or ImmutableJS List.

Accessors

Data accessors can be provided if your data doesn't fit the expected {longitude, latitude} form.

    render() {
      return <MapGL ...viewport>
        <HeatmapOverlay locations={houses} {...viewport}
          lngLatAccessor={(house) => [house.get('lng'), house.get('lat')]} />
      </MapGL>;
    }

Other accessors and their defaults:

    intensityAccessor: (location) => {1 / 10}
    sizeAccessor: (location) => 40,
    // If not specified, defaults to Viridis.
    gradientColors: Immutable.List(['blue', 'red'])

Installation

npm install react-map-gl-heatmap-overlay

Developing

npm run start

To run the example.

Attribution

The included example uses raster tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.

Usage no npm install needed!