No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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 Update readme. Feb 16, 2016
index.js pass lint Feb 12, 2018
package.json 1.1.4 Feb 12, 2018


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


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}/>

The locations prop can be an array or ImmutableJS List.


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')]} />

Other accessors and their defaults:

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


npm install react-map-gl-heatmap-overlay


npm run start

To run the example.


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