DragZoom + Marker Manager = Cluster Zoom!

Tuesday, August 14, 2007 at 11:30:00 AM


Check out Richard's first guest blog post here: DragZoomControl 1.1.

Like many developers, my maps often have a great number of markers in a small geographic area, but these areas may be few and far between in the larger area of the full map. Perhaps you are advertising Mercedes dealerships and there are 23 in greater New York, 19 in Chicago and 51 in Palo Alto. If you put all these markers on a US map, you would end up with 3 indecipherable blobs at these locations. One solution is called "clustering", and by using the Marker Manager, you can just put a single marker at each of the three cities. These "cluster markers" serve as proxies for the many underlying markers. Typically an application would allow clicking on one of these cluster markers to zoom you in to that particular location, exposing the underlying markers. But wouldn't it be nice to be able to get back to the original map view in one click?

After working on the DragZoom back button, I thought I should do something similar for my cluster zooms. Then I thought "Why have two special controls and potentially two back buttons on my map?" The end result was by adding a method and one more callback to DragZoomControl, I could utilize the back button functionality for my own custom cluster zoom.

In the example below you will see a map of greater New York. Start by doing a DragZoom encompassing Manhattan (about 1/4 of the map), and a single cluster marker will appear. Click on that marker, and you'll see a close-up of Central Park with several small markers. You can now click on the markers or use DragZoom to zoom in further. At any time, you can click the back button to reverse the zoom sequence. Notice that the back button text changes to indicate whether it's a standard DragZoom or a cluster zoom.

Want to add a DragZoomControl to your map? You can grab the new code from the 1.1/src folder, or wait two weeks for it to be pushed into the release directory. You can also read through a full set of examples or the class reference. As always, you can post in the developer forum with questions or suggestions.