Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers. Visit Stack Exchange

Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.

Sign up to join this community

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I want to use Leaflet due to the smooth transitions which Openlayers seems like they can't match. 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 at Redfin .

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 through Javascript if possible but think it probably needs to be done through HTML5/canvas.

Maybe the use of p. - Raphael.js or d3.js

Any ideas?

BTW - found this example but it seems to specifically apply to Google Maps.

Have you looked at the polymaps example which clusters points? The circles here are vectors which can be modified using css. – djq Nov 26, 2011 at 21:19 thanks but I specifically have been looking for any type of solutions (preferably cross-browser supported) which would allow for the animation of markers. I am not sure if you had the opportunity to check out the link example ( redfin.com/… ) from Redfin. That link represents what I am looking to achieve - slick marker animation representations the deeper you click on/into/zoom into the clustered markers/areas. – NetConstructor.com Apr 10, 2012 at 5:55

If you want a clusterer like redfin then check out my Leaflet.markercluster: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

It is fully animated etc etc :)

OpenLayers has also a cluster strategy. All you need to do is to specify as strategy in the vector layer.

The solution is very "simple" for the moment, simply reduces the number of points depending on the zoom level. If you need something more awesome you will need to program it by yourself and your needs. Take a look also to SelectFeature control which can serve you to control when you put the mouse over a feature.

The redfin is really fashion sample. Hope I have some time to make some test with OL :)

I haven't had much time to look into it, but CloudMade (makers of Leaflet) has some Marker Clustering capabilities. How to make them animated and sleek, not sure about that, but it's a start.

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering

I have just implemented a so called AnimatedCluster strategy for OpenLayers. You can see a bit more about it at: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

It is only a firts version but adds a nice animation to the clusters. There are many things to improve but it is a starting point.

Thanks for contributing an answer to Geographic Information Systems Stack Exchange!

• Please be sure to answer the question . Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .