Карты в MODx Evo на базе PlaceTV

Нередко на сайте возникает необходимость связать некий объект с географическими координатами и указать на карте его местоположение значком. Это удобно, если например вы описываете на сайте отель, объект недвижимости, сеть магазинов.

Реализовать такую возможность в MODx достаточно легко, разделив задачу на две части:

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

Приступая к решению первой части задачи вспомнилось, что не во всех уголках мира качество карт того или иного сервиса одинаково. Поэтому было решено реализовать поддержку карт Google, Yandex, OSM и 2GIS. А чтобы всем этим было удобно и привычно управлять, была написана javascript-библиотека ("обертка") на базе Google Maps API 3-й версии, которая поддерживает слои Yandex, OSM и 2GIS. Так родилась библиотека place.js на особенностях которой я не буду останавливаться в этой статье.

Интегрируем карту в MODx Evolution

Итак, чтобы добавить возможность указания координат на карте, воспользуемся возможностью MODx Evolution создавать TV типа "Custom input".

Заранее скачаем репозиторий PlaceTV и распакуем его в корень сайта. В результате должна появиться папка /assets/tvs/placetv с файлами репозитория. Далее создаем в MODx новый TV,

  • в поле Возможные значения вставляем строчку "@INCLUDE/assets/tvs/placetv/placetv.php",
  • а в поле Значение по умолчанию вставляем координаты по-умолчанию, например "43.43921,39.937363".

Вот и все, теперь наш MODx поддерживает карты.

Карта в MODx

Работа с картой в системе управления достаточно проста: перетаскиваем маркер в нужную позицию или вводим в поле координат адрес и жмем "Найти".

Геокодинг на карте в MODx

Выводим карту на сайте

Теперь осталось выполнить вторую часть задачи - вывести карту на самом сайте.

Если вам необходимо вывести один единственный маркер на карте, необходимо подключить в шаблоне библиотеки Google Maps и Place. Для этого в разделе head добавляем две строчки:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="assets/tvs/placetv/js/place.js"></script>

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

<div id="map" style="width:300px;height:300px;background-color:#eee"</div>
<script type="text/javascript">
 window.onload = function () {
   var point = new google.maps.LatLng([*latlng*]);
   place = new Place('map', point, 16);
   // Если нужны только определенные карты, например 2Гис и Народная
   // place = new Place('map', point, 16, '2gis', ['2gis', 'yandex.p']);
   var marker = place.createMarker(point, '[*pagetitle*]', '[*description*]');
 }
</script>

Здесь предполагается, что имя TV-параметра координаты - latlng.

Как видите, работа с картами в MODx Evolution совсем не сложна и может быть легко интегрирована.
Советы по доработке PlaceTV с удовольствием приму на GitHub или тут в комментариях.

Изменения в версии от 16.08.13

  1. Упразднена функция createMap, ее параметры теперь необходимо передавать в конструктор Place
  2. Добавлена возможность указывать карту по-умолчанию, а также перечень и порядок карт, доступных для пользователя в списке
  3. Добавлены новые карты: Яндекс.Народная, Яндекс.Спутник
  4. В репозиторий добавлен сниппет с помощью которого добавить карту на сайт станет совсем просто
  5. Реализована поддержка геокодера Яндекса. В функции Place.geocodeMarker появился третий параметр, которым указывается геокодер: "google" или "yandex".
comments powered by Disqus