Adding marker Bounce and Drop effect to markers on map box

Question

I am new to map box api, and have been using google maps api earlier. Anyways, my issue is that I need to give the marker on mapbox, a drop animation when the marker appears on the map and once the user starts to drag the marker, I need to give it a bounce animation until the drag ends. I have gone through the api docs but couldn't find anything relevant. I have also tried bouncemarker.js to give these markers bounce effect, but unfortunately it doesn't fulfill my requirement as the bounce effect is not smooth enough to look good. So, any help or suggestions in this regard would be appreciated.

My code so far looks like this,

    L.mapbox.accessToken = '[access token]';
    map = L.mapbox.map('googleMap', 
                   'map_id', { 
                        center: [-8.461, 115.159],
                        zoom: 9
                    });
    marker = L.marker(latLongObj, {
        icon: L.icon({ iconUrl: marker_image }),
        draggable: true
    });
    marker.addTo(map);


    marker.on('dragstart', function(e) {
        console.log('Drag Start!');
    });

    marker.on('dragend', function(e) {
        console.log('Drag End!');
    });

Thanks

score 0 · Answer 1 · answered May 19 '15 at 16:29

You can use setIcon on L.marker to dynamically switch a Marker's icon on cue of whatever events you want. So I would assume you two icons, probably var bouncingIcon = xxxxx and var nonBouncingIcon = xxxx, and then set as needed - myMarker.setIcon(nonBouncingIcon).

Adding marker Bounce and Drop effect to markers on map box

1 Answers1