-
TypeScript
support
-
Point
:interface Point { lat: number lng: number value?: number }
-
Gradient
:type Gradient = { [key: string]: string }
-
Extrema
:type Extrema = { gradient: Gradient max: number min: number }
npm install rc-leaflet-heat --save
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 (
<RCMap>
<TileLayer />
<HeatLayer points={this.state.pointsWithValue} dataMax={/* value between half and max */} />
<HeatLayer points={this.state.pointsWithoutValue} dataMax={1.2} />
</RCMap>
)
}
}
-
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
-
fired when extrema is probably changed.
-