среда, 16 сентября 2009 г.

Начинаем изучать API Яндекс.Карт

С этой заметки я начинаю цикл публикаций по работе с API Яндекс.Карт.

Раздел на сайте Яндекса – http://api.yandex.ru/maps/ с подробным описанием.

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

Для этого Вы должны:

иметь логин и пароль на Яндексе и быть авторизованным;

ознакомиться и принять условия Пользовательского соглашения;

указать URL вашего сайта в регистрационной форме.

Если Вы не были ранее зарегистрированы на Яндексе , то в начале Вам необходимо пройти процедуру регистрации по адресу http://passport.yandex.ru/passport?mode=register

После этого Вы должны выполнить процедуру авторизации на сайте Яндекса (с этого шага следует начить и всем тем, кто уже раннее был зарегистрирован там).

Затем Вы должны посетить страницу по адресу http://api.yandex.ru/maps/form.xml для получения ключа

И если Вы авторизованы то увидите форму для получения ключа.

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

Лучше всего в качестве адреса сайта указывать только его домен (например, mysayt.ru).

Тогда ключ, зарегистрированный на отдельный домен, будет действителен для всех url внутри этого домена и для специальных поддоменов (например для “www”).

Ключ, зарегистрированный на домен http:// mysayt.ru /, будет действителен для:

http:// mysayt.ru /

http://www.mysayt.ru /

http://www.mysayt.ru /page/

http://host1.mysayt.ru /

http://host2.mysayt.ru /page/

Обратите внимание, что ключ, зарегистрированный на домен http://www. mysayt.ru / будет действителен только для домена http://www. mysayt.ru и его разделов (например, http://www. mysayt.ru /page/).

На локальном компьютере с доменом localhost можно использовать любой ключ.

Далее нужно прочитать и согласится с условиями пользовательского соглашения.

Нажать на кнопку Получить API-ключ.

После этого Вы получите с генерированный ключ и простой пример использования сервиса API Яндекс.Карт с Вашим ключом.

Например:

Ключ: AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример кода:

<!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>

<meta http-equiv=”Content-Type” content=”text/html” />

<script src=”http://api-maps.yandex.ru/1.1/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”

type=”text/javascript”></script>

<script type=”text/javascript” charset=”utf-8″>

var map;

function init () {

map = new YMaps.Map( document.getElementById(”YMapsID”) );

map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,

YMaps.MapType.MAP);

};

</script>

</head>


<body onload=”init();”>

<div id=”YMapsID” style=”height:400px; width:600px;”></div>

</body>

</html>

Вы можете использовать данный пример кода для тестирования работы. При необходимости изменить координаты центра карты (44.0,56.32811) и уровень масштаба (13).

Все ранее полученные Вами ключи Вы всегда можете узнать на специальной странице http://api.yandex.ru/maps/keyslist.xml

Для тестирования и выполнения различных упражнений с API Яндекс.Карт на домашнем компьютере Вам будет необходимо установит локальный веб-сервер. Как это проще всего сделать я описал в специальной заметке в разделе База знаний.

воскресенье, 12 июля 2009 г.

Доработка плагина Яндекс.Карт для Joomla – продолжение

В заметках на своем блоге я уже рассказывал Вам о плагине Яндекс.Карт для Joomla – смотрите «Плагин Яндекс.Карт для Joomla» и «Доработка плагина Яндекс.Карт для Joomla».


В двух заметках я продолжу тему, как можно доработать данный плагин.


Мы добавим две новые возможности – это форму поиска по карте и загрузку файлов в формате YMapsML.


Нам для работы будут необходимы два файла – это plugin_yandexmap.xml и plugin_yandexmap.php


Мы их будем продолжать редактировать.


Используя ftp-клиент мы заходим на сервер Вашего сайта в папку, где установлена Joomla.


Находим там папку plugins, а в ней папку content.


В этой папке находиться два файла: plugin_yandexmap.xml и plugin_yandexmap.php.


Добавим сначала строку поиска по карте.


25 июня 2009 года вышла новая версия API Яндекс.Карт 1.1.0


