https://github.com/vickyliin/leaflet.gridheat
A heatmap plugin with data stored in tiles.
https://github.com/vickyliin/leaflet.gridheat
ajax heat heatmap leaflet leaflet-layer leaflet-plugin tile
Last synced: 6 months ago
JSON representation
A heatmap plugin with data stored in tiles.
- Host: GitHub
- URL: https://github.com/vickyliin/leaflet.gridheat
- Owner: vickyliin
- License: mit
- Created: 2017-09-20T06:56:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-29T05:41:48.000Z (about 8 years ago)
- Last Synced: 2024-06-02T10:11:38.484Z (over 1 year ago)
- Topics: ajax, heat, heatmap, leaflet, leaflet-layer, leaflet-plugin, tile
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet.gridHeat
A heatmap plugin with data stored in tiles to get rid of large amount data transfer. Built on top of [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat).
## Demo
- [Codepen](https://codepen.io/vickyliin/pen/qPqvBd)
This is a demo of randomly generated data. Data points are generated as tiles loaded, so it is expected for the heatmap changes each time you zoom/move the map.
## Installation
You can import the script after leaflet in your html file:
```html
```
Or use npm
```
npm install leaflet.gridheat leaflet --save
```
And import/require it after leaflet
```javascript
const L = require('leaflet')
require('leaflet.gridheat')
```
```javascript
import L from 'leaflet'
import 'leaflet.gridheat'
```
## Usage
```javascript
L.gridHeat(options).addTo(yourMap)
```
or use url template just as tile layers:
```javascript
let url = 'http://your.data.provider/{x}/{y}/{z}'
L.gridHeat(url, options).addTo(yourMap)
```
## Reference
### url
Data in `options` and `x`, `y`, `z` of tile's xyz-coordinate would be passed to url template, eg.
```javascript
let url = 'http://your.data.provider/{x}/{y}/{z}?{someParamKey}={itsValue}'
let options = {
someParamKey: 'key',
itsValue: 'value'
}
// the url generated would be like:
// http://your.data.provider/229/101/8?key=value
```
### options
All [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat) options are available.
| Name | Type | Default | Description |
|------------------------|----------------|---------|-----------------------------------------------|
| options.updateInterval | Number | 800 | Debounce time of update in ms. |
| options.responseType | String | json | Ajax response type when using `url`. |
| options.ajax | Function | ... | A function to load tile data from server. |
#### options.ajax
A function to load tile data from server.
##### default
A function that gets data from `url`.
##### ajax(params)
| Name | Type | Description |
|---------------------|----------------|-------------------------------|
| params.latLngBounds | L.LatLngBounds | LatLngBounds of the tile. |
| params.coords | L.Point | xyz-coordinate of the tile. |
##### return
List of **latLngs** to show **or** a promise resolving latLngs.
For the format of latLngs, please refer to [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat).
### GridHeat
`L.gridHeat` is just an alias of `new L.LayerGroup.GridHeat`, which is an extension of `L.LayerGroup`:
| Name | Type | Description |
|---------------------|----------------------|-----------------------------------------------------------------|
| gridHeat.heatLayer | L.HeatLayer | The heat layer displaying data. |
| gridHeat.dataLayer | L.GridLayer.AjaxData | A layer with data stored in tiles, extended from `L.GridLayer`. |
One can accesses and manipulates the layers directly by these APIs.