Clignotement de Marqueurs avec leaflet.js

Lors d’un travail personnel j’ai eu besoin de faire clignoter des îcones sur une carte généré via leaflet.js. Je détail ci-dessous le morceau de code qui m’a permis de faire cela de façon simple avec css. Ce code à été testé sous Firefox uniquement.

Lorsque la div « map » contient votre carte, appliquez le css ci-dessou :

index.html

1
 <div id="map"></div>

style.css

1
2
3
4
5
6
7
8
#map .leaflet-marker-icon{
    animation: Test 1s infinite;
}
@keyframes Test{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

La class « leaflet-marker-icon » est ajoutée automatiquement aux marqueurs présent sur votre carte.

Laisser un commentaire

Assemblé dans la station orbitale WordPress