Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
    
I don't think Redfin are using flash. It looks like it is all javascript using the dojo toolkit (dojotoolkit.org ). I didn't spot any other mapping libraries though - they could be using them also. –  djq Nov 26 '11 at 22:49
add comment

8 Answers 8

up vote 17 down vote accepted
+50

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

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

It is fully animated etc etc :)

share|improve this answer
3  
Yup - the best and let me be the first to welcome you Dave and let me boost up your points for your help. –  NetConstructor.com Jul 27 '12 at 13:29
1  
Pretty awesome! +1 –  unicoletti Jul 27 '12 at 14:02
add comment

Have you looked at the polymaps example which clusters points?

The circles here are vectors which can be modified using css.

share|improve this answer
    
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 '12 at 5:55
add comment

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

share|improve this answer
add comment

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 :)

share|improve this answer
    
I would like to use OpenLayers but I need the smooth transitions like those found in leaflet. Are you aware of any openlayers hack which replicates these slick zoom animations? –  NetConstructor.com Jan 9 '12 at 3:25
    
Sorry but no. Right now I'm doing some testing styling a bit the "dots" adding some color and count number in the circle. But adding animation is far away for the moment. –  EricSonaron Jan 9 '12 at 18:06
    
Did you ever find a solution to this with the new ol3 capabilities? –  NetConstructor.com Jul 1 '12 at 1:01
add comment

For Leaflet Users.

Here's a port of the Google Maps MarkerClusterer for Leaflet

https://github.com/ideak/leafclusterer

share|improve this answer
    
Yeah, i have that bookmarked but I still require the animation part –  NetConstructor.com Apr 9 '12 at 2:30
add comment

I'm currently developing a Leaflet clustering layer - https://github.com/cavis/leafpile

It doesn't do anything really fancy yet, but I am planning on adding things like customizable marker images and zoom-transition strategies. Feel free to add enhancement requests to the issue tracker.

share|improve this answer
add comment

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

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.

share|improve this answer
    
great job with this! –  NetConstructor.com Aug 23 '12 at 13:42
add comment

here I used leaflet plug-in called Leaflet.markercluster, it looks good http://bit.ly/11zHM8L

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.