How to make markers in Leaflet blinking

Question

Is there a simple way to make a marker in Leaflet map blinking ? I mean animated blinking - something like a loop of transition from opacity 1.0 to opacity 0.5 in 1 second and then reverse, end of loop.

Answer 1

When you add a Marker you are able to specify an Icon - the options for which include a className . You can use this className option to animate the marker's icon via CSS.

 var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); L.marker([51.5, -0.09], { icon: L.icon({ iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking' }) }).addTo(map); 

 #map { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } @keyframes fade { from { opacity: 0.5; } } .blinking { animation: fade 1s infinite alternate; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <div id="map"></div> 

To toggle a marker from blinking to non-blinking, you can use Leaflet's DomUtil to add the blinking class to the marker's img element:

// With the class added, the marker will blink:
L.DomUtil.addClass(marker._icon, "blinking");

// Without the class, it won't:
L.DomUtil.removeClass(marker._icon, "blinking");