maptalks.markercluster

A plugin of maptalks.js to draw markers as clusters.

Examples

marker clusters of 50000 points. (data from Leaflet.Heat)

Install

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

Usage

As a plugin, maptalks.markercluster 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.markercluster/dist/maptalks.markercluster.min.js"></script>
<script>
var data = [marker1, marker2, marker3];
var clusterLayer = new maptalks.ClusterLayer('cluster', data).addTo(map);
</script>

Supported Browsers

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

API Reference

ClusterLayer is a subclass of maptalks.VectorLayer and inherits all the methods of its parent.

`Constructor`

new maptalks.ClusterLayer(id, data, options)

id String layer id
data Marker[] layer data, an array of maptalks.Marker
options Object options
- maxClusterRadius Number max cluster radius (160 by default)
- symbol Object symbol of clusters
- textSymbol Object symbol of cluster texts
- drawClusterText Boolean whether to draw cluster texts (true by default)
- textSumProperty String property name to sum up to display as the cluster text
- maxClusterZoom Number the max zoom to draw as clusters (null by default)
- animation Boolean whether animate the clusters when zooming (true by default)
- animationDuration Number the animation duration
- Other options defined in maptalks.VectorLayer

`config(key, value)`

config layer's options and redraw the layer if necessary

clusterLayer.config('maxClusterRadius', 100);
clusterLayer.config({
    'textSymbol' : {
        'textFaceName'      : 'monospace',
        'textSize'          : 16
    }
});

Returns this

`addMarker(marker)`

add more markers

marker Marker[] markers to add

Returns this

`toJSON()`

export the layer's JSON.

var json = clusterLayer.toJSON();

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

JiangNJ/maptalks.markercluster