JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

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

CSS

#map {
  width: 600px;
  height: 600px;
}

JavaScript

//debugger;
ymaps.ready(init);

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

  var myPlacemarks = [
    new ymaps.Placemark([30, 21]),
    new ymaps.Placemark([31, 22]),
    new ymaps.Placemark([31, 21])
  ];
  var clusterer = new ymaps.Clusterer();
  clusterer.add(myPlacemarks);
  myMap.setBounds(clusterer.getBounds());
  myMap.geoObjects.add(clusterer);
  myMap.geoObjects.events.add('contextmenu', e => {
    //debugger;
    alert(e.get('target').getGeoObjects ? 'cluster' : 'geoObject');
  })
}