Pulsating Leaflet marker using CSS3 animations

Question

I want to create a custom pulsating map marker icon on a Leaflet map. For learning purposes I don\'t want to use third party plugins.

I am using the following CSS code f

Answer 1

Your original approach didn't work because you used transform (which Leaflet also uses to place it's markers).

Example of a Leaflet placement which is overwritten:

transform: translate3d(499px, 604px, 0px);

Answer 2

After investigating for some more time I found a way to solve the problem:

I changed the CSS code slighlty:

.css-icon {

}

.gps_ring { 
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

@-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

And I changed the instantiation of my DivIcon class:

// Define an icon called cssIcon
var cssIcon = L.divIcon({
  // Specify a class name we can refer to in CSS.
  className: 'css-icon',
  html: '<div class="gps_ring"></div>'
  // Set marker width and height
  ,iconSize: [22,22]
  // ,iconAnchor: [11,11]
});

The following did the trick: I am now using the inner html to run the CSS animation. This will preserve the marker's location. Also note the iconSize attribute, which has the total size of the icon after the transformation ( 21 px =~ 18px x 1.2). Setting it this way centers the animated circle at the coordinate:

Working example: http://jsfiddle.net/christianjunk/waturuoz/

I still couldn't figure out, why my first approach wasn't working.