@vgrid/react-leaflet-heatmap-layer

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

Usage

This fork changes the behaviour to export a factory function, so that the types can be turned into a generic

Use directly as a fixed layer:

importReactfrom'react';import{render}from'react-dom';import{Map,Marker,Popup,TileLayer}from'react-leaflet';importHeatmapLayerFactoryfrom'../src/HeatmapLayer';import{addressPoints}from'./realworld.10000.js';constHeatmapLayer=HeatmapLayerFactory<[number,number,number]>()classMapExampleextendsReact.Component{render(){return(<div><Mapcenter={[0,0]}zoom={13}><HeatmapLayerfitBoundsOnLoadfitBoundsOnUpdatepoints={addressPoints}longitudeExtractor={m=>m[1]}latitudeExtractor={m=>m[0]}intensityExtractor={m=>parseFloat(m[2])}/><TileLayerurl='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:

importReactfrom'react';import{render}from'react-dom';import{Map,Marker,Popup,TileLayer}from'react-leaflet';importHeatmapLayerFactoryfrom'../src/HeatmapLayer';import{addressPoints}from'./realworld.10000.js';constHeatmapLayer=HeatmapLayerFactory<[number,number,number]>()classMapExampleextendsReact.Component{render(){return(<div><Mapcenter={position}zoom={13}style={{height: '100%'}}><LayersControl><LayersControl.BaseLayername="Base"checked><TileLayerurl="http://{s}.tile.osm.org/{z}/{x}/{y}.png"attribution="&copy; <a href=http://osm.org/copyright>OpenStreetMap</a> contributors"/></LayersControl.BaseLayer><LayersControl.Overlayname="Heatmap"checked><FeatureGroupcolor="purple"><Markerposition={[50.05,-0.09]}><Popup><span>AprettyCSS3popup.<br/>Easilycustomizable.</span></Popup></Marker><HeatmapLayerfitBoundsOnLoadfitBoundsOnUpdatepoints={addressPoints}longitudeExtractor={m=>m[1]}latitudeExtractor={m=>m[0]}intensityExtractor={m=>parseFloat(m[2])}/></FeatureGroup></LayersControl.Overlay><LayersControl.Overlayname="Marker"><FeatureGroupcolor="purple"><Markerposition={position}><Popup><span>AprettyCSS3popup.<br/>Easilycustomizable.</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)
• opacity: the opacity of the heatmap layer (default: 1)
• minOpacity: minimum opacity for heatmap (default: 0.01)
• useLocalExtrema: whether to always have a local minimum and maximum in the viewport (default: false)
• 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 local minimum intensity in the viewport
  • The local maximum intensity in the viewport

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.