JSFiddle - React, Tailwind, and code Playground

by exload

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

#map {
    width: 100%;
    height: 400px;
}

JavaScript

ymaps.ready(function () {
  var map = new ymaps.Map('map', {
    center: [55.110672854772744,50.140834042452745],
    zoom: 4
  });

  var objectManager = new ymaps.ObjectManager({
      clusterize: true
  });

  var objects = {"type":"FeatureCollection","features":[{"type":"type","id":2,"geometry":{"type":"Point","coordinates":[58.734398186914,50.167950643145]},"properties":{"balloonContent":"balloonContent","hintContent":"hintContent"},"options":{"preset":"islands#darkGreenCircleDotIcon"}},{"type":"type","id":6,"geometry":{"type":"Point","coordinates":[58.375561348215,45.523384267428]},"properties":{"balloonContent":"balloonContent","hintContent":"hintContent"},"options":{"preset":"islands#darkGreenCircleDotIcon"}},{"type":"type","id":7,"geometry":{"type":"Point","coordinates":[57.641043033499,39.807992912848]},"properties":{"balloonContent":"balloonContent","hintContent":"hintContent"},"options":{"preset":"islands#darkGreenCircleDotIcon"}},{"type":"type","id":8,"geometry":{"type":"Point","coordinates":[55.757291087676,37.579297893447]},"properties":{"balloonContent":"balloonContent","hintContent":"hintContent"},"options":{"preset":"islands#redCircleDotIcon"}}]};

objectManager.add(objects);
map.geoObjects.add(objectManager);

});