In the next two sections, you will learn how to animate markers using the Leaflet.BounceMarker
and Leaflet.AnimatedMarker
plugins. Animation adds a wow factor to your map, but if overdone, it can make your map appear amateurish.
The
Leaflet.BounceMarker
plugin does not have a large number of options to customize the markers or their behavior, but it provides a simple animation that is useful when you add markers to the map or on the hover event. You can download and learn more about the plugin at https://github.com/maximeh/leaflet.bouncemarker.
The following steps will show you how to add a bounce marker to your map:
Add a reference to the JavaScript file. There is no CSS file required for this plugin:
<script src="bouncemarker.js"></script>
Creating a bounce marker is exactly the same as creating a standard Leaflet marker; the plugin adds an additional option to the
L.Marker
class. Because of this, the bounce marker has abounceOnAdd...