В этой версии появился новый элемент управления, размещаемый на карте, YMaps.SearchControl  – поиск по карте.


Его мы и будим использовать.


Открываем сначала файл plugin_yandexmap.xml в любом текстовом редакторе или Блокноте.


Находим в нем следующие строки:








Здесь прописываются элементы формы для добавления обзорной миникарты в режиме администрирования.







Joomla - Профессиональный сайт за один день
86 видеоуроков, 12 часов 46 минут посвящены лучшей системе для создания сайтов - Joomla!



И перед ними вставляем следующий код:








Он служит для дополнения элементов формы добавления строки поиска в режиме администрирования.


Сохраняем измененный файл.


После этого открываем файл plugin_yandexmap.php.


С начала меняем версию API.


Для этого находим строку



$doc->addScript('http://api-maps.yandex.ru/1.0/index.xml?key='.$my_params['apiKey']);

и изменяе значение версии с 1.0 на 1.1.


В результате



$doc->addScript('http://api-maps.yandex.ru/1.1/index.xml?key='.$my_params['apiKey']);

Находим в нем строки



if (intval($my_params['showMiniMap'])) {
$mmControl = 'var minimapControl = new YMaps.MiniMap();';
$mmControl .= 'map.addControl(minimapControl);';
} else {
$mmControl = '';
}

И передними добавляем следующий код:



if (intval($my_params['showSearchControl'])) {
$searchControl = 'map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.BOTTOM_LEFT, new YMaps.Size(5, 20)));';
} else {
$searchControl = '';
}

Еще ищем строку '.$mmControl.' и перед ней добавляем строчку  '.$searchControl.'


Сохраняем измененный файл.


Теперь необходимо зайти на сайт и на странице администрирования в менеджер плагинов и выбираем плагин Content - Yandex Maps.


Открываем его для редактирования.


В правой части окна, среди параметров должен появиться новый YMAP_SHOWSEARCHCONTROL и два переключателя состояния YMAP_YES и YMAP_NO.


Отмечаем состояние YMAP_YES и сохраняем изменения.


Открываем страницу с Яндекс.Картой. На карте должен появиться новый элемент управления YMaps.SearchControl.


Доработка плагина  Яндекс.Карт для Joomla-строка поиска по карте

Скачать измененные файлы: plugin_yandexmap.xml и plugin_yandexmap.php


Посмотреть пример в действии


В следующей заметке мы добавим возможность подгружать на карту файл в формате YMapsML.

среда, 1 июля 2009 г.

Отображение разнородных объектов на Яндекс.Картах

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



Как работать с группами объектов, удалять и добавлять их на Яндекс.Картау показано в двух видеороликах по материалам Я.Субботника в Киеве, прошедшего 25 апреля 2009 года.



Александр Тармолов. Мастер-класс: Отображение разнородных объектов на Яндекс.Картах. Часть 1





Александр Тармолов. Мастер-класс: Отображение разнородных объектов на Яндекс.Картах. Часть 2


воскресенье, 28 июня 2009 г.

Использование Static API Яндекс.Карт

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

Для этих случаев существует возможность размещения статического изображения Яндекс.Карт - Static API Яндекс.Карт.

В ответ на HTTP-запрос, передаваемый посредством URL с параметрами, API возвращает изображение с картой.

В запросе указываются требуемые слои карты, ее центр и область показа, размер карты и уровень масштабирования. Также на карте можно отобразить метки и ломаные линии.

Также как, для использования обычным API Яндекс.Карт, для возможности пользоваться Static API Яндекс.Карт, необходимо получить уникальный API-ключ.

Как уже говорилось, Static API формирует изображение карты в соответствии со значениями параметров, передаваемых сервису в URL следующего формата:

http://static-maps.yandex.ru/1.x/?{параметры URL}

Строка {параметры URL} представляет собой последовательность пар вида {имя параметра}={значение параметра}, разделенных символом амперсанда (&).

