JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<div id="YMapsID"/>
CSS
#YMapsID {
width: 640px;
height: 480px;
}
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('YMapsID', {
center: [55.751574, 37.573856],
zoom: 9,
behaviors: ['default', 'scrollZoom']
}),
/**
* Создадим кластеризатор, вызвав функцию-конструктор.
* Список всех опций доступен в документации.
* @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/Clusterer.xml#constructor-summary
*/
clusterer = new ymaps.Clusterer({
/**
* Через кластеризатор можно указать только стили кластеров,
* стили для меток нужно назначать каждой метке отдельно.
* @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml
*/
preset: 'twirl#invertedVioletClusterIcons',
/**
* Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
*/
groupByCoordinates: false,
/**
* Опции кластеров указываем в кластеризаторе с префиксом "cluster".
* @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/Cluster.xml
*/
clusterDisableClickZoom: true
}),
/**
* Функция возвращает объект-данных для метки.
* Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
* Оба поля поддерживают HTML-разметку.
* Список полей данных, которые используют стандартные макеты содержимого иконки метки
* и балуна геообъектов, можно посмотреть в документации.
* @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/GeoObject.xml
*/
getPointData = function (coords) {
// Для примера. Реальный идентификатор метки берем из БД на сервере.
var id = 'id_' + Math.floor(Math.random() * (+new Date));
return {
// id: id,
id: id,
clusterCaption:...