warwar / leaflet.bouncemarker

A plugin for Leaflet to have a bounce animation when adding a Marker to a map

Bouncemarker plugin for Leaflet

This little plugin for Leaflet will make a Marker bounce when you add it on a map on whenever you want it to.

Watch the demo.

#Version

Things may break in master, so please don't use this in production. There is tags which can be used in production.

Last stable: v1.0

#Usage

Let's consider we have a Leaflet map:

var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map);

##onAdd

Make your marker bounce when you add them to a map.

L.marker([48.85, 2.35], 
  { 
    boolean bounceOnAdd, 
    object bounceOnAddOptions, 
    function bounceOnAddCallback 
  }).addTo(map);

###bounceOnAdd (boolean) (optional)

If true, your marker will bounce when added to the map. Default to false.

###bounceOnAddOptions (object) (optional)

• bounceOnAddDuration (integer) (Default: 1000)

  The duration of the animation in milliseconds.

• bounceOnAddHeight (integer) (Default: top_y)

  The height (in pixel) at which the marker is "dropped". The default is the top point on the y axis of the Marker.

###bounceOnAddCallback (function) (optional)

If you specify the callback parameter, it will be called at the end of the animation.

Example:

L.marker([48.85, 2.35], 
  { 
    bounceOnAdd: true, 
    bounceOnAddOptions: {duration: 500, height: 100}, 
    bounceOnAddCallback: function() {console.log("done");}
  }).addTo(map);

##bounce

Make a marker bounce at anytime you wish.

bounce(object options, function callback);

Example:

marker = new L.Marker([48.85, 2.35], {bounceOnAdd: true}).addTo(map);
marker.on('click', function () {
    marker.bounce({duration: 500, height: 100});
});

###options (object) (optional)

• duration (integer) (Default: 1000)

  The duration of the animation in milliseconds.

• height (integer) (Default: top_y)

  The height (in pixel) at which the marker is "dropped". The default is the top point on the y axis of the Marker.

###callback (function) (optional)

If you specify the callback parameter, it will be called at the end of the animation.

Example:

marker.bounce({duration: 500, height: 100}, function(){console.log("done")});