Клуб API Карт

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

Пост в архиве.


Последнее время достаточно часто нас просят помимо документации, рассказывать про различные примеры использования API Яндекс.Карт, с пояснениями каких-либо моментов с фрагментами кода. Время от времени мы будем публиковать такие статьи в этом клубе, а также будем рады видеть нечто подобное и от разработчиков, которые разобрались с нашим АПИ, и хотели бы поделиться опытом с другими веб-разработчиками.

Сегодня мы рассмотрим то, как устроена карта с несколькими метками с заданным стилем на карте мира.

Рассмотрим вот такой пример: Все офисы Яндекса на карте мира


Показать несколько меток на интерактивной карте (как в примере) можно двумя способами: задать их с помощью функций Javascript API (подробнее см. раздел "Метки") или описать их при помощи специального XML-файла ("YMapsML" — Yandex Maps Markup Language).


Первый способ можно использовать тогда, когда html-страница генерируется на сервере, и для метки можно на уровне вызовов Javascript указывать различные параметры. А второй — когда сама страница на сайте статическая, а XML либо сформирована один раз, или генерируется на сервере.


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

 

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


Итак, что потребуется:

1) API-ключ для использования Яндекс.Карт - его нужно получить на этой странице.Кстати, при получении ключа, вам будет предложен простой html-код страницы с картой с центром Москвы и уже с вашим ключом, код можно вставить в пустой HTML-файл на локальном диске или на хостинге, и посмотреть, что получилось.

2) стандартный текстовый редактор или любой другой редактор текста с возможностью править XML и HTML файлы.

3) Если вы хотите использовать для обозначения меток собственные значки, то сами значки и тень для значка. Это может быть любая картинка (gif, png, jpg) для интернета с небольшими размерами.

В нашем примере:

Значок

Тень значка:

Кроме этого, нужно знать какого размера картинки, и координаты точки (в пикселях, от левого верхнего угла), которая должна указывать место на карте — "хвостик" точки.


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

Рассмотрим уже созданный XML-файл с метками: http://company.yandex.ru/inside/address.xml 

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

Подробная схема YMapsML документа здесь 

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


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


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

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



  <gml:featureMember>
   <ymaps:GeoObject id="taganka">
    <gml:description>
     Москва, ул. Станиславского, дом 21, строение 3
    </gml:description>
    <gml:name>
     Офис Яндекса на Станиславского
    </gml:name>
    <gml:Point>
    <gml:pos>37.662335 55.745376</gml:pos>
     </gml:Point>
    <ymaps:style>#companyStyle</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:Style gml:id="companyStyle">
        <repr:iconStyle>
            <repr:href>http://company.yandex.ru/i/ya.png</repr:href>
            <repr:size x="57" y="55"/>
            <repr:offset x="-37" y="0"/>
            <repr:shadow>
                <repr:href>http://company.yandex.ru/i/shadow.png</repr:href>
                <repr:size x="57" y="55"/>
                <repr:offset x="-37" y="0"/>
            </repr:shadow>
        </repr:iconStyle>
    <repr:balloonContentStyle>
        <repr:template>#companyTemplate</repr:template>
    </repr:balloonContentStyle>
</repr:Style>

В этом теге:

repr:iconStyle — описание значка для метки, оно содержит тег repr:href — ссылка на картинку со значком. Путь до картинки нужно указывать полностью, с "http://..". А так же: repr:size — размер картинки, и repr:offset — смещение значка от точки на карте.

Если у значка есть тень, то в тег repr:iconStyle нужно вложить тег repr:shadow, в котром также нужно указать href, size и offset.

repr:balloonContentStyle — стиль содержимого всплывающего окна (balloon) по клику на метке, содержит тег repr:template (с маленькой буквы) — идентификатор шаблона.


Сам же шаблон задается с помощью repr:Template (с большой буквы), в данном случае значения $name и $description подставляются в подзаголовок, и текст под ним:

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


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


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

Рассмотрим интересующие нас вызовы API в коде страницы


Подключение Javascript API

Простое подключение API происходит при помощи загрузки Javascript (внутри тега <head>):
<script charset="utf-8" type="text/javascript" src="http://api-maps.yandex.ru/1.0/?key=API-ключ">

"1.0" — версия API (Подробнее о версиях Javascript API)

"API-ключ" — ключ, полученный для вашего сайта, получить ключ можно здесь, подробнее о ключах — в "Вопросах и ответах" 


Задание параметров карты и вызовы


<script type="text/javascript"><!--
var map; //декларируем имя объекта для карты
var ml; //декларируем имя слоя с метками из XML


function init (lat,long) { //функция имеет входные параметры - широта и долгота, куда спозиционировать карту
    map = new YMaps.Map(document.getElementById("YMapsID") //создание карты
    map.setCenter(new YMaps.GeoPoint(long, lat), 2); //задание параметров для карты (центр и уровень масштабирования)

    ml = new YMaps.YMapsML( 'http://company.yandex.ru/inside/address.xml' //создание слоя с метками из XML

    map.addOverlay(ml); //добавление слоя на карту

    map.addControl(new YMaps.TypeControl() //добавляем элемент управления переключения типов карты
    map.addControl(new YMaps.ToolBar() //добавление тулбара
    map.addControl(new YMaps.Zoom() //добавление элемента управления масштабом
    map.addControl(new YMaps.ScaleLine() //добавление масштабного отрезка

    YMaps.Events.observe(ml, ml.Events.Fault, function (error) {
        alert('Ошибка' + error); //если XML документ не загрузился или загрузился с ошибками, выведется сообщение об этом
    }
};
    //--></script>




Добавление html-элемента с картой на страницу

<div id="YMapsID" style="height:400px; width:100%;"></div>

Инициализация карты

Карта иницилизируется по загрузке страницы, с центром в указанных ниже координатах:

<body onload="init('45.758255','-22.00');">


Это все :)


PS: Пишите вопросы, если чего-то было непонятно.

 





3 комментария

Спасибо за описание.

Хотелось бы видеть этот пример с использованием автозума.

 
var ml = new YMaps.YMapsML('http://company.yandex.ru/inside/address.xml');
map.addOverlay(ml);

YMaps.Events.observe(ml, ml.Events.Load, function () {
    var bounds = new YMaps.GeoCollectionBounds();
    for (var i = 0, group = ml.get(0), l = group.length(); i < l; i++) {
        bounds.add(group.get(i).getGeoPoint());
    }
    map.setBounds(bounds);
});
 
Вот как-то так можно.
Добрый вечер! Подскажите можно ли загрузить xml файл, который генерируется атоматически сервером Avito? И в этом файле зашиь объект, (точки, фотографии, описание) Спасибо!