3

I want to mark important location with bigger markers (pointer with forks) and smaller location with normal markers (colored dots). I want big markers to bounce on hover. How to achieve this effect in Google Maps or using Leaflet.

Example map

  • This could likely be separated into several different questions, but to get you started, the basic method for controlling the Google Maps API bounce animation is given here: developers.google.com/maps/documentation/javascript/examples/… – phloem Sep 16 '14 at 18:45
  • @phloem :Please help me formulate all questions. I have done all 3 individually but how do I combine them into one proper map is what I can't figure out. – Rishabh Singhal Sep 17 '14 at 9:49
2
+50

If you have done your three tasks individually, I won't get into how to achieve them. To bring them together your best bet will be a map with two different vector layers. Store the small points in the first one and the markers in the second one. Then assign a mouseover event to the second layer with a function to animate it.

Achieving the animation in Google Maps is quite simple for the animation function the API offers as @phloem pointed it out in the comment section.

I don't use Google Maps API, because it's selfish (doesn't support external sources) and not FOSS, therefore I will show how to achieve your goal in Leaflet:

In Leaflet you can use Maxime Hadjinlian's BounceMarker plugin: http://jsfiddle.net/GFarkas/3tac6ckp/.

This plugin tends to be glitchy if you pull your mouse over a marker several times really fast, so it's most suitable if you only use it with an add or click event.

There is a way to regularize the interval the bouncing effect can be called. In this fiddle I have created two Date() variables which won't let the bounce effect happen more often than 501 milliseconds. You can set this interval as high or low as you want, however it is worth setting it somewhat longer than the duration of the bouncing animation, so the users won't notice that they can't bounce a marker in a specified interval, yet the animation can play through, so it won't glitch:

var then = new Date();

for (var i = 0; i < largePoints.features[0].geometry.coordinates.length; i++) {
marker.push(L.marker([largePoints.features[i].geometry.coordinates[1], largePoints.features[i].geometry.coordinates[0]]));
    marker[i].addTo(map);
    marker[i].on('mouseover', function () {
    var now = new Date();
        if (then.getTime()+510 < now.getTime()) {
            this.bounce({duration: 500, height: 100});
            then = new Date();
        }
    })
}
  • Thanks for the answer. I am trying to get a website ready with cartodb and openstreetmaps. I will try this out and if I am stuck somewhere then I will ask that in comments. – Rishabh Singhal Sep 20 '14 at 10:25
  • I am actually using cartodb. Is it possible for you to elaborate on how to achieve this effect on cartodb. Thanks – Rishabh Singhal Sep 24 '14 at 15:04
  • I'm not sure if you can animate markers with the CartoDB API (I couldn't find any reference). You can use Leaflet with CartoDB like in this example: cartodb.github.io/cartodb.js/examples/leaflet.html. You either have to allow the page to "load unsafe script" or just view the source code. – Gabor Farkas Sep 26 '14 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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