JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<div id="map"></div>
CSS
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [52.281875,36.978864],
zoom: 5,
controls: ['zoomControl']
}),
objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 32
});
objectManager.objects.options.set( {
iconLayout: 'default#image',
iconImageHref: 'http://vk.mirada.kz/ava/1a.png',
iconImageSize: [30, 42],
iconImageOffset: [-3, -42]
});
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
objectManager.objects.events.add('add', function (e) {
var obj = e.get('child');
});
$.ajax({
url: "test.php"
}).done(function(data) {
objectManager.add(data);
});
/*
===== начинка php:
<?
$arr = array('type' => "FeatureCollection", 'features' => array(array('type' => "Feature", 'id' => 0, 'geometry' => array('type' => "Point", 'coordinates' => array(55.831903, 37.411961)), 'properties' => array('balloonContent' => "content", 'clusterCaption' => "capton", 'hintContent' => "title", "color"=>'red'))));
echo utf8_encode(json_encode($arr));
?>
====== вывод php:
{"type":"FeatureCollection","features":[{"type":"Feature","id":0,"geometry":{"type":"Point","coordinates":[55.831903,37.411961]},"properties":{"balloonContent":"content","clusterCaption":"capton","hintContent":"title","color":"red"}}]}
*/
myMap.geoObjects.add(objectManager);
});