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

Динамическая подгрузка данных

Ранее мы рассмотрели, как можно добавить статические маркеры на карту.
Сейчас рассмотрим, как автоматически обновлять данные для маркеров с сервера при движении карты.
Для этого есть метод updateMarkersFromServer(map, requestParams, markerOptions), он запрашивает данные с сервера при движении карты ajax-запросом.
Параметры ajax-запроса заключены во втором аргументе

url string url до сервера с данными
method string Метод, которым будет отправлен ajax-запрос (GET/POST)
params object GET/POST-параметры запроса.
При этом будут произведены следующие замены:
SW_LAT широта левого нижнего края карты
SW_LNG долгота левого нижнего края карты
NE_LAT широта правого верхнего края карты
NE_LNG долгота правого верхнего края карты
NW_LAT широта левого верхнего края карты
NW_LNG долгота левого верхнего края карты
SE_LAT широта правого нижнего края карты
SE_LNG широта правого нижнего края карты
C_LAT широта центра карты
C_LNG долгота центра карты
dataFormatter function Функция для приведения серверных данных к GeoJSON
Вызывается при получении ответа сервера
searchOnStart boolean Отправлять запрос на сервер при начальной загрузке карты

Для ajax-запроса используется нативный XMLHttpRequest.
Если же на странице будет обнаружен jQuery, то будет использован метод jQuery.ajax.

Реальный пример: overpass-api

Создаём карту

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

Задаём параметры запроса

Обратите внимание на свойство params.data, такой запрос ждёт API. При запросе будет произведена автозамена (SW_LAT,SW_LNG,NE_LAT,NE_LNG) на координаты карты.

var urlToSource = 'http://overpass-api.de/api/interpreter',
		method = "POST",
		params = {data: '[out:json];node  [shop=bakery]  (SW_LAT,SW_LNG,NE_LAT,NE_LNG);out;'};

Объявляем функцию для перевода ответа сервера в GeoJSON

function dataFormatter(response)
{
	var geoJson = {
			"type": "FeatureCollection",
			"features": []
		},
		elements = response.elements || [];

	function formatForGeoJson(data)
	{
		geoJson.features.push({
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [data.lon, data.lat]
			},
			"properties": {
				"title": data.id + JSON.stringify(data.tags)
			}
		});
	}

	for (var i = 0; i < elements.length; i ++) {
		formatForGeoJson(elements[i]);
	}

	return geoJson;
}

Вызываем метод для обновления маркеров

L.sm.updateMarkersFromServer(map, {
	url: urlToSource,
	method: method,
	params: params,
	dataFormatter: dataFormatter,
	searchOnStart: true
}, {markerType: 'alt2', cluster: {maxClusterRadius: 20}});

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

Результат

Реальный пример: overpass-api и jQuery

Тот же пример, но для запросов на сервер используется jQuery.ajax

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

Реальный пример: Спутник.Афиша

Здесь сервер отвечает вёрсткой в формате html

Создаём карту

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

Задаём параметры запроса

var urlToSource = '/ajax-proxy/afisha',
		method = "GET",
		params = {
			extf_lat: 'C_LAT',
			extf_long: 'C_LNG',
			r: 5000,
			db: '2014-12-17',
			de: '2015-01-11'
		};

Объявляем функцию для перевода ответа сервера в GeoJSON

Самое интересное здесь - при получении html мы всё так же генерируем GeoJSON

function dataFormatter(response)
{
	var geoJson = {
			"type": "FeatureCollection",
			"features": []
		};

	function formatForGeoJson(data)
	{
		if (! data.lat) {
			return;
		}

		geoJson.features.push({
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [data.lon, data.lat]
			},
			"properties": {
				"title": data.title + ': ' + data.adress + ', ' + data.phone
			}
		});
	}

	var $parent = $('
');
	$parent.html(response);
	$parent.find('.b-results__maps-coordinates').find('div').each(function () {
		formatForGeoJson($(this).data() || {});
	});

	return geoJson;
}

Вызываем метод для обновления маркеров

L.sm.updateMarkersFromServer(map, {
	url: urlToSource,
	method: method,
	params: params,
	dataFormatter: dataFormatter,
	searchOnStart: true
}, {markerType: 'alt2', cluster: {maxClusterRadius: 20}});

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