Pulsating Leaflet Marker

by Christian Arielli

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet mobile example</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="../dist/leaflet.css" />

	<script src="../dist/leaflet.js"></script>

	<style>
		body {
			padding: 0;
			margin: 0;
		}
		html, body, #map {
			height: 100%;
		}
	</style>
</head>
<body>
	<style>
	/*
	 * Unlike other icons, you can style `L.divIcon` with CSS.
	 * These styles make each marker a pink triangle.
	 */
	.css-icon {
	  width: 0;
	  height: 0;
	  border-top: 30px solid transparent;
	  border-bottom: 30px solid transparent;
	  border-left: 30px solid #ff8888;
	  }

	  .gps_ring {
	    border: 3px solid #999;
	    -webkit-border-radius: 30px;
	    height: 18px;
	    width: 18px;
	    /*position: fixed;*/
	   /* left:20px;
	    top:214px;*/
	    -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;}
		}
	</style>
	<div id="map"></div>

	<script>
		var map = L.map('map').setView([51.505, -0.09], 13);

		// create a tile layer sourced from mapbox
		L.tileLayer('https://{s}.tiles.mapbox.com/v4/christianjunk.e3e05ee8/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hyaXN0aWFuanVuayIsImEiOiJkMjIzMzRjNzBlNjc1OWUxYmE0NzBjNzQ3MWNiYTNkMyJ9.q4y4NMEwFYGRZdSEfPBg7A').addTo(map);	

		L.marker([50.5, 30.5]).addTo(map);

		map.setView([50.5, 30.5]);

		// Define an icon called cssIcon
		var cssIcon = L.divIcon({
		  // Specify a class name we can refer to in CSS.
		  className: 'gps_ring'
		  // Set marker width and height
		  // ,iconSize: null
		  // ,iconAnchor:...