18

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.

0

5 Answers 5

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

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

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

3

For Leaflet Users.

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

https://github.com/ideak/leafclusterer

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.

0

Your Answer

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

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