react-leaflet-heatmap-layer

react-leaflet-heatmap-layer provides a simple <HeatmapLayer /> component for creating a heatmap layer in a react-leaflet map.

Usage

Use directly as a fixed layer:

import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import HeatmapLayer from '../src/HeatmapLayer';
import { addressPoints } from './realworld.10000.js';

class MapExample extends React.Component {

  render() {
    return (
      <div>
        <Map center={[0,0]} zoom={13}>
          <HeatmapLayer
            fitBoundsOnLoad
            fitBoundsOnUpdate
            points={addressPoints}
            longitudeExtractor={m => m[1]}
            latitudeExtractor={m => m[0]}
            intensityExtractor={m => parseFloat(m[2])} />
          <TileLayer
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Map>
      </div>
    );
  }

}

render(<MapExample />, document.getElementById('app'));

Or use it inside a layer control to toggle it:

import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import HeatmapLayer from '../src/HeatmapLayer';
import { addressPoints } from './realworld.10000.js';

class MapExample extends React.Component {

  render() {
    return (
      <div>
      <Map center={position} zoom={13} style={{ height: '100%' }} >
            <LayersControl>
              <LayersControl.BaseLayer name="Base" checked>
                <TileLayer
                  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                  attribution="&copy; <a href=http://osm.org/copyright>OpenStreetMap</a> contributors"
                />
              </LayersControl.BaseLayer>
              <LayersControl.Overlay name="Heatmap" checked>
                <FeatureGroup color="purple">
                  <Marker position={[50.05, -0.09]} >
                    <Popup>
                      <span>A pretty CSS3 popup.<br /> Easily customizable. </span>
                    </Popup>
                  </Marker>
                  <HeatmapLayer
                    fitBoundsOnLoad
                    fitBoundsOnUpdate
                    points={addressPoints}
                    longitudeExtractor={m => m[1]}
                    latitudeExtractor={m => m[0]}
                    intensityExtractor={m => parseFloat(m[2])}
                  />
                </FeatureGroup>
              </LayersControl.Overlay>
              <LayersControl.Overlay name="Marker">
                <FeatureGroup color="purple">
                  <Marker position={position} >
                    <Popup>
                      <span>A pretty CSS3 popup.<br /> Easily customizable. </span>
                    </Popup>
                  </Marker>
                </FeatureGroup>
              </LayersControl.Overlay>
            </LayersControl>
          </Map>
      </div>
    );
  }
}

render(<MapExample />, document.getElementById('app'));

API

The HeatmapLayer component takes the following props:

• points: required an array of objects to be processed
• longitudeExtractor: required a function that returns the object's longitude e.g. marker => marker.lng
• latitudeExtractor: required a function that returns the object's latitude e.g. marker => marker.lat
• intensityExtractor: required a function that returns the object's intensity e.g. marker => marker.val
• fitBoundsOnLoad: boolean indicating whether map should fit data in bounds of map on load
• fitBoundsOnUpdate: boolean indicating whether map should fit data in bounds of map on Update
• max: max intensity value for heatmap (default: 3.0)
• radius: radius for heatmap points (default: 30)
• maxZoom: maximum zoom for heatmap (default: 18)
• minOpacity: minimum opacity for heatmap (default: 0.01)
• blur: blur for heatmap points (default: 15)
• gradient: object defining gradient stop points for heatmap e.g. { 0.4: 'blue', 0.8: 'orange', 1.0: 'red' } (default: simpleheat package default gradient)
• onStatsUpdate: called on redraw with a { min, max } object containing the min and max number of items found for a single coordinate

Example

To try the example:

1. Clone this repository
2. run npm install in the root of your cloned repository
3. run npm run example
4. Visit localhost:8000

Contributing

See CONTRIBUTING.md

Credits

This package was inspired by Leaflet.heat.

License

react-leaflet-heatmap-layer is MIT licensed.

See LICENSE.md for details.

2.0.0 Release

• React-leaflet v2.x support. For react-leaflet v1.x please use react-leaflet-heatmep-layer v1.x.

1.0.4 Release

• Allow the latest versions of react and react-dom (i.e. 16 and up).

1.0.3 Release

• Fixed warning "Accessing PropTypes via the main React package is deprecated"

1.0.2 Release

• Fix bug where radius, blur, and max were not being used when passed in as props.

1.0.1 Release

• Fix bug in componentWillUnmount->safeRemoveLayer where getPanes doesn't return anything so .contains is called on undefined.

1.0.0 Release

• Leaflet 1.0.0 support
• React-Leaflet 1.0.0 support
• List eslint as an explicit devDependency
• upgrade the eslint related packages
• fix linting errors using current config
• Add notes about maintaining absence of lint errors and warnings in Contributing guide
• This should make it easier to ensure code quality as others contribute in the open
• Also, drop unused jest and enzyme deps

0.2.3 Release

• Missed Transpilation

0.2.2 Release

• Change getHeatmapProps signature to take a props argument to support passing nextProps from componentWillReceiveProps and this.props from componentDidMount

0.2.1 Release

• Fix getMaxZoom returning props.radius instead of props.maxZoom, fix misnamed call to getMax instead of getMaxZoom in redraw()

0.2.0 Release

• adds an onStatsUpdate prop which is called on redraw with a { min, max } object containing the min and max number of items found for a single coordinate

0.1.0 Release

• Handle invalid points gracefully
• Add fitBoundsOnUpdate prop to indicate that the map should fit the data in the map on update

0.0.2 Release

• Fix an issue with the gradient property being applied

0.0.1 Release

• Initial implementation of package