BounceMarker 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.

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.

Documentation

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.

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

// Leaflet 2.x with ESM
import { Marker } from 'leaflet';
const marker = new Marker([48.85, 2.35], {bounceOnAdd: true}).addTo(map);
marker.on('click', function () {
    marker.bounce({duration: 500, height: 100});
});

// Leaflet 2.x with global script or Leaflet 1.x
const marker = new L.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	L.Map	Leaflet map to add the marker to

Example

// Leaflet 2.x with ESM
import { Marker } from 'leaflet';
new Marker([48.85, 2.35],
  {
    bounceOnAdd: true,
  }).addTo(map);

// Leaflet 2.x with global script or Leaflet 1.x
new L.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	L.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

Usage

Leaflet 2.x with ESM modules

<script type="importmap">
    {
        "imports": {
            "leaflet": "https://unpkg.com/[email protected]/dist/leaflet.js"
        }
    }
</script>
<script type="module">
    import { Map, TileLayer, Marker } from 'leaflet';
    import 'path/to/bouncemarker.js';

    const map = new Map('map').setView([48.85, 2.35], 13);
    const marker = new Marker([48.85, 2.35], {
        bounceOnAdd: true,
        bounceOnAddOptions: {duration: 500, height: 100}
    }).addTo(map);
</script>

Leaflet 2.x with global script or Leaflet 1.x

<!-- For Leaflet 2.x -->
<script src="https://unpkg.com/[email protected]/dist/leaflet-global.js"></script>
<!-- For Leaflet 1.x -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<script src="path/to/bouncemarker.js"></script>
<script>
    const map = new L.Map('map').setView([48.85, 2.35], 13);
    const marker = new L.Marker([48.85, 2.35], {
        bounceOnAdd: true,
        bounceOnAddOptions: {duration: 500, height: 100}
    }).addTo(map);
</script>