Приведу пример запроса изображения карты Нижнего Новгорода с нумерованной меткой:

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&size=450,450&z=15&l=map&pt=44.017152,56.315455,pmwtm1&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты Нижнего Новгорода с нумерованной меткой

Давайте разберем какие параметры здесь задаются.

Параметр ll – задает долготу и широту центра карты в градусах, в нашем примере ll=44.017152,56.315455

Следующий параметр size – указывает ширину и высоту запрашиваемого изображения карты в пикселях, в примере size=450,450

Максимально допустимый размер изображения карты составляет 600x450 пикселов.

Параметр z – задает уровень масштабирования карты (0-17), в примере z=15

Параметр l – перечень слоев, определяющих тип карты: map (схема),  sat (спутник) и  sat, skl(гибрид). В примере l=map

Параметр pt - содержит описание одной или нескольких меток, которые требуется отобразить на карте.

Описание каждой метки содержит ее координаты (долготу и широту), а также сведения о ее внешнем виде (включая стиль, цвет, размер и текст метки). Описания меток перечисляются через тильду (~).

В нашем примере pt=44.017152,56.315455,pmwtm1

Параметр key – API-ключ Яндекс.Карт

Кроме перечисленных параметров существует еще один – pl, который содержит описание одной или нескольких ломаных, которые требуется отобразить на карте.

Описание ломаной содержит координаты ее вершин (либо перечисленные через запятую, либо представленные в закодированном виде), а также сведения о цвете и толщине линии. Описания ломаных перечисляются через тильду (~).

И парамер spn, который задает протяженность области показа по долготе  и широте в градусах, показываемый во круг центра карты.

Static API подбирает уровень масштабирования таким образом, чтобы заданный участок был виден на изображении целиком.

Приведу пару примеров.

Область показа 0.3х0.3 градуса

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&spn=0.3,0.3&size=450,450&l=map&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - Область показа 0.3х0.3 градуса

Область показа 5х5 градусов

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&spn=5,5&size=450,450&l=map&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - Область показа 5х5 градусов

Разберем более подробно, как задаются параметры для отображения меток и ломанных.

Параметр pt служит для отображения на изображении карты одну или несколько меток (до 100).

Описание каждой метки записывается по следующей схеме:

{долгота},{широта},{стиль}{цвет}{размер}{текст}

Стиль обозначается pm.

Цвет метки может принимать следующие значения:

wt - белый;

do - темно-оранжевый;

db - темно-синий;

bl - синий;

gn - зеленый;

gr - серый;

lb - светло-синий;

nt - темная ночь;

or - оранжевый;

pn - розовый;

rd - красный;

vv - фиолетовый;

yw - желтый.

Размер: s - маленький; m - средний; l - большой.

В качестве текста может выступать число от 1 до 99.

Если метка содержит недопустимые символы (любые, кроме чисел от 1 до 99), то она не отображается.

Также, если координаты метки выходят за границы заданной области показа, то метка не показывается на карте.

Пример изображения карты с несколькими метками.

http://static-maps.yandex.ru/1.x/?ll=43.979459,56.291908&size=450,450&z=11&l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3~44.073827,56.308056,pmrdm4~43.871158,56.347345,pmrdm5&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты с несколькими метками

Для отображения ломаных служит параметр pl.

Возможно отобразить одну или несколько ломанных описания которых перечисляются через тильду (~).

Описание ломаной имеет следующий формат:

с:{цвет},w:{толщина},{вершины}

Цвет линии задается в виде шестнадцатиричного числа в формате RGBA (вида  0xFFFFFFFF). Первые 6 символов задают цвет в системе RGB, последующие два - прозрачность линии. Значение прозрачности лежит в диапазоне от 00 (прозрачная) до FF (непрозрачная).

Толщина линии задается в пикселах.

Если цвет и толщина линии не заданы, то используется сиреневая полупрозрачная линия толщиной 5 пикселов ( 8822DDС0).

Координаты вершин ломаной линии могут задаваться двумя различными способами: простым перечислением через запятую  ( Долгота1,Широта2,...,ДолготаN,ШиротаN) или в виде base64-последовательности (требуется кодирование координат вершин).

