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

Маркеры

В предыдущем примере мы показали, как вставить карту на свой сайт.
Теперь поговорим о том, как обозначить точки на карте при помощи маркеров.

Для стилизации элементов используются "темы".
Тема состоит из стиля в файле styles.css и изображений различных маркеров.
Чтобы отобразить на карте такие же маркеры, как на сайте Спутник.Карты, нужно подключить тему sputnik_maps, которая входит в состав библиотеки.
Путь до темы задаётся при создании карты параметром

themePath: '/dist/themes/sputnik_maps/'

Способы размещения одного маркера на карте

Сначала создаём карту

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);

Добавляем маркер через хелпер

sm.addMarker(map, [55.85, 37.6167], {markerType: 'alt3'});

Альтернативный способ

sm.marker([55.75, 37.6167]).addTo(map);
sm.marker([55.75, 37.5167], {markerType: 'alt2'}).addTo(map);

Или напрямую через Leaflet

L.marker([55.75, 37.7167], {icon: L.icon(
	{
		iconUrl: '/dist/themes/sputnik_maps/images/alt1.png',
		iconSize: [45, 41],
		iconAnchor: [17, 38],
		popupAnchor: [0, 3]
	})}).addTo(map);

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

Результат

Массив маркеров

Поддерживаются простые массивы и GeoJSON-объекты

Сначала создаём карту

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]
];

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

Добавление маркеров из GeoJSON ("MultiPoint")

var markers2 = {
	"type": "Feature",
	"geometry": {
		"type": "MultiPoint",
		"coordinates": [
			[37.6167, 55.75],
			[37.6167, 55.85],
			[37.6167, 55.65],
			[37.6167, 55.55],
			[37.6167, 55.95],
			[37.5167, 55.75],
			[37.4167, 55.75],
			[37.7167, 55.75],
			[37.8167, 55.75]
		]
	}
};
sm.addMarkers(map, markers2);

Добавление маркеров из GeoJSON ("FeatureCollection")

Если при этом у точек есть параметр title, как в примере ниже, то при клике на маркер будет попап с текстом.

var markers3 = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [37.5167, 55.85]
			},
			"properties": {
				"title": "m1"
			}
		},
		{
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [37.7167, 55.85]
			},
			"properties": {
				"title": "m2"
			}
		}
	]
};

sm.addMarkers(map, markers3);

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

Результат

Можно кликать на синие маркеры