react-map-gl-heatmap-overlay

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

Usage

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

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

1    render() {
2      return <MapGL {...viewport}>
3        <HeatmapOverlay locations={cities} {...viewport}/>
4      </MapGL>;
5    }

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.

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

Other accessors and their defaults:

1    intensityAccessor: (location) => {1 / 10}
2    sizeAccessor: (location) => 40,
3    // If not specified, defaults to Viridis.
4    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.