javascript cluster

http://code.google.com/p/gmaps-utility-library/source/browse/trunk/markerclusterer/1.0/src/markerclusterer.js?spec=svn143&r=143

/**

* @name MarkerClusterer

* @version 1.0

* @author Xiaoxi Wu

* @copyright (c) 2009 Xiaoxi Wu

* @fileoverview

* This javascript library creates and manages per-zoom-level

* clusters for large amounts of markers (hundreds or thousands).

* This library was inspired by the <a href="http://www.maptimize.com">

* Maptimize</a> hosted clustering solution.

* <br /><br/>

* <b>How it works</b>:<br/>

* The <code>MarkerClusterer</code> will group markers into clusters according to

* their distance from a cluster's center. When a marker is added,

* the marker cluster will find a position in all the clusters, and

* if it fails to find one, it will create a new cluster with the marker.

* The number of markers in a cluster will be displayed

* on the cluster marker. When the map viewport changes,

* <code>MarkerClusterer</code> will destroy the clusters in the viewport

* and regroup them into new clusters.

*

*/

/*

* 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

*

* http://www.apache.org/licenses/LICENSE-2.0

*

* 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.

*/

/**

* @name MarkerClustererOptions

* @class This class represents optional arguments to the {@link MarkerClusterer}

* constructor.

* @property {Number} [maxZoom] The max zoom level monitored by a

* marker cluster. If not given, the marker cluster assumes the maximum map

* zoom level. When maxZoom is reached or exceeded all markers will be shown

* without cluster.

* @property {Number} [gridSize=60] The grid size of a cluster in pixel. Each

* cluster will be a square. If you want the algorithm to run faster, you can set

* this value larger.

* @property {Array of MarkerStyleOptions} [styles]

* Custom styles for the cluster markers.

* The array should be ordered according to increasing cluster size,

* with the style for the smallest clusters first, and the style for the

* largest clusters last.

*/

/**

* @name MarkerStyleOptions

* @class An array of these is passed into the {@link MarkerClustererOptions}

* styles option.

* @property {String} [url] Image url.

* @property {Number} [height] Image height.

* @property {Number} [height] Image width.

* @property {Array of Number} [opt_anchor] Anchor for label text, like [24, 12].

* If not set, the text will align center and middle.

* @property {String} [opt_textColor="black"] Text color.

*/

/**

* Creates a new MarkerClusterer to cluster markers on the map.

*

* @constructor

* @param {GMap2} map The map that the markers should be added to.

* @param {Array of GMarker} opt_markers Initial set of markers to be clustered.

* @param {MarkerClustererOptions} opt_opts A container for optional arguments.

*/

