No description, website, or topics provided.
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example pass lint Feb 12, 2018
.gitignore pass lint Feb 12, 2018
.npmignore The birth of a repo Nov 8, 2015
LICENSE Update overlay, examples and docs to use react-map-gl 0.6. Use Stamen… Dec 3, 2015
README.md Update readme. Feb 16, 2016
index.js pass lint Feb 12, 2018
package.json 1.1.4 Feb 12, 2018

README.md

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.