Sputnik Maps JS APIДокументация

Маркеры с кластеризацией

В предыдущем примере мы показали, как отмечать точки на карте маркерами.
Сейчас рассмотрим, как разместить на карте очень много кластеров.
Проблема в том, что если просто загрузить много маркеров на карту, то страница будет ощутимо "тормозить".
Одно из решений проблемы - объединять близкие маркеры в кластеры, при клике на которые будут показаны маркеры, входящие в кластер.
В нашем API кластеризация реализована подключением стороннего плагина Leaflet.markercluster и предоставлением удобной обёртки над ним.
Это делается прозрачно: при добавлении маркеров есть возможность передать параметры для кластеризации через свойство cluster, и тогда маркеры будут показаны кластерами.

L.sm().addMarkers(map, markers, {cluster: {maxClusterRadius: 120}})

Все параметры из свойства cluster будут переданы в плагин, описание параметров можно посмотреть на странице плагина.

Отображение кластеризованных маркеров

Создаём карту и объявляем маркеры

var sm = L.sm(),
	map = sm.map('map-id', {
		zoomControl: true,
		minZoom: 3,
		maxZoom: 19,
		themePath: '/dist/themes/sputnik_maps/'
	})
	.setView([55.75, 37.6167], 10);

var markers = [
	[55.70, 37.6167],
	[55.80, 37.6167],
	[55.60, 37.6167],
	[55.50, 37.6167],
	[55.90, 37.6167],
	[55.70, 37.5167],
	[55.70, 37.4167],
	[55.70, 37.7167],
	[55.70, 37.8167]
];

Добавляем маркеры на карту

Обратите внимание на свойство cluster

sm.addMarkers(map, markers, {markerType: 'alt1', cluster: {maxClusterRadius: 30}});

Полный пример

Результат

Кластеризация меняется в зависимости от масштаба карты, на кластеры можно нажимать мышкой.

Более реалистичный пример

Пример отображения офисов компании Ростелеком

Полный пример