React HeatMap Component based on rc-leaflet
History Versions
Docs
Features
-
TypeScript
support
Data Structure
-
Point
: -
Gradient
: -
Extrema
:
Usage
Install
npm install rc-leaflet-heat --save
Example
import React Component from 'react'import RCMap TileLayer from 'rc-leaflet'import HeatLayer from 'rc-leaflet-heat' state = pointsWithValue: lat lng value pointsWithoutValue: lat lng { const values = thisstatepointsWithValue const max = Math const half = max / 2 return <RCMap> <TileLayer /> <HeatLayer = = /> <HeatLayer = = /> </RCMap> }
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
-
fired when extrema is probably changed.
-