19

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.

Improve this question
2
  • 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

5 Answers 5

Reset to default
22
+50

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

Improve this answer
0
6

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

Improve this answer
0
3

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

Improve this answer
3

For Leaflet Users.

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

https://github.com/ideak/leafclusterer

Improve this answer
0
3

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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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