leaflet.gridheat v1.1.1

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/leaflet@1.2.0/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.

options.ajax

A function to load tile data from server.

default

A function that gets data from url.

ajax(params)

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:

One can accesses and manipulates the layers directly by these APIs.