maptalks.heatmap

A plugin of maptalks.js to draw heatmap on maps, based on mourner's simpleheat.

Examples

• A heatmap of 50000 points. (data from Leaflet.Heat)
• Heatmap of 50000 points rendered by WebGL (with maptalks-gl)

Install

• Install with npm: npm install maptalks.heatmap.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.heatmap/dist/maptalks.heatmap.min.js

Usage

As a plugin, maptalks.heatmap must be loaded after maptalks.js in browsers.

Vanilla Javascript

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.heatmap/dist/maptalks.heatmap.min.js"></script>
<script>
var data = [[0, 0, 0.3], [0, 0, 0.4], [0, 0, 0.4]];
var heatLayer = new maptalks.HeatLayer('heat', data).addTo(map);
</script>

ES6

import { HeatLayer } from 'maptalks.heatmap';
const data = [[0, 0, 0.3], [0, 0, 0.4], [0, 0, 0.4]];
const heatLayer = new HeatLayer('heat', data).addTo(map);

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

Constructor

HeatmapLayer is a subclass of maptalks.Layer and inherits all the methods of its parent.

new maptalks.HeatmapLayer(id, data, options)

• id String layer id
• data Array[] layer data: [[x, y, value], [x, y, value]..]
• options Object options
  • max Number max data value (1 by default)
  • radius Number point radius(25 by default)
  • blur Number blur radius(15 by default)
  • minOpacity Number minimum point opacity (0.05 by default)
  • heatValueScale Number the scale value to multiply with heat data (1 by default)
  • gradient Object set gradient colors as {<stop>: '<color>'}, default by { 0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red' }
  • Other options defined in maptalks.Layer

config(key, value)

config layer's options and redraw the layer if necessary

heatLayer.config('max', 10);
heatLayer.config({
    'radius' : 80,
    'blur' : 30,
    'gradient' : {0.4: 'blue', 0.65: 'lime', 1: 'red'}
});

Returns this

getData

get layer's data

Returns Array[]

setData(data)

set new data

• data Array[] data to set

Returns this

addPoint(point)

add more points

• point Array[] points to add, [[x, y, value], [x, y, value]..]

Returns this

redraw()

Returns this

isEmpty()

Returns Boolean

clear()

Returns this

toJSON(options)

export the layer's JSON.

• options Object options
  • clipExtent maptalks.Extent the extent to clip

// only export points in map's current extent.
heatLayer.toJSON({
    'clipExtent' : map.getExtent()
});

Returns Object

Contributing

We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Develop

The only source file is index.js.

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

Scripts

• Install dependencies

$ npm install

• Watch source changes and generate runnable bundle repeatedly

$ gulp watch

• Tests

$ npm test

• Watch source changes and run tests repeatedly

$ gulp tdd

• Package and generate minified bundles to dist directory

$ gulp minify

• Lint

$ npm run lint