Awesome

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
  • noClusterWithOneMarker Boolean whether display cluster with only one marker (false by default)
  • 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