Nimble Pixie Merchant

    maptalks.heatmap

    0.6.1 • Public • Published

    maptalks.heatmap

    CircleCI NPM Version

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

    screenshot

    Examples

    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

    Keywords

    none

    Install

    npm i maptalks.heatmap

    DownloadsWeekly Downloads

    123

    Version

    0.6.1

    License

    MIT

    Unpacked Size

    45 kB

    Total Files

    7

    Last publish

    Collaborators

    • fuzhenn