Leaflet.gridHeat

A heatmap plugin with data stored in tiles to get rid of large amount data transfer. Built on top of Leaflet.heat.

Demo

Codepen

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:

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.gridheat@latest/dist/leaflet.gridHeat.min.js"></script>

Or use npm

npm install leaflet.gridheat leaflet --save

And import/require it after leaflet

const L = require('leaflet')
require('leaflet.gridheat')

import L from 'leaflet'
import 'leaflet.gridheat'

Usage

L.gridHeat(options).addTo(yourMap)

or use url template just as tile layers:

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.

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 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.

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.

vickyliin / leaflet.gridheat Goto Github PK