Static API позволяет одновременно задать не более 5 ломаных, при этом общее количество вершин не должно превышать 100.

Пример формирования запроса на изображение карты с ломаной линией.

В примере цвет линии красный FF0000, полупрозрачная – C0, толщиной w:4 писеля

http://static-maps.yandex.ru/1.x/?l=map&pl=c:FF0000C0,w:4,43.996284,56.329571,43.996143,56.329735,43.996086,56.329918,43.995998,56.330093,43.995888,56.330269,43.995392,56.330330,43.995804,56.330345,43.995522,56.330448,43.995716,56.330593,43.995590,56.330795,43.995449,56.330963,43.994267,56.330708,43.993912,56.330681,43.993576,56.330658,43.993248,56.330585,43.992897,56.330490,43.992626,56.330372,43.992298,56.330292,43.991982,56.330242,43.991653,56.330238,43.991322,56.330242,43.990993,56.330196,43.990688,56.330128,43.990322,56.330082,43.990002,56.330036,43.989723,56.329941,43.989353,56.329819,43.989044,56.329685,43.988747,56.329578,43.988583,56.329407,43.988213,56.329300,43.987789,56.329205,43.987343,56.329136,43.986950,56.329079,43.986588,56.329029,43.986328,56.328899,43.985947,56.328819,43.985538,56.328747,43.985191,56.328667,43.984882,56.328602,43.984604,56.328491,43.984333,56.328381,43.984047,56.328243,43.983761,56.328136,43.983440,56.328045,43.983082,56.327847,43.982815,56.327694,43.982525,56.327583,43.982212,56.327461,43.981937,56.327362,43.981644,56.327236,43.981365,56.327129,43.981094,56.327026,43.980770,56.326893,43.980480,56.326771,43.980251,56.326622,43.980110,56.326443,43.980019,56.326241,43.979836,56.326092,43.979626,56.325954,43.979378,56.325832,43.979130,56.325699,43.978851,56.325588,43.978554,56.325508,43.978218,56.325516,43.977921,56.325619,43.977646,56.325733,43.977375,56.325836,43.977093,56.325951,43.976841,56.326065,43.976604,56.326191&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты с ломаной линией

В Static API имеется возможность позиционирования карты при помощи меток и ломаных.

Если на изображении карты указана хотя бы одна метка или ломанная, а значения для центра карты (параметр  ll), области показа (параметр  spn) или уровня масштабирования (параметр  z) не указаны, то Static API подберет их значения так, чтобы все метки и ломаные были видны на карте.

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

Изменим набор параметров примера изображения карты с несколькими метками удалив от туда параметры ll, size и z.

http://static-maps.yandex.ru/1.x/?l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3~44.073827,56.308056,pmrdm4~43.871158,56.347345,pmrdm5&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - возможность позиционирования карты при помощи меток

Уберем от туда метки 4 и 5

Получим

http://static-maps.yandex.ru/1.x/?l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - возможность позиционирования карты при помощи меток (без меток 4 и 5)

Новая версия API Яндекс.Карт 1.1.0

25 июня 2009 года опубликована новая версия API Яндекс.Карт.


В версии 1.1. доступны новые возможности:



  • построение автомобильных маршрутов (только для Москвы);

  • рисование полигонов;

  • контрол "строка поиска" размещаемый поверх карты;

  • редактирование графических объектов (полилиний и полигонов);

  • использование собственной системы координат;

  • расширена схема наследования стилей;

  • макеты (собственное оформление и поведение иконок, хинтов, балунов).


С полным списком нововведений и исправлений можно ознакомиться по адресу http://api.yandex.ru/maps/jsapi/whatsnew.xml


Версия 1.1. не совместима со старыми версиями (все версии ветки 1.0.). Она отличается от предыдущих не только добавленными возможностями, но и изменениями в структуре классов, объектов и методов.


Все сервисы созданные на API 1.0. будут продолжать работать, никаких изменений производить не требуется.


Ветка версий 1.0. больше не будет развиваться и дополняться, будут лишь устраняться критические ошибки.