Я работаю в Яндексе, у Яндекса есть карты, а у карт есть API. API – вещь, которая позволяет встроить карты Яндекса на свой сайт. С версии 2.0 наш API умеет кластеризовать метки на клиенте. Вот как выглядят метки до и после кластеризации:



На днях состоялся очередной релиз нашей бета-версии 2.1.4. Этот релиз примечателен тем, что в нем случилось то, чего так боялись большевики. Как мы и предупреждали, нам пришлось сломать обратную совместимость в кластеризаторе меток.

В этой статье я хочу не просто перечислить новшества в работе с кластеризатором в версии 2.1.4, но и объяснить, зачем нам понадобилось эти новшества плодить. А то вам придется переписывать код, а переписывать код грустно, если не понимаешь, зачем это приходится делать.

В JS API Яндекс.Карт существует возможность создавать различные объекты на карте. Один из их них – многоугольник, с помощью которого можно улучшить интерактивность пользовательской карты: выделить отдельные области или отобразить местоположение неточечного объекта. К примеру, так можно показать план строительства нового квартала или зоны доставки пиццы.

У пользователей API Яндекс.Карт давно появился вопрос о добавлении подписей поверх многоугольников. Люди предлагали хитрые решения, чтобы добавить подпись на объект в нужном месте, скрыть ее, перекрасить и т.п., но такие решения получались сложными и негибкими.

К примеру, к нам пришел отдел исследований Яндекса с просьбой написать удобный инструмент для подписи многоугольников после того, как они сделали несколько исследований на карте мира.


Отображения региональных слов из словаря Даля, т.е слова которые ищут значительно чаще, чем в среднем по России

В действительно задача оказалась нетривиальной. Только представьте, для каждого многоугольника нужно определить хорошо подходящий центр для отображения подписи, на каждом масштабе определить вмещается ли подпись, нужно ли ее скрывать на выбранном зуме, менять стили на каждом зуме, опять все перерассчитывать. То есть, чтобы сделать не особо сложную инфографику, нужно сильно попотеть и подготовить много дополнительных данных.

В API Яндекс.Карт есть средства для загрузки географических данных в формате XML. API поддерживает карты в двух форматах: YMapsML и KML. В документации по технологиям Яндекса есть пример, илюстрирующий работу с этим форматами.

Глядя на этот пример, можно предположить, что с точки зрения API оба формата эквивалентны, и работа с ними ничем не отличается. Тем более Яндекс предоставляет конструктор карт, в котором каждой карте автоматически назначаются ссылки на оба формата. Эти ссылки отличаются только суффиксом. Карта в формате YMapsML оканчивается на символ /, а адрес той же карты в формате KML на конце содержит символы ".kml".

Независимо от формата XML загрузка геообъектов будет выглядеть так:

var map = new ymaps.Map("map", {
    center: [-25.89, 135.32],
    zoom: 4,
    controls: ["zoomControl"]
});

var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/";

ymaps.geoXml.load(url).then(function (res) {
    map.geoObjects.add(res.geoObjects);
});

Но если нам понадобится что-то сделать с объектами при загрузке, то мы обнаружим, что формат имеет значение. Предположим, что мы хотим поменять цвет контура у объекта с определенным именем.



Оказывается, что если мы заменим адрес на формат KML, то данный код работать не будет, потому что коллекция объектов, загруженная из формата KML отличается от той, что получается при загрузке YMapsML. При загрузке KML получается коллекция объектов, состоящая из одного геобъекта, который сам является коллекцией. И вот этот вложенный объект уже содержит геообъекты, нарисованные на карте.

Поэтому для обработки коллекции, загруженной из KML надо написать вот такой код: