Компонент и плагин для использования Яндекс.Карт с Joomla версии 1.6. и 1.7

На страницах своего блога я писал о компоненте Яндекс.Карт для Joomla 1.5 и несколько статей о его доработке 1, 2, и 3.

Время идет и CMS Joomla активно развивается, в начале этого 2011 года появилась версия 1.6, а не так давно версия 1.7.

В этой заметке я хочу рассказать Вам о компоненте и плагине для использования Яндекс.Карт с Joomla версии 1.6. и 1.7 — Zh YandexMap.

Страница с описанием компонента на сайте разработчика

Также на сайте есть подробное описание компонента.

И так в начале нам нужно скачать архив с самим компонентом и плагин.

Установить их стандартным способом через Менеджер расширений (Extension Manager).

Переходим в раздел управления компонентом и нажимаем на кнопку Параметры (Options).

Вводим ключ к API Яндекс.Карт в поле Map API Key и сохраняем.

После этого в разделе Maps компонента создаем необходимую карту.

Даем название нашей карты в поле Title

Задаем размер окна карты (Width и Height ) и ее центр (Latitude и Longitude), перемещая метку по карте в нижней части окна.

Начальный уровень масштаба — Zoom.

Тип карты по умолчанию Map Type .

Если Вы хотите отобразить на карте файл с данными в формате-YMapsML, введите полный путь к нему в поле YmapsML-document.

Обратите внимание на поле Object Manager for Placemarks, оно обеспечивает вывод маркеров только при определенном масштабе, диапазон которого указывается у группы маркеров.

Иными словами, Вы указываете на маркере к какой группе он принадлежит.

Соответственно, на экране ввода/корректировки группы маркеров указывается минимальный и максимальный масштаб.

Данная функциональность работает только если не используется управление маркерами через список групп (поле Placemark Control = No).

Группа элементов Map Controls отвечает за показ элементов управления на карте.

Следующая группа элементов Control Positions используется для указания месторасположения элементов управления на карте.

Еще одна группа элементов Placemark Groups отвечает за управление маркерами с помощью списка групп.

Для создания меток в компоненте существует специальный раздел Placemarks.

Переходим в одноименную вкладку и нажимаем кнопку Создать (New).

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

Задаем название метки в поле Title, описание в поле Description, показывать или нет метку на карте — Published.

Также в поле Map Title выбираем название карты на которой будет отображаться метка.

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

Для использования своего изображения в качестве значка метки необходимо поместить файл с изображением в папку установки Joomla/administrator/components/com_zhyandexmap/assets/icons/.

Компонент автоматически подхватит изображения при выборе типа метки.

Единственное требование – чтобы расширение файла было .png т.е. в нижнем регистре, т.к. наименования изображений хранятся в БД без расширения, и оно дописывается при выводе.

Координаты установки метки задаются в полях Latitude и Longitude, их удобно задавать путем перетаскивания метки по карте (значения автоматически подставляются в поля формы) или кликая мышкой на необходимом месте на карте.

Параметр Open baloon указывает показывать или нет балун на карте в место метки сразу после загрузки карты.

Поля URL Site и Site Name служат для задания ссылки на сайт или страницу в балуне.

Поле URL Image необходимо для добавления изображения в балун.

Поле Placemark Group служит для выбора группы меток, к которой будет принадлежать данная.

И поле Category — для выбора категории метки.

Если Вам необходимы дополнительные поля для дальнейшей обработки меток, Вы их можете задать в группе Hidden Attributes for Customization.

Метки можно разбивать на категории используя вкладку Categories.

Для категории можно задавать наименование, родителя (категории могут быть вложенными друг в друга), опубликована или нет, права доступа и автора.

Также можно создавать группы меток , для этого необходимо перейти на вкладку Placemark Groups и создать новую группу.

Перечислю только уникальные параметры.

Icon Type – иконка для группы, позволяет выбрать значок для отображения всех меток группы, можно использовать свои значки, технология аналогична параметру Icon Type для меток.

Override Placemark Icon— признак переопределения иконки на маркере, т.е. когда маркер выводится, то его иконка может быть переопределена иконкой группы

Active in Placemark Group – активна ли группа в списке групп, т.е. маркеры будут сразу же выведены

Min Zoom for Object Manager – минимальный масштаб, при котором будут выведены маркеры этой группы при включенном на карте Object Manager. Обратите внимание, что если активно управление маркерами через список групп, то данная функциональность отключена. Иными словами, если выводится список групп и пользователь имеет возможность кликая по определенным группам выводить/прятать маркеры этой группы на карте, то возможность вывести маркеры этой группы только при определенном масштабе у пользователя отсутствует.

Max Zoom for Object Manager – максимальный масштаб, при котором будут выведены маркеры этой группы при включенном на карте Object Manager.

Category — указать категорию к которой пренадлежит группа.

