JSFiddle - React, Tailwind, and code Playground

by Mixail

HTML

<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&amp;lang=ru_RU"></script>
<script type="text/html" id="iconTemplate">
    <div class = "custom-placemark $[properties.iconStyle|custom-placemark-blue][if properties.iconAnimation] $[properties.iconAnimationClass][endif]"></div>
</script>
<div id="map" class="custom-map"></div>

CSS

.custom-map {
    width: 800px;
    height: 500px;
}
.custom-placemark {
    position: absolute;
    height: 50px;
    width: 33px;
    bottom: -6px;
    left: -17px;
    background-image:...

JavaScript

var map,
customIconLayout;

ymaps.ready(init);

function init() {
    map = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    });

    customIconLayout = ymaps.templateLayoutFactory.createClass(
    document.getElementById('iconTemplate').innerHTML, {
        clear: function () {
            var properties = this.getData().geoObject.properties;
            if (properties.get('iconAnimation') && properties.get('iconAnimationOnce')) {
                properties.set('iconAnimation', false);
            }
            this.constructor.superclass.clear.call(this);
        }
    });

    for (var i = 0, delay = 0; i < 50; i++) {
        delay = 500 / (i + 1) + delay;
        addPlacemark(new ymaps.Placemark(getRandomCoordinates(), {
            balloonContent: 'placemark #' + i,
            iconStyle: 'custom-placemark-' + getRandomStyle(),
            iconAnimation: true,
            iconAnimationClass: 'custom-placemark-animation',
            iconAnimationOnce: true
        }, {
            iconLayout: customIconLayout
        }), delay);
    }
}

function addPlacemark(placemark_obj, timeout) {
    setTimeout(function () {
        map.geoObjects.add(placemark_obj);
    }, timeout);
}

function getRandomCoordinates() {
    bounds = map.getBounds();
    var size = [bounds[1][0] - bounds[0][0], bounds[1][1] - bounds[0][1]];
    return [Math.random() * size[0] + bounds[0][0], Math.random() * size[1] + bounds[0][1]];
}

function getRandomStyle() {
    var allowedStyles = ['blue', 'green', 'red', 'pink', 'orange'];
    return allowedStyles[parseInt(Math.random() * 7)];
}