Создание и отображение XML-файла с метками заданного стиля

Задача отображения геообъектов на карте с помощью АПИ является одной из самых распространенных. Существует два способа ее решения:

1. С помощью javascript-функций API Яндекс.Карт.
2. С помощью xml-файла специального формата.


В этой статье мы рассмотрим второй способ добавления меток на карту.

Для этого потребуется создать два файла:
html-страница, на которой размещен код создания карты и YMapsML-файл с описанием меток. Также нам нужно будет картинка, если мы планируем использовать для отображения меток собственные значки.



Создание XML-файла с метками

Рассмотрим уже созданный XML-файл с метками: http://ymapsapi.narod.ru/examples/geoxml/ya.ymapsml.

Этот файл состоит из двух основных частей, вложенных в корневой элемент ymaps:
repr:Repsentation — здесь задается представление.
ymaps:GeoObjectCollection — здесь описываются географические данные (в нашем случае метки).
Вы можете изучить подробную схему YMapsML-документа в документации.

Обратите внимание, для элементов важно понятие namespace, имена и значения задаются атрибутами xmlns для корневого элемента так:

<ymaps:ymaps xmlns:gml="http://www.opengis.net/gml"xmlns:ymaps="http://maps.yandex.ru/ymaps/1.x"xmlns:repr="http://maps.yandex.ru/representation/1.x">


Это значит, что для того или иного набора тегов будет использоваться соответствующая схема (правила описания этого тега).

Задание меток

Для того, чтобы описать метку (точку), в тег ymaps:GeoObjectCollection нужно описать вложенный тег:

<gml:featureMember>
    <ymaps:GeoObject>
        <gml:description>
            Москва, ул. Станиславского, дом 21, строение 3
        </gml:description>
        <gml:name>
            Офис Яндекса на Станиславского
        </gml:name>
        <gml:Point>
            <gml:pos>37.662336 55.745336</gml:pos>
        </gml:Point>
    <ymaps:style>#yaIcon</ymaps:style>
    </ymaps:GeoObject>
</gml:featureMember>

Подробнее о тегах внутри:
ymaps:GeoObject — непосредственно описание геообъекта (точки).
gml:description — описание геообъекта.
gml:name — название объекта.
gml:Point — указание типа геообъекта «метка».
gml:pos — географические координаты в формате «долгота широта» (через пробел), например «37.662335 55.745376».
ymaps:style — идентификатор стиля данной метки.

Географические координаты вы можете получить, если у вас есть почтовый адрес, задав http-запрос к Геокодеру, либо с помощью инструмента определения координат.

Задание стиля метки

Стили меток задаются в теге repr:Repsentation

<repr:Representation>
        <repr:Style gml:id="yaIcon">
                <repr:iconStyle>
                    <repr:href>http://maps.yandex.ru/blocks-desktop/ymaps-geolocation/__preset/_id/ymaps-geolocation__preset_id_yandex-ru.png</repr:href>
                    <repr:size x="24" y="24"/>
                    <repr:offset x="-12" y="-12"/>
                </repr:iconStyle>
            <repr:balloonContentStyle>
                <repr:template>#yaTemplate</repr:template>
            </repr:balloonContentStyle>
        </repr:Style>

        <repr:Template gml:id="yaTemplate">
            <repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
        </repr:Template>
    </repr:Representation>

В этом теге:
repr:iconStyle — описание значка для метки, оно содержит тег repr:href — ссылка на картинку со значком. Путь до картинки нужно указывать полностью, с «http://..». А так же repr:size — размер картинки и repr:offset — смещение значка от точки на карте. Если у значка есть тень, то в тег repr:iconStyle нужно вложить тег repr:shadow, в котором также нужно указать repr:href, repr:size и repr:offset.
repr:balloonContentStyle — стиль содержимого всплывающего окна (balloon) по клику на метке, содержит тег repr:template (с маленькой буквы) — идентификатор шаблона.
Сам же шаблон задается с помощью repr:Template (с большой буквы), в данном случае значения $name и $description подставляются в подзаголовок, и текст под ним:

<repr:Template gml:id="yaTemplate">
<repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
</repr:Template>

Визуализация XML-файла на карте

Созданный YMapsML-файл можно визуализировать с помощью Javascript API только в том случае, если он будет доступен по http.

В начале подключим API Яндекс.Карт. Важно, чтобы у нас был подключен модуль geoXml.load. Данный метод позволяет загружать XML-файл с географическими данными и преобразует его в коллекцию GeoObjectCollection.

Он уже входит в пакет package.full, но в нашем примере мы используем пакеты package.standard + package.geoXml. Тем самым мы уменьшаем размер, загружаемого кода API.

В итоге мы получаем:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Визуализация xml-файла.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.standard,geoXml.load&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init() {
    var map = new ymaps.Map("map", {
        center: [55.734046, 37.588628],
        zoom: 10
    });
    ymaps.geoXml.load('http://ymapsapi.narod.ru/examples/geoxml/ya.ymapsml')
    .then(function (res) {
        map.geoObjects.add(res.geoObjects);
    });
}
</script>
</head>
<body>
<h2>Примеры. Визуализация xml-файла.</h2>
<div id="map" style="width: 800px; height: 400px"></div>
</body>
</html>


Вы можете посмотреть что получилось в примере.