Существует в компоненте Zh YandexMap возможность создания маршрутов, закладка Routes, но на данный момент данная функциональность присутствует в API и отмечено, что работает она только в Москве, Московской области и Украине.

Последняя закладка это — Paths, которая служит для прокладывания пути с привязкой к конкретной точке (удобна для указания различных способов проезда к какому либо объекту на карте).

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

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

Поле Color служит для задания цвета ломаной линии, а поле Width — тольщины.

Как видите компонент имеет большие возможности для реализации сложных карт.

Вывести созданную карту можно создав отдельный пункт меню с типом Map и указав в параметре Map Title нужную карту.

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

После установки нужно активировать его, для вставки карты в статью добавьте код {zhyandexmap:NNN}, где NNN — id -карты в списке карт в настройках компонента, например для моей карты это будет {zhyandexmap:1}.

Для вставки карты в модуль необходимо создать модуль типа Custom HTML, а ширину карты в ее параметрах указать равной 0, что соответствует width: 100%.

  • Гость: Скажите ПЖ, а насколько сложно данный компонент переписать для использования OSM карты????
  • Гость: Лучше для OSM карты использовать компонент того же автора <a href="http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/maps/16900" rel="nofollow">Zh GoogleMap</a>, тогда нужно совсем немного доработать компонент, используя пример из заметки <a href="http://webmap-blog.ru/obzors/znakomstvo-s-proektom-openstreetmap" rel="nofollow">Знакомство с проектом OpenStreetMap</a>. Дело в том, что Яндекс.Карты используют картографическую проекцию отличную от применяемой в Google Maps и OSM. Поэтому, если использовать компонент Zh YandexMap, то придется еще пересчитывать координаты тайлов карты для отображения.
  • Гость: Перелапачиваю =) компонент
  • Гость: Большое спасибо за описание компонента, у меня так красиво не получилось :) А также за ссылку на Вашу статью про OSM, благодаря которой добавил этот слой в компонент.
  • Гость: Скажите, а как встроить карту в стандартный компонент "контакты"?
  • Гость: Не могу настроит компонент так, чтобы отображались метки на карты сайта. Все делаю по инструкции, но метки не появляются(( И правильно ли я понял, что маркер и метка одно и тоже?
  • Гость: огромное спасибо за плагин! Ни в какое сравнение не идет с GoogleMaps! Супер! Все просто и понятно! Советую всем)
  • Гость: У меня пишет "Неправельный ключ" хотя трижды сверил ключ который получил на яндексе и тот который ввел. Может ли такое быть если сайт на локалхосте еще? или есть подводные грабли?
  • Гость: На localhost должен работать любой ключ, а если сайт на локальной машине имеет домен отличный от localhost, то нужно получать ключ для него. Подробнее о ключах <a href="http://api.yandex.ru/maps/jsapi/doc/dg/tasks/quick-start.xml" rel="nofollow">здесь</a>
  • Гость: Спасибо большое.... Все заработало...
  • Гость: ДЕнь добрый. Ввел ключ, создал карту, создал меню и указал нужную карту, ширина/высота =0, на целевой страничке место под карту выделено, а самой карты нет :( куда копать? В материал тоже пробовал вставлять {zhyandexmap:1}. джумла 1.7
  • Гость: А ширину и высоту карты выставили, их нужно обязательно указывать в пикселях
  • Гость: пробовал и указывать значения и по нулям. получаю такой код /* map.getMaxZoom()) { map.setZoom(map.getMaxZoom()); } }); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ToolBar()); var objectManager = new YMaps.ObjectManager(); map.addOverlay(objectManager); map.openBalloon(new YMaps.GeoPoint(27.581667266786106, 53.91591105587528), "mystyle"); }); /*]]&gt;*/
  • Гость: обрезало код... див такой получаю т.е. ширина высота норм задана.
  • Гость: нашел зацепку. со стандартным шаблоном работает, с моим нет...
  • Гость: проблема решена.
  • Гость: Скажите пожалуйста, когда модулем вывожу в меню, карта отображается, а когда в статье просто отображается код этот... пробовал и без редактора, все равно... {zhyandexmap:NNN}
  • Гость: Для отображения карты в статье необходимо установить плагин, скачать <a href="http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/maps/16912" rel="nofollow">отсюда</a>, а затем активировать его.
  • Гость: Добрый день! Подскажите как изменить ширину всплывающего окна маркера. У меня по умолчанию почему-то оно равно ширине карты. Где и как его можно изменить? Заранее благодарен за ответ!
  • Гость: Добрый день! Спасибо за описание, компонент действительно очень мощный, лучший из всех которые я тестил ... Есть вопрос: Подскажите с помощью данного решения можно ли вывести список меток под картой? Я читал Ваши статьи по этой теме - и смотрел примеры создания таких карт и такого функционала с помощью CSV файла и базы данных...