function MarkerClusterer(map, opt_markers, opt_opts) {

// private members

var clusters_ = [];

var map_ = map;

var maxZoom_ = null;

var me_ = this;

var gridSize_ = 60;

var sizes = [53, 56, 66, 78, 90];

var styles_ = [];

var leftMarkers_ = [];

var mcfn_ = null;

var i = 0;

for (i = 1; i <= 5; ++i) {

styles_.push({

'url': "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m" + i + ".png",

'height': sizes[i - 1],

'width': sizes[i - 1]

});

}

if (typeof opt_opts === "object" && opt_opts !== null) {

if (typeof opt_opts.gridSize === "number" && opt_opts.gridSize > 0) {

gridSize_ = opt_opts.gridSize;

}

if (typeof opt_opts.maxZoom === "number") {

maxZoom_ = opt_opts.maxZoom;

}

if (typeof opt_opts.styles === "object" && opt_opts.styles !== null && opt_opts.styles.length !== 0) {

styles_ = opt_opts.styles;

}

}

/**

* When we add a marker, the marker may not in the viewport of map, then we don't deal with it, instead

* we add the marker into a array called leftMarkers_. When we reset MarkerClusterer we should add the

* leftMarkers_ into MarkerClusterer.

*/

function addLeftMarkers_() {

if (leftMarkers_.length === 0) {

return;

}

var leftMarkers = [];

for (i = 0; i < leftMarkers_.length; ++i) {

me_.addMarker(leftMarkers_[i], true, null, null, true);

}

leftMarkers_ = leftMarkers;

}

/**

* Get cluster marker images of this marker cluster. Mostly used by {@link Cluster}

* @private

* @return {Array of String}

*/

this.getStyles_ = function () {

return styles_;

};

/**

* Remove all markers from MarkerClusterer.

*/

this.clearMarkers = function () {

for (var i = 0; i < clusters_.length; ++i) {

if (typeof clusters_[i] !== "undefined" && clusters_[i] !== null) {

clusters_[i].clearMarkers();

}

}

clusters_ = [];

leftMarkers_ = [];

GEvent.removeListener(mcfn_);

};

/**

* Check a marker, whether it is in current map viewport.

* @private

* @return {Boolean} if it is in current map viewport

*/

function isMarkerInViewport_(marker) {

return map_.getBounds().containsLatLng(marker.getLatLng());

}

/**

* When reset MarkerClusterer, there will be some markers get out of its cluster.

* These markers should be add to new clusters.

* @param {Array of GMarker} markers Markers to add.

*/

function reAddMarkers_(markers) {

var len = markers.length;

var clusters = [];

for (var i = len - 1; i >= 0; --i) {

me_.addMarker(markers[i].marker, true, markers[i].isAdded, clusters, true);

}

addLeftMarkers_();

}

/**

* Add a marker.

* @private

* @param {GMarker} marker Marker you want to add

* @param {Boolean} opt_isNodraw Whether redraw the cluster contained the marker

* @param {Boolean} opt_isAdded Whether the marker is added to map. Never use it.

* @param {Array of Cluster} opt_clusters Provide a list of clusters, the marker

* cluster will only check these cluster where the marker should join.

*/

this.addMarker = function (marker, opt_isNodraw, opt_isAdded, opt_clusters, opt_isNoCheck) {

if (opt_isNoCheck !== true) {

if (!isMarkerInViewport_(marker)) {

leftMarkers_.push(marker);

return;

}

}

var isAdded = opt_isAdded;

var clusters = opt_clusters;

var pos = map_.fromLatLngToDivPixel(marker.getLatLng());

if (typeof isAdded !== "boolean") {

isAdded = false;

}

if (typeof clusters !== "object" || clusters === null) {

clusters = clusters_;

}

var length = clusters.length;

var cluster = null;

for (var i = length - 1; i >= 0; i--) {

cluster = clusters[i];

var center = cluster.getCenter();

if (center === null) {

continue;

}

center = map_.fromLatLngToDivPixel(center);

// Found a cluster which contains the marker.

if (pos.x >= center.x - gridSize_ && pos.x <= center.x + gridSize_ &&

pos.y >= center.y - gridSize_ && pos.y <= center.y + gridSize_) {

cluster.addMarker({

'isAdded': isAdded,

'marker': marker

});

if (!opt_isNodraw) {

cluster.redraw_();

}

return;

}

}

// No cluster contain the marker, create a new cluster.

cluster = new Cluster(this, map);

cluster.addMarker({

'isAdded': isAdded,

'marker': marker

});

if (!opt_isNodraw) {

cluster.redraw_();

}

// Add this cluster both in clusters provided and clusters_

clusters.push(cluster);

if (clusters !== clusters_) {

clusters_.push(cluster);

}

};

/**

* Remove a marker.

*

* @param {GMarker} marker The marker you want to remove.

*/

this.removeMarker = function (marker) {

for (var i = 0; i < clusters_.length; ++i) {

if (clusters_[i].remove(marker)) {

clusters_[i].redraw_();

return;

}

}

};

/**

* Redraw all clusters in viewport.

*/

this.redraw_ = function () {

var clusters = this.getClustersInViewport_();

for (var i = 0; i < clusters.length; ++i) {

clusters[i].redraw_(true);

}

};

/**

* Get all clusters in viewport.

* @return {Array of Cluster}

*/

this.getClustersInViewport_ = function () {

var clusters = [];

var curBounds = map_.getBounds();

for (var i = 0; i < clusters_.length; i ++) {

if (clusters_[i].isInBounds(curBounds)) {

clusters.push(clusters_[i]);

}

}

return clusters;

};

/**

* Get max zoom level.

* @private

* @return {Number}

*/

this.getMaxZoom_ = function () {

return maxZoom_;

};

/**

* Get map object.

* @private

* @return {GMap2}

*/

this.getMap_ = function () {

return map_;

};

/**

* Get grid size

* @private

* @return {Number}

*/

this.getGridSize_ = function () {

return gridSize_;

};

/**

* Get total number of markers.

* @return {Number}

*/

this.getTotalMarkers = function () {

var result = 0;

for (var i = 0; i < clusters_.length; ++i) {

result += clusters_[i].getTotalMarkers();

}

return result;

};

/**

* Get total number of clusters.

* @return {int}

*/

this.getTotalClusters = function () {

return clusters_.length;

};

/**

* Collect all markers of clusters in viewport and regroup them.

*/

this.resetViewport = function () {

var clusters = this.getClustersInViewport_();

var tmpMarkers = [];

var removed = 0;

for (var i = 0; i < clusters.length; ++i) {

var cluster = clusters[i];

var oldZoom = cluster.getCurrentZoom();

if (oldZoom === null) {

continue;

}

var curZoom = map_.getZoom();

if (curZoom !== oldZoom) {

// If the cluster zoom level changed then destroy the cluster

// and collect its markers.

var mks = cluster.getMarkers();

for (var j = 0; j < mks.length; ++j) {

var newMarker = {

'isAdded': false,

'marker': mks[j].marker

};

tmpMarkers.push(newMarker);

}

cluster.clearMarkers();

removed++;

for (j = 0; j < clusters_.length; ++j) {

if (cluster === clusters_[j]) {

clusters_.splice(j, 1);

}

}

}

}

// Add the markers collected into marker cluster to reset

reAddMarkers_(tmpMarkers);

this.redraw_();

};

/**

* Add a set of markers.

*

* @param {Array of GMarker} markers The markers you want to add.

*/

this.addMarkers = function (markers) {

for (var i = 0; i < markers.length; ++i) {

this.addMarker(markers[i], true);

}

this.redraw_();

};

// initialize

if (typeof opt_markers === "object" && opt_markers !== null) {

this.addMarkers(opt_markers);

}

// when map move end, regroup.

mcfn_ = GEvent.addListener(map_, "moveend", function () {

me_.resetViewport();

});

}

