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');
if (obj.properties.color == 'red') {
obj.options = obj.options || {};
obj.options.preset = 'islands#redIcon';
}
});
/*$.ajax({
url: "http://vk.mirada.kz/users.php"
}).done(function(data) {
objectManager.add(data);
});*/
objectManager.add(
{
"type": "FeatureCollection",
"features": [
{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}},
{"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}},
{"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [55.863338, 37.565466]}, "properties": {"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки", "color": "red"}}
]
});
myMap.geoObjects.add(objectManager);
});