React HeatMap Component based on rc-leaflet
npm install rc-leaflet-heatTypeScript support
Point:
ts
interface Point {
lat: number
lng: number
value?: number
}
`
- Gradient:
`ts
type Gradient = {
[key: string]: string
}
`
- Extrema:
`ts
type Extrema = {
gradient: Gradient
max: number
min: number
}
`
Usage
$3
`cmd
npm install rc-leaflet-heat --save
`
$3
`jsx
import React, { Component } from 'react'
import { RCMap, TileLayer } from 'rc-leaflet'
import HeatLayer from 'rc-leaflet-heat'
class App extends Component {
state = {
pointsWithValue: [
{ lat, lng, value }
],
pointsWithoutValue: [
{ lat, lng }
]
}
render () {
const values = this.state.pointsWithValue.map(({ value }) => value)
const max = Math.max(...values)
const half = max / 2
return (
value between half and max /} />
)
}
}
`
#### Props
- points
- type: Point
- required: true
- points to render heatmap.
- dataMax
- type: number
- required: false
- value to control the appearance of heatmap.
- dataMin
- type: number
- required: false
- value to control the appearance of heatmap.
- backgroundColor
- type: string
- required: false
- background color of heatmap layer.
- gradient
- type: Gradient
- required: false
- color behavior of heatmap point.
- radius
- type: number
- required: false
- default: 0.002
- radius of heatmap point.
- opacity
- type: number
- required: false
- opacity of heatmap point, range from 0 to 1.
- maxOpacity
- type: number
- required: false
- maxOpacity of heatmap point, range from 0 to 1.
- minOpacity
- type: number
- required: false
- minOpacity of heatmap point, range from 0 to 1.
- blur
- type: number
- required: false
- blur of heatmap point, range from 0 to 1.
- scaleRadius
- type: boolean
- required: false
- default: true
- automatic change radius of heatmap point when map is zoomed.
- useLocalExtrema
- type: boolean
- required: false
- if set to true, dataMax and dataMin is set by script according to the current view of map.
- onExtremaChange
- type: (extrema: Extrema): void Extrema
- required: false`