Mapex2 - Яндекс.Карты с редактором на вашем сайте

Многим знакомо дополнение mapex для работы с яндекс.картами www.createit.ru/blog/modx/2012/mapex-2-0-yandex-maps-for-modx-revolution/, оно было создано еще в 2012 году и тех пор оставалось практически в таком же виде.

Некоторое время назад я принял решение о его дальнейшем развитии, в связи с чем значительно переписал, выложил исходники на github, написал документацию. Ну и раз пошла такая пьянка =), что в последнее время появилось много интересующихся этой темой, я себя поторопил и решил все выложить.

Платно или бесплатно?

Я планирую сделать этот компонент платным с небольшой ценой, выложив на modstore.pro/, чтобы оставалась мотивация для его развития.

Если вы считаете, что платить тут не за что — исходники открыты. Кроме того, в сети без проблем можно найти пакет с прошлой версией компонента, который тоже более чем работоспособен.

Совместимость с прошлой версией

По идее должно быть все совместимо, так как формат хранения данных я не менял, но бекап все равно обязателен (!). Хотя если у вас стоит прошлая версия mapex2 и она вас устраивает — может вам и не нужно обновляться?

Где скачать?

Компонент доступен в магазине ModStore modstore.pro/packages/maps/mapex2

Документация доступна здесь: docs.modx.pro/components/mapex2

Документация

Компонент добавляет в MODx новый тип поля ввода — Яндекс.Карта (mapex.yandexMap)

Возможности

Компонент позволяет рисовать на этой карте следующие объекты:
1. Точки. Произвольное количество точек, для каждой задается Текст, Цвет (из предустановленных в Яндекс.Картах), Текст балуна
2. Линии. Произвольное количество линий, для каждой задается Цвет линии, Ширина линии, Прозрачность, Текст балуна
3. Многоугольник. Произвольное количество многоугольников, для каждого задается Цвет границы, Цвет заливки, Ширина линии, Прозрачность, Текст балуна
3. Маршрут. Можно добавить прокладку на карту маршрута (одного) между двумя точками.

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

В админке реализован поиск объектов на карте по адресу или названию.

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

Демонстрация работы

Ребята из OpenModx записали видео с демонтрацией, 13 минут, зато все подробно описано:

Сниппеты

mapexMap — рисует карту во фронтенде, используя API Яндекс.Карт версии 2.0.

Параметры сниппета (через | даны значения по-умолчанию):

&tvName — Имя TV параметра с картой. Используйте совместно с параметром &resource
&resource | текущий ресурс — Id ресурса с картой. Используйте совместно с параметром &tvName
&map — json строка с картой. Альтернативный способ указать, какую карту рисовать. Если этот параметр указан, то &tvName и &resource не используются. Пример вызова: [[mapexMap? &map=`[[*tvMap]]`]]
&mapId | mapexMap — Id карты. Используется при генерации javascript. Если на одной странице карт несколько — укажите разные mapId
&width | 500px — Ширина карты, например 500px или 100%. Обязательно укажите единицы измерения.
&height | 400px — Высота карты
&containerCssClass — Можно указать css класс блока, в который обернута карта
&mapTpl | mapex.Map.Tpl — Основной чанк для вывода карты
&placemarkTpl | mapex.Placemark.Tpl — Чанк для вывода точки
&polygonTpl | mapex.Polygon.Tpl — Чанк для вывода многоугольника
&polylineTpl | mapex.Polyline.Tpl — Чанк для вывода линии
&routeTpl | mapex.Route.Tpl — Чанк для вывода маршрута
&controls | mapTools,typeSelector,zoomControl,searchControl,miniMap,trafficControl,scaleLine | Набор элементов управления, которые будут на карте. См. tech.yandex.ru/maps/doc/jsapi/2.0/dg/concepts/controls-docpage/
&includeJS | 1 — Подключать или нет на страницу скрипт Яндекс.Карт

mapexMap21 — рисует карту во фронтенде, используя API Яндекс.Карт версии 2.1.

Параметры сниппета практически идентичны, в таблице даны только лишь отличия:

&mapTpl | mapex.Map21.Tpl — Основной чанк для вывода карты
&placemarkTpl | mapex.Placemark21.Tpl — Чанк для вывода точки
&polygonTpl | mapex.Polygon21.Tpl — Чанк для вывода многоугольника
&polylineTpl | mapex.Polyline21.Tpl — Чанк для вывода линии
&routeTpl | mapex.Route21.Tpl — Чанк для вывода маршрута
&controls | default — Набор элементов управления, которые будут на карте. См. tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/

Настройки компонента

В настройках компонента (см. Настройки системы, пространство mapex2) можно задать начальное положение, масштаб и тип карты в административном интерфейсе, а также скрыть или показать служебное поле, в котором хранится состояние карты в json формате.

Компонент для своей работы требует библиотеку jquery. В настройках можно указать, откуда загружать ее. Если у вас в админке вдруг есть еще какой либо компонент, использующий jquery, то могут быть проблемы из-за подключения jquery 2 раза, в этом случае просто очистите настройку mapex2_manager_jquery_url.

Поддержка API Яндекс.Карт

Административный интерфейс компонента использует API Яндекс.Карт версии 2.0. К сожалению, на текущий момент перевести его на корректную работу с более свежим API 2.1 не удалось, так как многое в API было изменено.

Во фронтенде реализованна поддержка API Яндекс.Карт как версии 2.0 (сниппет mapexMap), так и 2.1 (сниппет mapexMap21).

Единственный нюанс — в версии API 2.1 поддерживаются мультимаршруты, но из-за работы административного интерфейса на младшей версии API, данная возможность в компоненте не используется.

{$_modx->runSnippet('mapexMap', [
		'map' => $address,
		'width' => '100%',
		'height' => '450px',
	])}

<div class="modal" id="dilerMap[[+idx]]">
    <div class="title" style="text-transform: uppercase;">[[+title]] на карте</div>
    <p>[[+description]]</p>
    <div class="rf">
        <div style="margin-top: 20px; width: 100%; height: 300px;">
            <script src="//api-maps.yandex.ru/2.1/?load=package.full&lang=ru-RU" type="text/javascript"></script>
            [[!mapexDrawMap? 
                &map=`[[+yaMap]]`
                &mapId=`mapexMap[[+idx]]`
                &mapWidth=`100%`
                &mapHeight=`100%`
                &controls=`zoomControl`
                &includeJs=`0`
            ]]
        </div>
    </div>
</div>

...line 129, near '{"coords":' <- there

{"coords":{"center":[60.00804686391519,30.2788698134918],"zoom":16},"type":"yandex#map","placemarks":[{"coords":[60.00789644354394,30.279116576721165],"params":{"color":"darkgreen","iconContent":"","balloonContentBody":"","balloonContentHeader":""}}],"polygons":[],"lines":[],"routes":[]}