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.

Compatibility

This plugin is compatible with:

• Leaflet 1.x (use the global L object)
• Leaflet 2.x (use ESM imports or the global script)

Version

Things may break in master, so please don't use this in production. Tags should be preferred for used in production.

Last stable: v3.0.0

Documentation

Objects

Marker : object

Functions

bounce(options, endCallback)

Make a marker bounce at anytime you wish.

stopBounce() ⇒ void

Stop the animation and place the marker at its destination.

onAdd(map)

Add a Marker to {map} and optionaly make it bounce.

onRemove(map)

Stop any animation running and remove the Marker from {map}.

Typedefs

bounceOnAddOptions : Object

User defined options

bounceOnAddCallback ⇒ void

Callback run at the end of the whole animation.

Marker : object

Kind: global namespace
Properties

Name	Type	Default	Description
[bounceOnAdd]	boolean	false	bounce when added to the map.
bounceOnAddOptions	bounceOnAddOptions		user defined options
bounceOnAddCallback	bounceOnAddCallback		run at the end of the animation

Example

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

bounce(options, endCallback)

Make a marker bounce at anytime you wish.

Kind: global function

Param	Type	Description
options	bounceOnAddOptions	user defined options
endCallback	bounceOnAddCallback	run at end of animation

Example

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

stopBounce() ⇒ void

Stop the animation and place the marker at its destination.

Kind: global function

onAdd(map)

Add a Marker to {map} and optionaly make it bounce.

Kind: global function

Param	Type	Description
map	Map	Leaflet map to add the marker to

Example

new Marker([48.85, 2.35],
  {
    bounceOnAdd: true,
  }).addTo(map);

onRemove(map)

Stop any animation running and remove the Marker from {map}.

Kind: global function

Param	Type	Description
map	Map	Leaflet map to add the marker to

bounceOnAddOptions : Object

User defined options

Kind: global typedef
Properties

Name	Type	Default	Description
[bounceOnAddOptions.duration]	Number	1000	Animation's duration in ms.
[bounceOnAddOptions.height]	Number	topY	Height (in pixel) from which the marker is "dropped".
[bounceOnAddOptions.loop]	Number	1	Number of times the animation should play. -1 is a special value for infinite loop.

bounceOnAddCallback ⇒ void

Callback run at the end of the whole animation.

Kind: global typedef