Add a popup when clicked through to a 'plugin' pulsing marker in R Leaflet With Blink
HTML
<!DOCTYPE html>
<html>
<head>
<title>leaflet-pulse-icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.css" />
<style>
#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
a { color: #0077ff; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([50.0886,14.4224], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var pulsingIcon = L.icon.pulse({iconSize:[14,14],color:'red'});
L.marker([50.0874,14.4212],{icon: pulsingIcon,title: 'Josefov, 110 00 Prague 1, Czechia'}).bindPopup('<b>Josefov, 110 00 Prague 1, Czechia Josefov, 110 00 Prague 1, Czechia</b>').openPopup().addTo(map);
var pulsingIcon2 = L.icon.pulse({iconSize:[8,8],color:'blue'});
L.marker([50.0874,14.4254],{icon: pulsingIcon2,title: 'Josefov, 110 00 Maxico 1, CANADA'}).bindPopup('<b>Josefov, 110 00 Maxico 1, CANADA, Josefov, 110 00 Maxico 1, CANADA, Czechia</b>').openPopup().addTo(map);
var pulsingIcon3 = L.icon.pulse({iconSize:[12,12],color:'green'});
L.marker([50.0874,14.4162],{icon: pulsingIcon3,title: 'Josefov, 110 00 Dfdf 1, US'}).bindPopup('<b>Josefov, 110 00 Dfdf 1, US, Josefov, 110 00 Dfdf 1, US</b>').openPopup().addTo(map);
</script>
</body>
</html>
CSS
.leaflet-pulsing-icon {
border-radius: 100%;
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}
.leaflet-pulsing-icon:after {
content: "";
border-radius: 100%;
height: 300%;
width: 300%;
position: absolute;
margin: -100% 0 0 -100%;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}