/[drupal]/contributions/modules/geomap/Clusterer2.js
ViewVC logotype

Contents of /contributions/modules/geomap/Clusterer2.js

Parent Directory Parent Directory | Revision Log Revision Log | View Revision Graph Revision Graph


Revision 1.1 - (show annotations) (download) (as text)
Wed Oct 28 14:09:07 2009 UTC (4 weeks, 1 day ago) by thegreenman
Branch: MAIN
CVS Tags: HEAD
File MIME type: text/javascript
Significant updates.
Very School of Everything specific, needs refactoring to clean up
1 // Clusterer.js - marker clustering routines for Google Maps apps
2 //
3 // Using these routines is very easy.
4 //
5 // 1) Load the routines into your code:
6 //
7 // <script src="http://www.acme.com/javascript/Clusterer.js" type="text/javascript"></script>
8 //
9 // 2) Create a Clusterer object, passing it your map object:
10 //
11 // var clusterer = new Clusterer( map );
12 //
13 // 3) Wherever you now do map.addOverlay( marker ), instead call
14 // clusterer.AddMarker( marker, title ). The title is just a
15 // short descriptive string to use in the cluster info-boxes.
16 //
17 // 4) If you are doing any map.removeOverlay( marker ) calls, change those
18 // to clusterer.RemoveMarker( marker ).
19 //
20 // That's it! Everything else happens automatically.
21 //
22 //
23 // The current version of this code is always available at:
24 // http://www.acme.com/javascript/
25 //
26 //
27 // Copyright © 2005,2006 by Jef Poskanzer <jef@mail.acme.com>.
28 // All rights reserved.
29 //
30 // Redistribution and use in source and binary forms, with or without
31 // modification, are permitted provided that the following conditions
32 // are met:
33 // 1. Redistributions of source code must retain the above copyright
34 // notice, this list of conditions and the following disclaimer.
35 // 2. Redistributions in binary form must reproduce the above copyright
36 // notice, this list of conditions and the following disclaimer in the
37 // documentation and/or other materials provided with the distribution.
38 //
39 // THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
40 // ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
41 // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
42 // ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
43 // FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
44 // DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
45 // OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
46 // HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
47 // LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
48 // OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
49 // SUCH DAMAGE.
50 //
51 // For commentary on this license please see http://www.acme.com/license.html
52
53
54 // Constructor.
55 Clusterer = function ( map )
56 {
57 this.map = map;
58 this.markers = [];
59 this.clusters = [];
60 this.timeout = null;
61 this.currentZoomLevel = map.getZoom();
62
63 this.maxVisibleMarkers = Clusterer.defaultMaxVisibleMarkers;
64 this.gridSize = Clusterer.defaultGridSize;
65 this.minMarkersPerCluster = Clusterer.defaultMinMarkersPerCluster;
66 this.maxLinesPerInfoBox = Clusterer.defaultMaxLinesPerInfoBox;
67 this.icon = Clusterer.defaultIcon;
68
69 GEvent.addListener( map, 'zoomend', Clusterer.MakeCaller( Clusterer.Display, this ) );
70 GEvent.addListener( map, 'moveend', Clusterer.MakeCaller( Clusterer.Display, this ) );
71 GEvent.addListener( map, 'infowindowclose', Clusterer.MakeCaller( Clusterer.PopDown, this ) );
72 };
73
74
75 Clusterer.defaultMaxVisibleMarkers = 150;
76 Clusterer.defaultGridSize = 5;
77 Clusterer.defaultMinMarkersPerCluster = 5;
78 Clusterer.defaultMaxLinesPerInfoBox = 10;
79
80 Clusterer.defaultIcon = new GIcon();
81 Clusterer.defaultIcon.image = 'http://www.acme.com/resources/images/markers/blue_large.PNG';
82 Clusterer.defaultIcon.shadow = 'http://www.acme.com/resources/images/markers/shadow_large.PNG';
83 Clusterer.defaultIcon.iconSize = new GSize( 30, 51 );
84 Clusterer.defaultIcon.shadowSize = new GSize( 56, 51 );
85 Clusterer.defaultIcon.iconAnchor = new GPoint( 13, 34 );
86 Clusterer.defaultIcon.infoWindowAnchor = new GPoint( 13, 3 );
87 Clusterer.defaultIcon.infoShadowAnchor = new GPoint( 27, 37 );
88
89
90 // Call this to change the cluster icon.
91 Clusterer.prototype.SetIcon = function ( icon )
92 {
93 this.icon = icon;
94 };
95
96
97 // Changes the maximum number of visible markers before clustering kicks in.
98 Clusterer.prototype.SetMaxVisibleMarkers = function ( n )
99 {
100 this.maxVisibleMarkers = n;
101 };
102
103
104 // Sets the minumum number of markers for a cluster.
105 Clusterer.prototype.SetMinMarkersPerCluster = function ( n )
106 {
107 this.minMarkersPerCluster = n;
108 };
109
110
111 // Sets the maximum number of lines in an info box.
112 Clusterer.prototype.SetMaxLinesPerInfoBox = function ( n )
113 {
114 this.maxLinesPerInfoBox = n;
115 };
116
117
118 // Call this to add a marker.
119 Clusterer.prototype.AddMarker = function ( marker, title )
120 {
121 if ( marker.setMap != null )
122 marker.setMap( this.map );
123
124 marker.title = title;
125 marker.onMap = false;
126 this.markers.push( marker );
127 this.DisplayLater();
128 };
129
130
131 // Call this to remove a marker.
132 Clusterer.prototype.RemoveMarker = function ( marker )
133 {
134 for ( var i = 0; i < this.markers.length; ++i )
135 if ( this.markers[i] == marker )
136 {
137 if ( marker.onMap )
138 this.map.removeOverlay( marker );
139 for ( var j = 0; j < this.clusters.length; ++j )
140 {
141 var cluster = this.clusters[j];
142 if ( cluster != null )
143 {
144 for ( var k = 0; k < cluster.markers.length; ++k )
145 if ( cluster.markers[k] == marker )
146 {
147 cluster.markers[k] = null;
148 --cluster.markerCount;
149 break;
150 }
151 if ( cluster.markerCount == 0 )
152 {
153 this.ClearCluster( cluster );
154 this.clusters[j] = null;
155 }
156 else if ( cluster == this.poppedUpCluster )
157 Clusterer.RePop( this );
158 }
159 }
160 this.markers[i] = null;
161 break;
162 }
163 this.DisplayLater();
164 };
165
166
167 Clusterer.prototype.DisplayLater = function ()
168 {
169 if ( this.timeout != null )
170 clearTimeout( this.timeout );
171 this.timeout = setTimeout( Clusterer.MakeCaller( Clusterer.Display, this ), 50 );
172 };
173
174
175 Clusterer.Display = function ( clusterer )
176 {
177 var i, j, marker, cluster;
178
179 clearTimeout( clusterer.timeout );
180
181 var newZoomLevel = clusterer.map.getZoom();
182 if ( newZoomLevel != clusterer.currentZoomLevel )
183 {
184 // When the zoom level changes, we have to remove all the clusters.
185 for ( i = 0; i < clusterer.clusters.length; ++i )
186 if ( clusterer.clusters[i] != null )
187 {
188 clusterer.ClearCluster( clusterer.clusters[i] );
189 clusterer.clusters[i] = null;
190 }
191 clusterer.clusters.length = 0;
192 clusterer.currentZoomLevel = newZoomLevel;
193 }
194
195 // Get the current bounds of the visible area.
196 var bounds = clusterer.map.getBounds();
197
198 // Expand the bounds a little, so things look smoother when scrolling
199 // by small amounts.
200 var sw = bounds.getSouthWest();
201 var ne = bounds.getNorthEast();
202 var dx = ne.lng() - sw.lng();
203 var dy = ne.lat() - sw.lat();
204 if ( dx < 300 && dy < 150 )
205 {
206 dx *= 0.10;
207 dy *= 0.10;
208 bounds = new GLatLngBounds(
209 new GLatLng( sw.lat() - dy, sw.lng() - dx ),
210 new GLatLng( ne.lat() + dy, ne.lng() + dx ) );
211 }
212
213 // Partition the markers into visible and non-visible lists.
214 var visibleMarkers = [];
215 var nonvisibleMarkers = [];
216 for ( i = 0; i < clusterer.markers.length; ++i )
217 {
218 marker = clusterer.markers[i];
219 if ( marker != null )
220 if ( bounds.contains( marker.getPoint() ) )
221 visibleMarkers.push( marker );
222 else
223 nonvisibleMarkers.push( marker );
224 }
225
226 // Take down the non-visible markers.
227 for ( i = 0; i < nonvisibleMarkers.length; ++i )
228 {
229 marker = nonvisibleMarkers[i];
230 if ( marker.onMap )
231 {
232 clusterer.map.removeOverlay( marker );
233 marker.onMap = false;
234 }
235 }
236
237 // Take down the non-visible clusters.
238 for ( i = 0; i < clusterer.clusters.length; ++i )
239 {
240 cluster = clusterer.clusters[i];
241 if ( cluster != null && ! bounds.contains( cluster.marker.getPoint() ) && cluster.onMap )
242 {
243 clusterer.map.removeOverlay( cluster.marker );
244 cluster.onMap = false;
245 }
246 }
247
248 // Clustering! This is some complicated stuff. We have three goals
249 // here. One, limit the number of markers & clusters displayed, so the
250 // maps code doesn't slow to a crawl. Two, when possible keep existing
251 // clusters instead of replacing them with new ones, so that the app pans
252 // better. And three, of course, be CPU and memory efficient.
253 if ( visibleMarkers.length > clusterer.maxVisibleMarkers )
254 {
255 // Add to the list of clusters by splitting up the current bounds
256 // into a grid.
257 var latRange = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
258 var latInc = latRange / clusterer.gridSize;
259 var lngInc = latInc / Math.cos( ( bounds.getNorthEast().lat() + bounds.getSouthWest().lat() ) / 2.0 * Math.PI / 180.0 );
260 for ( var lat = bounds.getSouthWest().lat(); lat <= bounds.getNorthEast().lat(); lat += latInc )
261 for ( var lng = bounds.getSouthWest().lng(); lng <= bounds.getNorthEast().lng(); lng += lngInc )
262 {
263 cluster = new Object();
264 cluster.clusterer = clusterer;
265 cluster.bounds = new GLatLngBounds( new GLatLng( lat, lng ), new GLatLng( lat + latInc, lng + lngInc ) );
266 cluster.markers = [];
267 cluster.markerCount = 0;
268 cluster.onMap = false;
269 cluster.marker = null;
270 clusterer.clusters.push( cluster );
271 }
272
273 // Put all the unclustered visible markers into a cluster - the first
274 // one it fits in, which favors pre-existing clusters.
275 for ( i = 0; i < visibleMarkers.length; ++i )
276 {
277 marker = visibleMarkers[i];
278 if ( marker != null && ! marker.inCluster )
279 {
280 for ( j = 0; j < clusterer.clusters.length; ++j )
281 {
282 cluster = clusterer.clusters[j];
283 if ( cluster != null && cluster.bounds.contains( marker.getPoint() ) )
284 {
285 cluster.markers.push( marker );
286 ++cluster.markerCount;
287 marker.inCluster = true;
288 }
289 }
290 }
291 }
292
293 // Get rid of any clusters containing only a few markers.
294 for ( i = 0; i < clusterer.clusters.length; ++i )
295 if ( clusterer.clusters[i] != null && clusterer.clusters[i].markerCount < clusterer.minMarkersPerCluster )
296 {
297 clusterer.ClearCluster( clusterer.clusters[i] );
298 clusterer.clusters[i] = null;
299 }
300
301 // Shrink the clusters list.
302 for ( i = clusterer.clusters.length - 1; i >= 0; --i )
303 if ( clusterer.clusters[i] != null )
304 break;
305 else
306 --clusterer.clusters.length;
307
308 // Ok, we have our clusters. Go through the markers in each
309 // cluster and remove them from the map if they are currently up.
310 for ( i = 0; i < clusterer.clusters.length; ++i )
311 {
312 cluster = clusterer.clusters[i];
313 if ( cluster != null )
314 {
315 for ( j = 0; j < cluster.markers.length; ++j )
316 {
317 marker = cluster.markers[j];
318 if ( marker != null && marker.onMap )
319 {
320 clusterer.map.removeOverlay( marker );
321 marker.onMap = false;
322 }
323 }
324 }
325 }
326
327 // Now make cluster-markers for any clusters that need one.
328 for ( i = 0; i < clusterer.clusters.length; ++i )
329 {
330 cluster = clusterer.clusters[i];
331 if ( cluster != null && cluster.marker == null )
332 {
333 // Figure out the average coordinates of the markers in this
334 // cluster.
335 var xTotal = 0.0, yTotal = 0.0;
336 for ( j = 0; j < cluster.markers.length; ++j )
337 {
338 marker = cluster.markers[j];
339 if ( marker != null )
340 {
341 xTotal += ( + marker.getPoint().lng() );
342 yTotal += ( + marker.getPoint().lat() );
343 }
344 }
345 var location = new GLatLng( yTotal / cluster.markerCount, xTotal / cluster.markerCount );
346 marker = new GMarker( location, { icon: clusterer.icon } );
347 cluster.marker = marker;
348 GEvent.addListener( marker, 'click', Clusterer.MakeCaller( Clusterer.PopUp, cluster ) );
349 }
350 }
351 }
352
353 // Display the visible markers not already up and not in clusters.
354 for ( i = 0; i < visibleMarkers.length; ++i )
355 {
356 marker = visibleMarkers[i];
357 if ( marker != null && ! marker.onMap && ! marker.inCluster )
358 {
359 clusterer.map.addOverlay( marker );
360 if ( marker.addedToMap != null )
361 marker.addedToMap();
362 marker.onMap = true;
363 }
364 }
365
366 // Display the visible clusters not already up.
367 for ( i = 0; i < clusterer.clusters.length; ++i )
368 {
369 cluster = clusterer.clusters[i];
370 if ( cluster != null && ! cluster.onMap && bounds.contains( cluster.marker.getPoint() ) )
371 {
372 clusterer.map.addOverlay( cluster.marker );
373 cluster.onMap = true;
374 }
375 }
376
377 // In case a cluster is currently popped-up, re-pop to get any new
378 // markers into the infobox.
379 Clusterer.RePop( clusterer );
380 };
381
382
383 Clusterer.PopUp = function ( cluster )
384 {
385 var clusterer = cluster.clusterer;
386 var html = '<table width="300">';
387 var n = 0;
388 for ( var i = 0; i < cluster.markers.length; ++i )
389 {
390 var marker = cluster.markers[i];
391 if ( marker != null )
392 {
393 ++n;
394 html += '<tr><td>';
395 if ( marker.getIcon().smallImage != null )
396 html += '<img src="' + marker.getIcon().smallImage + '">';
397 else
398 html += '<img src="' + marker.getIcon().image + '" width="' + ( marker.getIcon().iconSize.width / 2 ) + '" height="' + ( marker.getIcon().iconSize.height / 2 ) + '">';
399 html += '</td><td>' + marker.title + '</td></tr>';
400 if ( n == clusterer.maxLinesPerInfoBox - 1 && cluster.markerCount > clusterer.maxLinesPerInfoBox )
401 {
402 html += '<tr><td colspan="2">...and ' + ( cluster.markerCount - n ) + ' more</td></tr>';
403 break;
404 }
405 }
406 }
407 html += '</table>';
408 clusterer.map.closeInfoWindow();
409 cluster.marker.openInfoWindowHtml( html );
410 clusterer.poppedUpCluster = cluster;
411 };
412
413
414 Clusterer.RePop = function ( clusterer )
415 {
416 if ( clusterer.poppedUpCluster != null )
417 Clusterer.PopUp( clusterer.poppedUpCluster );
418 };
419
420
421 Clusterer.PopDown = function ( clusterer )
422 {
423 clusterer.poppedUpCluster = null;
424 };
425
426
427 Clusterer.prototype.ClearCluster = function ( cluster )
428 {
429 var i, marker;
430
431 for ( i = 0; i < cluster.markers.length; ++i )
432 if ( cluster.markers[i] != null )
433 {
434 cluster.markers[i].inCluster = false;
435 cluster.markers[i] = null;
436 }
437 cluster.markers.length = 0;
438 cluster.markerCount = 0;
439 if ( cluster == this.poppedUpCluster )
440 this.map.closeInfoWindow();
441 if ( cluster.onMap )
442 {
443 this.map.removeOverlay( cluster.marker );
444 cluster.onMap = false;
445 }
446 };
447
448
449 // This returns a function closure that calls the given routine with the
450 // specified arg.
451 Clusterer.MakeCaller = function ( func, arg )
452 {
453 return function () { func( arg ); };
454 };
455
456
457 // Augment GMarker so it handles markers that have been created but
458 // not yet addOverlayed.
459
460 GMarker.prototype.setMap = function ( map )
461 {
462 this.map = map;
463 };
464
465 GMarker.prototype.addedToMap = function ()
466 {
467 this.map = null;
468 };
469
470 GMarker.prototype.origOpenInfoWindow = GMarker.prototype.openInfoWindow;
471 GMarker.prototype.openInfoWindow = function ( node, opts )
472 {
473 if ( this.map != null )
474 return this.map.openInfoWindow( this.getPoint(), node, opts );
475 else
476 return this.origOpenInfoWindow( node, opts );
477 };
478
479 GMarker.prototype.origOpenInfoWindowHtml = GMarker.prototype.openInfoWindowHtml;
480 GMarker.prototype.openInfoWindowHtml = function ( html, opts )
481 {
482 if ( this.map != null )
483 return this.map.openInfoWindowHtml( this.getPoint(), html, opts );
484 else
485 return this.origOpenInfoWindowHtml( html, opts );
486 };
487
488 GMarker.prototype.origOpenInfoWindowTabs = GMarker.prototype.openInfoWindowTabs;
489 GMarker.prototype.openInfoWindowTabs = function ( tabNodes, opts )
490 {
491 if ( this.map != null )
492 return this.map.openInfoWindowTabs( this.getPoint(), tabNodes, opts );
493 else
494 return this.origOpenInfoWindowTabs( tabNodes, opts );
495 };
496
497 GMarker.prototype.origOpenInfoWindowTabsHtml = GMarker.prototype.openInfoWindowTabsHtml;
498 GMarker.prototype.openInfoWindowTabsHtml = function ( tabHtmls, opts )
499 {
500 if ( this.map != null )
501 return this.map.openInfoWindowTabsHtml( this.getPoint(), tabHtmls, opts );
502 else
503 return this.origOpenInfoWindowTabsHtml( tabHtmls, opts );
504 };
505
506 GMarker.prototype.origShowMapBlowup = GMarker.prototype.showMapBlowup;
507 GMarker.prototype.showMapBlowup = function ( opts )
508 {
509 if ( this.map != null )
510 return this.map.showMapBlowup( this.getPoint(), opts );
511 else
512 return this.origShowMapBlowup( opts );
513 };

  ViewVC Help
Powered by ViewVC 1.1.2