I am looking to develop a unique animated map marker icon for my Leaflet map without relying on third-party plugins to enhance my learning experience.
My current approach involves using CSS to create a 'pulsating' animation effect:
.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;
}
@-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;}
}
To implement this custom marker, I am utilizing Leaflet's DivIcon and referencing the CSS class mentioned above:
// Define an icon called cssIcon
var cssIcon = L.divIcon({
// Specify a class name we can refer to in CSS.
className: 'gps_ring'
});
// Create markers and set their icons to cssIcon
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map);
However, I am experiencing issues with this setup as the animated marker icon consistently appears in the top left corner of the map. It seems that the scaling transformation is interfering with the marker's correct positioning:
https://i.sstatic.net/u0xbN.png
For reference, I am running Chrome 44.x on Windows 7 and Yosemite operating systems.
I have prepared a simplified demonstration which can be accessed here:
http://jsfiddle.net/christianjunk/q69qx45c/1/
What could be causing this issue? Why is the animation disrupting the marker's position on the map?