Cluster include Pulsar animation

[ivanssa]

Hello everybody, I have included a pulsar animation feature the cluster, follows the code for those who need, or be able to enhance hugs ...

In PruneCluster.js include in Line

   return new L.DivIcon({
            html: "<div><strong></strong><span>" + cluster.population + "</span></div>",
            className: c,
            iconSize: L.point(iconSize, iconSize)
        });

In LeafletStyleSheet.css Include css code:

/* Marker Pulse */
.prunecluster strong{
    position:absolute;
    border: 4px solid #FFF;    
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;   
    /* make a circle */
    border-radius:51px; 
    width:51px; 
    height:51px;
    margin:-12px 0 0 -22px; 
}

    @-moz-keyframes pulsate {
        from {
            -moz-transform: scale(0.25);
            opacity: 1.0;
        }
        95% {
            -moz-transform: scale(1.3);
            opacity: 0;
        }
        to {
            -moz-transform: scale(0.3);
            opacity: 0;
        }
    }
    @-webkit-keyframes pulsate {
        from {
            -webkit-transform: scale(0.25);
            opacity: 1.0;
        }
        95% {
            -webkit-transform: scale(1.3);
            opacity: 0;
        }
        to {
            -webkit-transform: scale(0.3);
            opacity: 0;
        }
    }

.prunecluster-small div strong{
    border: 4px solid #6ecc39;
}

.prunecluster-medium div strong {
    border: 4px solid #f0c20c;
}

.prunecluster-large div strong {
    border: 4px solid #f18017; 
}