Data Layer Clusterer – A Google Maps JavaScript API utility library
Clone or download
Pull request Compare This branch is 18 commits ahead of nantunes:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Data Layer Clusterer Plus – A(nother) Google Maps JavaScript API utility library

A Google Maps JavaScript API v3 library to create and manage per-zoom-level clusters for large amounts of data layer features.

Based on Data Layer Clusterer by Nelson Antunes, also based on Marker Clusterer – A Google Maps JavaScript API utility library by Luke Mehe (Google Inc.).

Getting started

First of all, the creation of a Data Layer Cluster starts with:

var newCluster = new DataLayerClusterer(options);

The options object could have the following parameters:

name type default description required
map Google Map - Map where the clusters and markers has to be displayed true
styles Array[Object] [] Styles for the markers and cluster icon false
gridSize Integer 60 Size of the space the cluster covers false
minimumClusterSize Integer 2 Minimun number of markers the cluster could group false
maxZoom Integer null Max zoom the cluster groups markers false
className String 'cluster' Name of the class the cluster icons DOM element will have false
imagePath String Url* Image for the marker icons false
imageExtension String 'png' false
zoomOnClick Boolean true Action for the click in cluster false
averageCenter Boolean true Make the cluster position center calculated between the position of the markers it groups false

Now we have a empty cluster, so we need to add the properties we want to manage with the cluster. The DataLayerClusterer is an extension of Map.Data layer of Google Maps API v3, so we can add features in the usual way:

    newCluster.addGeoJson(featureColl, {
    idPropertyName: 'id'


name type default description required
setVisible(v:Boolean) Set visible or hidden all the properties and cluster
redraw() Redraw all the clusters
getTotalClusters() Length of the created clusters array
getExtendedBounds() Bounds for the area with the full DataLayerClusterer objects
remove(feature:Feature) Remove the feature that corresponds with the parameter (type Feature)


The event management could be done out of the library:

    var eventHoverIn = scope['newCluster']._dataLayer.addListener('mouseover', function(event) {
    // Anything


Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.