Ранее мы рассмотрели, как можно добавить статические маркеры на карту.
Сейчас рассмотрим, как автоматически обновлять данные для маркеров с сервера при движении карты.
Для этого есть метод updateMarkersFromServer(map, requestParams, markerOptions),
он запрашивает данные с сервера при движении карты ajax-запросом.
Параметры ajax-запроса заключены во втором аргументе
url | string | url до сервера с данными | ||||||||||||||||||||
method | string | Метод, которым будет отправлен ajax-запрос (GET/POST) | ||||||||||||||||||||
params | object |
GET/POST-параметры запроса.
При этом будут произведены следующие замены:
|
||||||||||||||||||||
dataFormatter | function |
Функция для приведения серверных данных к GeoJSON
Вызывается при получении ответа сервера |
||||||||||||||||||||
searchOnStart | boolean | Отправлять запрос на сервер при начальной загрузке карты |
Для ajax-запроса используется нативный XMLHttpRequest.
Если же на странице будет обнаружен jQuery, то будет использован метод jQuery.ajax.
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;'};
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}});
Тот же пример, но для запросов на сервер используется 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' };
Самое интересное здесь - при получении 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}});