A custom layer for heatmaps in react-leaflet
npm install react-leaflet-heatmap-layerreact-leaflet-heatmap-layer provides a simple component for creating a heatmap layer in a react-leaflet map.
!A screenshot of a heatmap on a leaflet map
Use directly as a fixed layer:
``js
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 (
}
render(
`
Or use it inside a layer control to toggle it:
`js
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 (
render(
`
The HeatmapLayer component takes the following props:
- points: required an array of objects to be processedlongitudeExtractor
- : required a function that returns the object's longitude e.g. marker => marker.lnglatitudeExtractor
- : required a function that returns the object's latitude e.g. marker => marker.latintensityExtractor
- : required a function that returns the object's intensity e.g. marker => marker.valfitBoundsOnLoad
- : boolean indicating whether map should fit data in bounds of map on loadfitBoundsOnUpdate
- : boolean indicating whether map should fit data in bounds of map on Updatemax
- : 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
To try the example:
1. Clone this repository
2. run npm install in the root of your cloned repositorynpm run example
3. run
4. Visit localhost:8000
See CONTRIBUTING.md
This package was inspired by Leaflet.heat.
react-leaflet-heatmap-layer` is MIT licensed.
See LICENSE.md for details.