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;
}
Babel + JSX
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
MyClusterBalloonContentLayout = ymaps.templateLayoutFactory.createClass('{% include "cluster#balloonTwoColumns" %}', {
build: function() {
MyClusterBalloonContentLayout.superclass.build.call(this);
var geoObjects = this.getData().properties.get('geoObjects');
var ids = geoObjects
.filter(geoObject => !geoObject.properties.loaded)
.map(geoObject => geoObject.id);
if (ids.length) {
getPointInfo(ids).then(response => {
geoObjects.forEach((geoObject, index) => {
geoObject.properties = {
...geoObject.properties,
...response[index],
loaded: true
}
})
this.rebuild()
})
}
}
}),
MyClusterBalloonItemContentLayout = ymaps.templateLayoutFactory.createClass([
'{% if properties.loaded %}',
'{% include "cluster#balloonTwoColumnsItemContent" %}',
/*'{{ properties.balloonContent }}',*/
'{% else %}',
'loading...',
'{% endif %}'
].join('')),
objectManager = new ymaps.ObjectManager({
clusterize: true,
clusterDisableClickZoom: true,
clusterBalloonContentLayout: MyClusterBalloonContentLayout,
clusterBalloonItemContentLayout: MyClusterBalloonItemContentLayout
});
myMap.geoObjects.add(objectManager);
$.ajax({
url: "https://sandbox.api.maps.yandex.net/examples/ru/2.1/object_manager_balloon_async/data.json"
}).done(function(data) {
objectManager.add(data);
});
// Функция, эмулирующая запрос за данными на сервер.
function getPointInfo(ids) {
var defer = ymaps.vow.defer();
window.setTimeout(() => {
defer.resolve(ids.map(id => ({balloonContent: 'Контент метки id: ' + id})));
...