Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A plugin for Leaflet to have a bounce animation when adding a Marker to a map
JavaScript
branch: master

Fixing grammar in README.

latest commit 1fd30ec384
@petrabarus petrabarus authored committed
Failed to load latest commit information.
LICENSE.txt Add LICENSE.txt
README.md Fixing grammar in README.
bouncemarker.js Re-format code

README.md

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")});
Something went wrong with that request. Please try again.