Клуб API Карт

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

Карты
1 февраля 2010, 15:41

Последнее время достаточно часто нас просят помимо документации, рассказывать про различные примеры использования 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: Пишите вопросы, если чего-то было непонятно.

Создание и отображение XML-файла с метками заданного стиля (на примере офисов Яндекса на карте мира)
-----
Эта статья относится к API Яндекс.Карт 1.x. Рекомендуем почитать аналогичную инструкцию для новой версии API — 2.0.
-----

Последнее время достаточно часто нас просят помимо документации, рассказывать про различные примеры использования 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: Пишите вопросы, если чего-то было непонятно.

0 комментариев
Подписаться на комментарии к посту