Leaflet Marker Popups

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<div id="map" style="width:500px;height:400px;"></div>

CSS

.pulse {
    display: block;
    border-radius: 50%;
    cursor: pointer;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
      box-shadow: 0 0 0 0;
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }

JavaScript

var map = L.map('map').setView([51.495, -0.09], 15);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data © OpenStreetMap contributors'
    });
map.addLayer(osmLayer);

const generatePulsatingMarker = function (radius, color) {
  const cssStyle = `
    width: ${radius}px;
    height: ${radius}px;
    background: ${color};
    color: ${color};
    box-shadow: 0 0 0 ${color};
  `
  return L.divIcon({
    html: `<span style="${cssStyle}" class="pulse"/>`,
    className: ''
  })
}

const pulsatingIcon = generatePulsatingMarker(10, 'red');
L.marker([51.497, -0.09], {icon: pulsatingIcon}).addTo(map);

var pulsatingIcon2 = generatePulsatingMarker(10, 'green');
L.marker([51.493, -0.09], {icon: pulsatingIcon2}).addTo(map);