JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 32
});
// Чтобы задать опции одиночным объектам и кластерам,
// обратимся к дочерним коллекциям ObjectManager.
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
$.ajax({
url: "https://sandbox.api.maps.yandex.net/examples/ru/2.1/object_manager/data.json"
}).done(function(data) {
objectManager.add(data);
myMap.events.add('boundschange', function () {
console.log(getCount(objectManager))
})
});
}
function getCount(objectManager) {
var cnt = 0;
objectManager.objects.each(function (object) {
var objectState = objectManager.getObjectState(object.id);
if (objectState.isShown) cnt++;
})
return cnt;
}