/**

* Create a cluster to collect markers.

* A cluster includes some markers which are in a block of area.

* If there are more than one markers in cluster, the cluster

* will create a {@link ClusterMarker_} and show the total number

* of markers in cluster.

*

* @constructor

* @private

* @param {MarkerClusterer} markerClusterer The marker cluster object

*/

function Cluster(markerClusterer) {

var center_ = null;

var markers_ = [];

var markerClusterer_ = markerClusterer;

var map_ = markerClusterer.getMap_();

var clusterMarker_ = null;

var zoom_ = map_.getZoom();

/**

* Get markers of this cluster.

*

* @return {Array of GMarker}

*/

this.getMarkers = function () {

return markers_;

};

/**

* If this cluster intersects certain bounds.

*

* @param {GLatLngBounds} bounds A bounds to test

* @return {Boolean} Is this cluster intersects the bounds

*/

this.isInBounds = function (bounds) {

if (center_ === null) {

return false;

}

if (!bounds) {

bounds = map_.getBounds();

}

var sw = map_.fromLatLngToDivPixel(bounds.getSouthWest());

var ne = map_.fromLatLngToDivPixel(bounds.getNorthEast());

var centerxy = map_.fromLatLngToDivPixel(center_);

var inViewport = true;

var gridSize = markerClusterer.getGridSize_();

if (zoom_ !== map_.getZoom()) {

var dl = map_.getZoom() - zoom_;

gridSize = Math.pow(2, dl) * gridSize;

}

if (ne.x !== sw.x && (centerxy.x + gridSize < sw.x || centerxy.x - gridSize > ne.x)) {

inViewport = false;

}

if (inViewport && (centerxy.y + gridSize < ne.y || centerxy.y - gridSize > sw.y)) {

inViewport = false;

}

return inViewport;

};

/**

* Get cluster center.

*

* @return {GLatLng}

*/

this.getCenter = function () {

return center_;

};

/**

* Add a marker.

*

* @param {Object} marker An object of marker you want to add:

* {Boolean} isAdded If the marker is added on map.

* {GMarker} marker The marker you want to add.

*/

this.addMarker = function (marker) {

if (center_ === null) {

/*var pos = marker['marker'].getLatLng();

pos = map.fromLatLngToContainerPixel(pos);

pos.x = parseInt(pos.x - pos.x % (GRIDWIDTH * 2) + GRIDWIDTH);

pos.y = parseInt(pos.y - pos.y % (GRIDWIDTH * 2) + GRIDWIDTH);

center = map.fromContainerPixelToLatLng(pos);*/

center_ = marker.marker.getLatLng();

}

markers_.push(marker);

};

/**

* Remove a marker from cluster.

*

* @param {GMarker} marker The marker you want to remove.

* @return {Boolean} Whether find the marker to be removed.

*/

this.removeMarker = function (marker) {

for (var i = 0; i < markers_.length; ++i) {

if (marker === markers_[i].marker) {

if (markers_[i].isAdded) {

map_.removeOverlay(markers_[i].marker);

}

markers_.splice(i, 1);

return true;

}

}

return false;

};

/**

* Get current zoom level of this cluster.

* Note: the cluster zoom level and map zoom level not always the same.

*

* @return {Number}

*/

this.getCurrentZoom = function () {

return zoom_;

};

/**

* Redraw a cluster.

* @private

* @param {Boolean} isForce If redraw by force, no matter if the cluster is

* in viewport.

*/

this.redraw_ = function (isForce) {

if (!isForce && !this.isInBounds()) {

return;

}

// Set cluster zoom level.

zoom_ = map_.getZoom();

var i = 0;

var mz = markerClusterer.getMaxZoom_();

if (mz === null) {

mz = map_.getCurrentMapType().getMaximumResolution();

}

if (zoom_ >= mz || this.getTotalMarkers() === 1) {

// If current zoom level is beyond the max zoom level or the cluster

// have only one marker, the marker(s) in cluster will be showed on map.

for (i = 0; i < markers_.length; ++i) {

if (markers_[i].isAdded) {

if (markers_[i].marker.isHidden()) {

markers_[i].marker.show();

}

} else {

map_.addOverlay(markers_[i].marker);

markers_[i].isAdded = true;

}

}

if (clusterMarker_ !== null) {

clusterMarker_.hide();

}

} else {

// Else add a cluster marker on map to show the number of markers in

// this cluster.

for (i = 0; i < markers_.length; ++i) {

if (markers_[i].isAdded && (!markers_[i].marker.isHidden())) {

markers_[i].marker.hide();

}

}

if (clusterMarker_ === null) {

clusterMarker_ = new ClusterMarker_(center_, this.getTotalMarkers(), markerClusterer_.getStyles_(), markerClusterer_.getGridSize_());

map_.addOverlay(clusterMarker_);

} else {

if (clusterMarker_.isHidden()) {

clusterMarker_.show();

}

clusterMarker_.redraw(true);

}

}

};

/**

* Remove all the markers from this cluster.

*/

this.clearMarkers = function () {

if (clusterMarker_ !== null) {

map_.removeOverlay(clusterMarker_);

}

for (var i = 0; i < markers_.length; ++i) {

if (markers_[i].isAdded) {

map_.removeOverlay(markers_[i].marker);

}

}

markers_ = [];

};

/**

* Get number of markers.

* @return {Number}

*/

this.getTotalMarkers = function () {

return markers_.length;

};

}

