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

• A heatmap of 50000 points. (data from Leaflet.Heat)

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

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

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

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);

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

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

get layer's data

Returns Array[]

set new data

• data Array[] data to set

Returns this

add more points

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

Returns this

Returns this

Returns Boolean

Returns this

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

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

The only source file is index.js.

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

• 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