1 // Clusterer.js - marker clustering routines for Google Maps apps
3 // The original version of this code is available at:
4 // http://www.acme.com/javascript/
6 // Copyright © 2005,2006 by Jef Poskanzer <jef@mail.acme.com>.
7 // All rights reserved.
9 // Modified for inclusion into the YM4R library in accordance with the
12 // Redistribution and use in source and binary forms, with or without
13 // modification, are permitted provided that the following conditions
15 // 1. Redistributions of source code must retain the above copyright
16 // notice, this list of conditions and the following disclaimer.
17 // 2. Redistributions in binary form must reproduce the above copyright
18 // notice, this list of conditions and the following disclaimer in the
19 // documentation and/or other materials provided with the distribution.
21 // THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
22 // ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
23 // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
24 // ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
25 // FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
26 // DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
27 // OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
28 // HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
29 // LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
30 // OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
33 // For commentary on this license please see http://www.acme.com/license.html
37 Clusterer = function(markers,icon,maxVisibleMarkers,gridSize,minMarkersPerCluster,maxLinesPerInfoBox) {
40 for(var i =0 ; i< markers.length ; i++){
41 this.addMarker(markers[i]);
47 this.maxVisibleMarkers = maxVisibleMarkers || 150;
48 this.gridSize = gridSize || 5;
49 this.minMarkersPerCluster = minMarkersPerCluster || 5;
50 this.maxLinesPerInfoBox = maxLinesPerInfoBox || 10;
52 this.icon = icon || G_DEFAULT_ICON;
55 Clusterer.prototype = new GOverlay();
57 Clusterer.prototype.initialize = function ( map ){
59 this.currentZoomLevel = map.getZoom();
61 GEvent.addListener( map, 'zoomend', Clusterer.makeCaller( Clusterer.display, this ) );
62 GEvent.addListener( map, 'moveend', Clusterer.makeCaller( Clusterer.display, this ) );
63 GEvent.addListener( map, 'infowindowclose', Clusterer.makeCaller( Clusterer.popDown, this ) );
64 //Set map for each marker
65 for(var i = 0,len = this.markers.length ; i < len ; i++){
66 this.markers[i].setMap( map );
71 Clusterer.prototype.remove = function(){
72 for ( var i = 0; i < this.markers.length; ++i ){
73 this.removeMarker(this.markers[i]);
77 Clusterer.prototype.copy = function(){
78 return new Clusterer(this.markers,this.icon,this.maxVisibleMarkers,this.gridSize,this.minMarkersPerCluster,this.maxLinesPerInfoBox);
81 Clusterer.prototype.redraw = function(force){
85 // Call this to change the cluster icon.
86 Clusterer.prototype.setIcon = function ( icon ){
90 // Call this to add a marker.
91 Clusterer.prototype.addMarker = function ( marker, description){
93 this.markers.push( marker );
94 marker.description = marker.description || description;
96 marker.setMap(this.map);
102 // Call this to remove a marker.
103 Clusterer.prototype.removeMarker = function ( marker ){
104 for ( var i = 0; i < this.markers.length; ++i )
105 if ( this.markers[i] == marker ){
107 this.map.removeOverlay( marker );
108 for ( var j = 0; j < this.clusters.length; ++j ){
109 var cluster = this.clusters[j];
110 if ( cluster != null ){
111 for ( var k = 0; k < cluster.markers.length; ++k )
112 if ( cluster.markers[k] == marker ){
113 cluster.markers[k] = null;
114 --cluster.markerCount;
117 if ( cluster.markerCount == 0 ){
118 this.clearCluster( cluster );
119 this.clusters[j] = null;
121 else if ( cluster == this.poppedUpCluster )
122 Clusterer.rePop( this );
125 this.markers[i] = null;
131 Clusterer.prototype.displayLater = function (){
132 if ( this.timeout != null )
133 clearTimeout( this.timeout );
134 this.timeout = setTimeout( Clusterer.makeCaller( Clusterer.display, this ), 50 );
137 Clusterer.display = function ( clusterer ){
138 var i, j, marker, cluster, len, len2;
140 clearTimeout( clusterer.timeout );
142 var newZoomLevel = clusterer.map.getZoom();
143 if ( newZoomLevel != clusterer.currentZoomLevel ){
144 // When the zoom level changes, we have to remove all the clusters.
145 for ( i = 0 , len = clusterer.clusters.length; i < len; ++i ){
146 if ( clusterer.clusters[i] != null ){
147 clusterer.clearCluster( clusterer.clusters[i] );
148 clusterer.clusters[i] = null;
151 clusterer.clusters.length = 0;
152 clusterer.currentZoomLevel = newZoomLevel;
155 // Get the current bounds of the visible area.
156 var bounds = clusterer.map.getBounds();
158 // Expand the bounds a little, so things look smoother when scrolling
160 var sw = bounds.getSouthWest();
161 var ne = bounds.getNorthEast();
162 var dx = ne.lng() - sw.lng();
163 var dy = ne.lat() - sw.lat();
166 bounds = new GLatLngBounds(
167 new GLatLng( sw.lat() - dy, sw.lng() - dx ),
168 new GLatLng( ne.lat() + dy, ne.lng() + dx )
171 // Partition the markers into visible and non-visible lists.
172 var visibleMarkers = [];
173 var nonvisibleMarkers = [];
174 for ( i = 0, len = clusterer.markers.length ; i < len; ++i ){
175 marker = clusterer.markers[i];
176 if ( marker != null )
177 if ( bounds.contains( marker.getPoint() ) )
178 visibleMarkers.push( marker );
180 nonvisibleMarkers.push( marker );
183 // Take down the non-visible markers.
184 for ( i = 0, len = nonvisibleMarkers.length ; i < len; ++i ){
185 marker = nonvisibleMarkers[i];
187 clusterer.map.removeOverlay( marker );
188 marker.onMap = false;
192 // Take down the non-visible clusters.
193 for ( i = 0, len = clusterer.clusters.length ; i < len ; ++i ){
194 cluster = clusterer.clusters[i];
195 if ( cluster != null && ! bounds.contains( cluster.marker.getPoint() ) && cluster.onMap ){
196 clusterer.map.removeOverlay( cluster.marker );
197 cluster.onMap = false;
201 // Clustering! This is some complicated stuff. We have three goals
202 // here. One, limit the number of markers & clusters displayed, so the
203 // maps code doesn't slow to a crawl. Two, when possible keep existing
204 // clusters instead of replacing them with new ones, so that the app pans
205 // better. And three, of course, be CPU and memory efficient.
206 if ( visibleMarkers.length > clusterer.maxVisibleMarkers ){
207 // Add to the list of clusters by splitting up the current bounds
209 var latRange = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
210 var latInc = latRange / clusterer.gridSize;
211 var lngInc = latInc / Math.cos( ( bounds.getNorthEast().lat() + bounds.getSouthWest().lat() ) / 2.0 * Math.PI / 180.0 );
212 for ( var lat = bounds.getSouthWest().lat(); lat <= bounds.getNorthEast().lat(); lat += latInc )
213 for ( var lng = bounds.getSouthWest().lng(); lng <= bounds.getNorthEast().lng(); lng += lngInc ){
214 cluster = new Object();
215 cluster.clusterer = clusterer;
216 cluster.bounds = new GLatLngBounds( new GLatLng( lat, lng ), new GLatLng( lat + latInc, lng + lngInc ) );
217 cluster.markers = [];
218 cluster.markerCount = 0;
219 cluster.onMap = false;
220 cluster.marker = null;
221 clusterer.clusters.push( cluster );
224 // Put all the unclustered visible markers into a cluster - the first
225 // one it fits in, which favors pre-existing clusters.
226 for ( i = 0, len = visibleMarkers.length ; i < len; ++i ){
227 marker = visibleMarkers[i];
228 if ( marker != null && ! marker.inCluster ){
229 for ( j = 0, len2 = clusterer.clusters.length ; j < len2 ; ++j ){
230 cluster = clusterer.clusters[j];
231 if ( cluster != null && cluster.bounds.contains( marker.getPoint() ) ){
232 cluster.markers.push( marker );
233 ++cluster.markerCount;
234 marker.inCluster = true;
240 // Get rid of any clusters containing only a few markers.
241 for ( i = 0, len = clusterer.clusters.length ; i < len ; ++i )
242 if ( clusterer.clusters[i] != null && clusterer.clusters[i].markerCount < clusterer.minMarkersPerCluster ){
243 clusterer.clearCluster( clusterer.clusters[i] );
244 clusterer.clusters[i] = null;
247 // Shrink the clusters list.
248 for ( i = clusterer.clusters.length - 1; i >= 0; --i )
249 if ( clusterer.clusters[i] != null )
252 --clusterer.clusters.length;
254 // Ok, we have our clusters. Go through the markers in each
255 // cluster and remove them from the map if they are currently up.
256 for ( i = 0, len = clusterer.clusters.length ; i < len; ++i ){
257 cluster = clusterer.clusters[i];
258 if ( cluster != null ){
259 for ( j = 0 , len2 = cluster.markers.length ; j < len2; ++j ){
260 marker = cluster.markers[j];
261 if ( marker != null && marker.onMap ){
262 clusterer.map.removeOverlay( marker );
263 marker.onMap = false;
269 // Now make cluster-markers for any clusters that need one.
270 for ( i = 0, len = clusterer.clusters.length; i < len; ++i ){
271 cluster = clusterer.clusters[i];
272 if ( cluster != null && cluster.marker == null ){
273 // Figure out the average coordinates of the markers in this
275 var xTotal = 0.0, yTotal = 0.0;
276 for ( j = 0, len2 = cluster.markers.length; j < len2 ; ++j ){
277 marker = cluster.markers[j];
278 if ( marker != null ){
279 xTotal += ( + marker.getPoint().lng() );
280 yTotal += ( + marker.getPoint().lat() );
283 var location = new GLatLng( yTotal / cluster.markerCount, xTotal / cluster.markerCount );
284 marker = new GMarker( location, { icon: clusterer.icon } );
285 cluster.marker = marker;
286 GEvent.addListener( marker, 'click', Clusterer.makeCaller( Clusterer.popUp, cluster ) );
291 // Display the visible markers not already up and not in clusters.
292 for ( i = 0, len = visibleMarkers.length; i < len; ++i ){
293 marker = visibleMarkers[i];
294 if ( marker != null && ! marker.onMap && ! marker.inCluster )
296 clusterer.map.addOverlay( marker );
302 // Display the visible clusters not already up.
303 for ( i = 0, len = clusterer.clusters.length ; i < len; ++i ){
304 cluster = clusterer.clusters[i];
305 if ( cluster != null && ! cluster.onMap && bounds.contains( cluster.marker.getPoint() )){
306 clusterer.map.addOverlay( cluster.marker );
307 cluster.onMap = true;
311 // In case a cluster is currently popped-up, re-pop to get any new
312 // markers into the infobox.
313 Clusterer.rePop( clusterer );
317 Clusterer.popUp = function ( cluster ){
318 var clusterer = cluster.clusterer;
319 var html = '<table width="300">';
321 for ( var i = 0 , len = cluster.markers.length; i < len; ++i )
323 var marker = cluster.markers[i];
324 if ( marker != null )
328 if ( marker.getIcon().smallImage != null )
329 html += '<img src="' + marker.getIcon().smallImage + '">';
331 html += '<img src="' + marker.getIcon().image + '" width="' + ( marker.getIcon().iconSize.width / 2 ) + '" height="' + ( marker.getIcon().iconSize.height / 2 ) + '">';
332 html += '</td><td>' + marker.description + '</td></tr>';
333 if ( n == clusterer.maxLinesPerInfoBox - 1 && cluster.markerCount > clusterer.maxLinesPerInfoBox )
335 html += '<tr><td colspan="2">...and ' + ( cluster.markerCount - n ) + ' more</td></tr>';
341 clusterer.map.closeInfoWindow();
342 cluster.marker.openInfoWindowHtml( html );
343 clusterer.poppedUpCluster = cluster;
346 Clusterer.rePop = function ( clusterer ){
347 if ( clusterer.poppedUpCluster != null )
348 Clusterer.popUp( clusterer.poppedUpCluster );
351 Clusterer.popDown = function ( clusterer ){
352 clusterer.poppedUpCluster = null;
355 Clusterer.prototype.clearCluster = function ( cluster ){
358 for ( i = 0; i < cluster.markers.length; ++i ){
359 if ( cluster.markers[i] != null ){
360 cluster.markers[i].inCluster = false;
361 cluster.markers[i] = null;
365 cluster.markers.length = 0;
366 cluster.markerCount = 0;
368 if ( cluster == this.poppedUpCluster )
369 this.map.closeInfoWindow();
373 this.map.removeOverlay( cluster.marker );
374 cluster.onMap = false;
378 // This returns a function closure that calls the given routine with the
380 Clusterer.makeCaller = function ( func, arg ){
381 return function () { func( arg ); };
385 // Augment GMarker so it handles markers that have been created but
386 // not yet addOverlayed.
387 GMarker.prototype.setMap = function ( map ){
391 GMarker.prototype.getMap = function (){
395 GMarker.prototype.addedToMap = function (){
400 GMarker.prototype.origOpenInfoWindow = GMarker.prototype.openInfoWindow;
401 GMarker.prototype.openInfoWindow = function ( node, opts ){
402 if ( this.map != null )
403 return this.map.openInfoWindow( this.getPoint(), node, opts );
405 return this.origOpenInfoWindow( node, opts );
408 GMarker.prototype.origOpenInfoWindowHtml = GMarker.prototype.openInfoWindowHtml;
409 GMarker.prototype.openInfoWindowHtml = function ( html, opts ){
410 if ( this.map != null )
411 return this.map.openInfoWindowHtml( this.getPoint(), html, opts );
413 return this.origOpenInfoWindowHtml( html, opts );
416 GMarker.prototype.origOpenInfoWindowTabs = GMarker.prototype.openInfoWindowTabs;
417 GMarker.prototype.openInfoWindowTabs = function ( tabNodes, opts ){
418 if ( this.map != null )
419 return this.map.openInfoWindowTabs( this.getPoint(), tabNodes, opts );
421 return this.origOpenInfoWindowTabs( tabNodes, opts );
424 GMarker.prototype.origOpenInfoWindowTabsHtml = GMarker.prototype.openInfoWindowTabsHtml;
425 GMarker.prototype.openInfoWindowTabsHtml = function ( tabHtmls, opts ){
426 if ( this.map != null )
427 return this.map.openInfoWindowTabsHtml( this.getPoint(), tabHtmls, opts );
429 return this.origOpenInfoWindowTabsHtml( tabHtmls, opts );
432 GMarker.prototype.origShowMapBlowup = GMarker.prototype.showMapBlowup;
433 GMarker.prototype.showMapBlowup = function ( opts ){
434 if ( this.map != null )
435 return this.map.showMapBlowup( this.getPoint(), opts );
437 return this.origShowMapBlowup( opts );
441 function addDescriptionToMarker(marker, description){
442 marker.description = description;