/**

* ClusterMarker_ creates a marker that shows the number of markers that

* a cluster contains.

*

* @constructor

* @private

* @param {GLatLng} latlng Marker's lat and lng.

* @param {Number} count Number to show.

* @param {Array of Object} styles The image list to be showed:

* {String} url Image url.

* {Number} height Image height.

* {Number} width Image width.

* {Array of Number} anchor Text anchor of image left and top.

* {String} textColor text color.

* @param {Number} padding Padding of marker center.

*/

function ClusterMarker_(latlng, count, styles, padding) {

var index = 0;

var dv = count;

while (dv !== 0) {

dv = parseInt(dv / 10, 10);

index ++;

}

if (styles.length < index) {

index = styles.length;

}

this.url_ = styles[index - 1].url;

this.height_ = styles[index - 1].height;

this.width_ = styles[index - 1].width;

this.textColor_ = styles[index - 1].opt_textColor;

this.anchor_ = styles[index - 1].opt_anchor;

this.latlng_ = latlng;

this.index_ = index;

this.styles_ = styles;

this.text_ = count;

this.padding_ = padding;

}

ClusterMarker_.prototype = new GOverlay();

/**

* Initialize cluster marker.

* @private

*/

ClusterMarker_.prototype.initialize = function (map) {

this.map_ = map;

var div = document.createElement("div");

var latlng = this.latlng_;

var pos = map.fromLatLngToDivPixel(latlng);

pos.x -= parseInt(this.width_ / 2, 10);

pos.y -= parseInt(this.height_ / 2, 10);

var mstyle = "";

if (document.all) {

mstyle = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + this.url_ + '");';

} else {

mstyle = "background:url(" + this.url_ + ");";

}

if (typeof this.anchor_ === "object") {

if (typeof this.anchor_[0] === "number" && this.anchor_[0] > 0 && this.anchor_[0] < this.height_) {

mstyle += 'height:' + (this.height_ - this.anchor_[0]) + 'px;padding-top:' + this.anchor_[0] + 'px;';

} else {

mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';

}

if (typeof this.anchor_[1] === "number" && this.anchor_[1] > 0 && this.anchor_[1] < this.width_) {

mstyle += 'width:' + (this.width_ - this.anchor_[1]) + 'px;padding-left:' + this.anchor_[1] + 'px;';

} else {

mstyle += 'width:' + this.width_ + 'px;text-align:center;';

}

} else {

mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';

mstyle += 'width:' + this.width_ + 'px;text-align:center;';

}

var txtColor = this.textColor_ ? this.textColor_ : 'black';

div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" +

pos.x + "px;color:" + txtColor + ";position:absolute;font-size:11px;" +

'font-family:Arial,sans-serif;font-weight:bold';

div.innerHTML = this.text_;

map.getPane(G_MAP_MAP_PANE).appendChild(div);

var padding = this.padding_;

GEvent.addDomListener(div, "click", function () {

var pos = map.fromLatLngToDivPixel(latlng);

var sw = new GPoint(pos.x - padding, pos.y + padding);

sw = map.fromDivPixelToLatLng(sw);

var ne = new GPoint(pos.x + padding, pos.y - padding);

ne = map.fromDivPixelToLatLng(ne);

var zoom = map.getBoundsZoomLevel(new GLatLngBounds(sw, ne), map.getSize());

map.setCenter(latlng, zoom);

});

this.div_ = div;

};

/**

* Remove this overlay.

* @private

*/

ClusterMarker_.prototype.remove = function () {

this.div_.parentNode.removeChild(this.div_);

};

/**

* Copy this overlay.

* @private

*/

ClusterMarker_.prototype.copy = function () {

return new ClusterMarker_(this.latlng_, this.index_, this.text_, this.styles_, this.padding_);

};

/**

* Redraw this overlay.

* @private

*/

ClusterMarker_.prototype.redraw = function (force) {

if (!force) {

return;

}

var pos = this.map_.fromLatLngToDivPixel(this.latlng_);

pos.x -= parseInt(this.width_ / 2, 10);

pos.y -= parseInt(this.height_ / 2, 10);

this.div_.style.top = pos.y + "px";

this.div_.style.left = pos.x + "px";

};

/**

* Hide this cluster marker.

*/

ClusterMarker_.prototype.hide = function () {

this.div_.style.display = "none";

};

/**

* Show this cluster marker.

*/

ClusterMarker_.prototype.show = function () {

this.div_.style.display = "";

};

/**

* Get whether the cluster marker is hidden.

* @return {Boolean}

*/

ClusterMarker_.prototype.isHidden = function () {

return this.div_.style.display === "none";

};