JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="width: 400px; height: 500px"></div>
JavaScript
ymaps.ready(() => {
initMap(ymaps, "map");
console.log("inited");
});
function initMap(ymaps, containerId) {
const myMap = new ymaps.Map(containerId, {
center: [55.76, 37.64],
controls: [],
zoom: 10
});
const objectManager = new ymaps.ObjectManager({
clusterize: true,
clusterIconLayout: 'default#pieChart',
clusterDisableClickZoom: false,
geoObjectOpenBalloonOnClick: false,
geoObjectHideIconOnBalloonOpen: false,
geoObjectBalloonContentLayout: getDetailsContentLayout(ymaps)
});
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
setTimeout(function() {
objectManager.add({
type: 'FeatureCollection',
features: [{
id: 0,
type: 'Feature',
isActive: true,
geometry: {
type: 'Point',
coordinates: [55.76, 37.64]
},
properties: {
iconCaption: "74904",
details: {
connections: 6,
isActive: true,
lat: 55.76,
long: 37.64,
serialNumber: '74904',
chart: []
}
},
options: {
preset: "islands#blueCircleDotIconWithCaption"
}
}]
});
}, 500);
objectManager.objects.events.add('click', event => {
const objectId = event.get('objectId');
const obj = objectManager.objects.getById(objectId);
objectManager.objects.balloon.open(objectId);
});
}
function getDetailsContentLayout(ymaps) {
const BalloonContentLayout = ymaps.templateLayoutFactory.createClass('<div>BALLOON</div>',
// Если не передавать этот аргумент то все норм
{
build: function(){
BalloonContentLayout.superclass.build.call(this);
},
clear: function(){
BalloonContentLayout.superclass.clear.call(this);
}
}
);
return BalloonContentLayout;
}