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.
Things may break in master, so please don't use this in production. Tags should be preferred for used in production.
Last stable: v1.2.3
- 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}.
- bounceOnAddOptions :
Object User defined options
- bounceOnAddCallback ⇒
void Callback run at the end of the whole animation.
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 L.Marker([48.85, 2.35], {bounceOnAdd: true}).addTo(map);
marker.on('click', function () {
marker.bounce({duration: 500, height: 100});
});Stop the animation and place the marker at its destination.
Add a Marker to {map} and optionaly make it bounce.
Kind: global function
| Param | Type | Description |
|---|---|---|
| map | L.Map |
Leaflet map to add the marker to |
Example
L.marker([48.85, 2.35],
{
bounceOnAdd: true,
}).addTo(map);Stop any animation running and remove the Marker from {map}.
Kind: global function
| Param | Type | Description |
|---|---|---|
| map | L.Map |
Leaflet map to add the marker to |
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. |
Callback run at the end of the whole animation.
Kind: global typedef