A layer of maptalks to cluster markers.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist 0.8.2 Apr 9, 2018
test fix specs Apr 29, 2017
.babelrc update to es6 (#1) Jan 18, 2017
.editorconfig update to es6 (#1) Jan 18, 2017
.eslintrc lots of fixes before publishing Apr 23, 2017
.gitignore update demo and .gitignore Jan 23, 2017
.npmignore lots of fixes before publishing Apr 23, 2017
LICENSE Initial commit Jun 27, 2016
README.md add textSumProperty Dec 20, 2017
circle.yml update to es6 (#1) Jan 18, 2017
gulpfile.js
index.js fix the mergeClusters method (#15) Apr 9, 2018
karma.config.js update karma.config.js Jan 23, 2017
package.json 0.8.2 Apr 9, 2018
yarn.lock

README.md

maptalks.markercluster

CircleCI NPM Version

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

screenshot

Examples

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