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

понедельник, 22 июня 2009 г.

Плагин Google Maps для Joomla

На страницах данного блога я уже писал о плагине Яндекс.Карт для Joomla, в этой заметке я хочу рассказать вам о плагине Google Maps для Joomla.

С начала я расскажу об основных возможностях плагина и после этого рассмотрю несколько примеров его использования.

Скачать сам плагин можно по адресу: http://joomlacode.org/gf/project/mambot_google1/frs/

Данное расширение представляет собой плагин (мамбот) для отображения одной или нескольких карт Google в содержании страниц, модулей и компонентов системы Joomla верий 1.0.x и 1.5.x.

После стандартной для Joomla процедуры установки нужно активировать данное расширение в менеджере плагинов.

Щелкнув по ссылке с названием данного плагина, откроется окно для установки его параметров .

У него много различных параметров, но для начала его использования нам понадобятся только два - Активировать (Enabled) для активации плагина и Google API key в правой части окна, для ввода ключа к API Google Maps.

Сохраняем сделанные настройки.

Для добавления карты в нашу статью нужно в её текст добавить специальный тег { mosmap}.

При просмотре страницы на сайте в место него будет расположено изображение карты с параметрами по умолчанию (задаются в настройках плагина).

Тег mosmap может содержать в себе параметры отображения карты.

Я перечислю основные из них.

width, height - параметры ширины и высоты окна карты, могут задаваться как в пикселях, так и в процентах;

lat, lon - значение широты и долготы центра карты;

zoom - значение масштабного уровня карты;

zoomNew - когда равно 1 при двойном клике мышью происходит центрирование и масштабирование в данной точке, а при равном 0 только центрирование ( по умолчанию - 0);

zoomType - тип элемента масштабирования (Small - малый или Large - большой, None - отсутствует);

mapType - начальный тип карты (Normal - обычная по умолчанию, Satellite - спутник, Hybrid - гибридное, Terrain -ландшафт );

showMaptype - отображать или нет переключатель типа карты;

overview - показывать или нет обзорную карту (1 - показывать, 0 - нет);

text - текст для маркера в балуне, если хотите чтобы текс не отображался наберите text='', для добавления гиперссылок в текст используйте код следующего формата <a href=linkAddress target=linkTarget title=linkTitle>linkName</a>, не используйте двойные кавычки.

tooltip - использовать Tooltip, когда мышь наводиться на маркер, не используйте html;

marker - открывать или нет информационное окно для маркера на начальном этапе загрузки карты (1- открывать, 0 - нет);

icon - для задания пути (url) к файлу изображения пользовательской иконки;

kml - для задания пути (url) к файлу в формате KML ;

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

Чтобы Вам окончательно стало понятно как с данным плагином работать рассмотрим несколько примеров.

Пример 1. Простая карта с маркером.

Для этого в страницу Вы должны добавить следующую строчку:

{mosmap width='500'|height='400'|lat=' 56.3333|lon='44.0'|zoom='10'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|overview='0'|text='Нижний Новгород'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Простая карта с маркером - Google Maps для Joomla

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

Пример 2. Карта со своим значком для иконки и html-текстом в балуне.

Добавим строку вида:

{mosmap width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Карта со своим значком для иконки и html-текстом в балуне - Google Maps для Joomla

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

Пример 3. Карта с использованием KML-файла.

Для этого добавим строку вида:

{mosmap kml='http://webmap-blog.ru/files/kinoteatrs.kml|'overview='0'}

Загрузив страницу в браузере, мы увидим следующее

Карта с использованием KML-файла - Google Maps для Joomla

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

Пример 4. Карта во всплывающем окне.

Для этого добавим строку вида:

{mosmap lightbox='1'|lbxwidth='600px'|lbxheight='600px'|show='0'|align='none|width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Карта во всплывающем окне - Google Maps для Joomla

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

Все примеры на одной странице здесь

Более подробную информацию о плагине и примеры его использования можно найти по адресу http://tech.reumer.net/Google-Maps/Demo-Google-Maps/