Skip to main content
1 of 6

Animated Cluster Markers (OpenLayers / Leaflet)?

I am looking to utilize openlayers (leaflet due to the smooth transitions which openlayers seems like they cant match). For my purposes I specifically require the ability to cluster markers with custom styled marker groups.

The best example which demonstrates what I am trying to achieve can be found by visiting: http://www.redfin.com/homes-for-sale#!disp_mode=M&market=socal&region_id=16904&region_type=6&v=6

Please notice hovering over a cluster provides for a slick animation and by clicking on a marker the clusters split apart with an animated effect. When reaching a zoom level where individual points don't overlap with a given tolerance the actual markers split out to their locations in an animated fashion.

I really would love to integrate similar effects to these and would appreciate some guidance on the best approach or other examples you might be aware of.

Note: Redfin seems to be using flash which I want to stay away from. In an ideal situation I would like to achieve this though javascript if possible but think it probably needs to be done through html5/canvas,

Any ideas?

BTW - found this but it seems to specifically apply to google maps. http://code.google.com/p/multimarker/source/browse/trunk/cluster/maps-v3/src/cluster.js?r=14

Chris