react-map-gl-heatmap-overlay

1.1.4 • Public • Published

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.

/react-map-gl-heatmap-overlay/

    Package Sidebar

    Install

    npm i react-map-gl-heatmap-overlay

    Weekly Downloads

    760

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • vicapow
    • yocontra