Skip to content

vicapow/react-map-gl-heatmap-overlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •