JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru_RU"></script>
<div id="map"></div>
CSS
#map {
width: 640px;
height: 480px;
}
JavaScript
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [56.858644, 60.595326], // Ебург
zoom: 12
});
myMap.controls.add('mapTools').add('zoomControl');
clusterer = new ymaps.Clusterer();
clusterer.options.set({
gridSize: 50,
//minClusterSize:2,
synchAdd: true,
iconContentLayout: ymaps.templateLayoutFactory.createClass('$[properties.metaDataProperty.AnyMetaData.number]')
});
var result = [];
url = "http://maps.yandex.ru/export/usermaps/hsQtOekrpQa__ob2SS1YcU6IDCqPE9lW/";
ymaps.geoXml.load(url)
.then(function (res) {
res.geoObjects.each(function (geoObject) {
result.push(geoObject);
console.log(geoObject.properties.getAll());
});
clusterer.add(result);
myMap.geoObjects.add(clusterer);
});
}