[YandexMaps] Создаём объекты на Яндекс Картах из ресурсов со множеством опций

YandexMaps — Компонент позволяет создавать Яндекс Карту и размещать на ней список объектов (1 объект = 1 ресурс). Можно вывести одиночный объект на карте по id ресурса.
Для добавления карты к ресурсу нужно всего лишь создать TV с типом «YandexMaps» (появится после установки компонента).
Чтобы указать местоположение объекта нужно просто кликнуть на том месте на карте в «дополнительных полях» ресурса.
Так выглядит TV поле в админке

Так выглядит карта со множеством объектов во фронтенде

Параметры
&tpl — Основной шаблон.
&tplFiltersItemsWrapper — Шаблон обёртка вывода ссылок фильтров для отображения/скрытия объектов на карте.
&tplFiltersItems — Шаблон вывода ссылок фильтров для отображения/скрытия объектов на карте.
&idMap — Id карты для html разметки и JS инициализации.
¢erCoords — Координаты для центра карты.
&zoom — Zoom карты (приближение).
&tvCoords — Имя TV поля с типом yandexMaps (в которое будем записывать координаты объекта).
&tvAddress — Имя TV поля с адресом объекта (если хотим, чтобы компонент сам определил координаты для каждого объекта по его адресу в ТВшке).
&addressPrefix — Префикс в начало адреса. Если в TV поле «tvAddress» все адреса указаны без обозначения страны и города. Например: «Россия, Москва, ».
&objectsTypesJSON — JSON строка с типами объектов, родительскими id, тайтлами, иконками или пресетами, а также субфильтрами по TV (и назначение каждому варианту ответа иконки или пресета).
&id — Id ресурса для вызова одиночного объекта на карте. Например: [[*id]].
&markerIcon — Иконка для одиночного объекта. Например: "/images/map_marker.png".
&markerPreset — Ключ стиля для одиночного объекта. Например: «islands#yellowStretchyIcon» или «islands#violetDotIcon».
&markerPresetText — Текст для одиночного объекта на preset. Например: «Плавательный бассейн».
&markerPresetFieldText — Поле, откуда извлекать текст для одиночного объекта на preset. Например: «menutitle».
&fieldForBalloonContent — Какое поле ресурса использовать для описания в balloon.
&fieldForHint — Какое поле ресурса использовать для подсказки при наведении на объект.
&showMoreLink — Ставить ли ссылку «подробнее» на ресурс в конец текста в balloonContent.
&showMoreLinkTpl — Шаблон ссылки «подробнее» на ресурс в конце текста в balloonContent.
&classMapBlock — Класс для блока карты.
&styleMapBlock — Стиль для блока карты.
&idFiltersForm — Id для формы фильтров (вкл/выкл) гео-объектов.
&classFiltersBlock — Класс для блока ссылок фильтров (вкл/выкл) гео-объектов.
&styleFiltersBlock — Стиль для блока ссылок фильтров (вкл/выкл) гео-объектов.
&classFiltersItem — Класс для ссылки фильтра (вкл/выкл) гео-объектов (нужен для отслеживания клика JSом).
Инструкция
- Установите компонент. Уже должен быть установлен pdoTools.
- Добавьте TV поле (например: «coords»), у которого на вкладке "Параметры ввода" укажите тип: "yandexMaps":

- Укажите это поле для шаблонов, которые будут присвоены ресурсам-объектам на карте.
- Добавьте ресурс, у которого укажите шаблон, о котором говорилось выше. На вкладке "Дополнительные поля" кликните на том месте карты, на котором находится нужный объект. При необходимости воспользуйтесь поиском места на карте.
- Примерное дерево, для которого указан вызов сниппета в примерах 4 и 5 (внизу):

Пример 1 (вывод одиночного объекта используя свою иконку)
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerIcon=`/images/cafe_marker_icon.png`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&showMoreLink=`true`
]]Пример 2 (вывод одиночного объекта используя preset — «DotIcon»)
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerPreset=`islands#violetDotIcon`
&fieldForBalloonContent=`introtext`
&fieldForHint=`menutitle`
]]Пример 3 (вывод одиночного объекта используя preset — «StretchyIcon», и текст в нём)
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerPreset=`islands#yellowStretchyIcon`
&markerPresetText=`Плавательный бассейн`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&showMoreLink=`true`
]]Пример 4 (вывод множества объектов используя параметр «objectsTypesJSON»)
[[!yandexMaps?
&tvCoords=`coords`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&objectsTypesJSON=`[
{
"InvestProjects": {
"parent":"5",
"preset":"islands#violetStretchyIcon",
"presetText":"Реализованный",
"title":"Инвестиционные проекты"
},
"InvestPlaygrounds": {
"parent":"6",
"icon":"/images/playgrounds_map_icon.png",
"title":"Инвестиционные площадки"
}
}
]`
]]Пример 5 (вывод множества объектов с субфильтрами из TV, используя параметр «objectsTypesJSON»)
[[!yandexMaps?
&tvCoords=`coords`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&objectsTypesJSON=`[
{
"InvestProjects": {
"parent":"5",
"icon":"/images/projects_map_icon.png",
"title":"Инвестиционные проекты",
"subFilters": {
"status": {
"title":"Статус проекта",
"options": {
"0":{ "value":"Реализуемый==1", "icon":"/images/projects_map_icon1.png" },
"1":{ "value":"Реализованный==2", "preset":"islands#violetStretchyIcon", "presetText":"Реализованный" },
"2":{ "value":"Подписано соглашение==3", "preset":"islands#blueStretchyIcon", "presetFieldText":"pagetitle" }
}
},
"branch": {
"title":"Отрасль",
"options": {
"0":{ "value":"Фармацевтика и биотехнологии==1" },
"1":{ "value":"Автомобили и автокомпоненты==2" },
"2":{ "value":"Транспортно-логистические==3" },
"3":{ "value":"Другие направления==4" }
}
}
}
},
"InvestPlaygrounds": {
"parent":"6",
"icon":"/images/playgrounds_map_icon.png",
"title":"Инвестиционные площадки",
"subFilters": {
"types": {
"title":"",
"options": {
"0":{ "value":"Особые экономические зоны==1", "icon":"/images/playgrounds_map_icon1.png" },
"1":{ "value":"Индустриальные парки==2", "icon":"/images/playgrounds_map_icon2.png" }
}
}
}
}
}
]`
]]Скачать дополнение YandexMaps в репозитории Modstore.pro
В официальном репозитории modx.com
Комментарии: 196
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
ПашокНу и вообще идей, каких компонентов не хватает в модх. =)
ПашокПашокПашокПашокВообще есть идея в будущем расширить функционал компонента до просто «Maps». :) То бишь сделать выбор между GoogleMaps и YandexMaps. Возможно туда будет входить и 2gis, и что-то ещё. Это пока только идея…
ПашокБез каких-либо правок спокойно вывел 12 объектов.
Пашокможет я как то не так использую?
ПашокКонечно, если Вы не хотите, чтобы presetText был заголовком текущей страницы, например «Карта» или как у Вас там страница называется, на которой вызов сниппет YandexMaps…
Для указания поля в presetText есть параметр &markerPresetFieldText… как в JSON массиве…
Вы уверены, что в контейнере с id 132 располагаются все 15 ресурсов?
Вот думаю может дело в отсутствии pdoFetch? я что то не нашел такого сниппета. Там только 9 сниппетов входит в pdoTools ) я в нем не понимаю, не изаю пдо тулз
ПашокСделал сам используя API Yandex Maps.
За работу спасибо! Пригодится!
ПашокОднако там можно ставить линии и другие виды объектов. :)
ПашокP.S.: На днях выпущу обновление компонента — добавлю кластеризацию объектов. По сути она уже готова, осталось только хорошенько обкатать и продумать, как лучше её сделать, чтобы было удобнее указывать при вызове сниппета кластеризовать или нет объекты на карте.
ПашокПринял решение, что этот компонент должен быть безплатным. :) Пользуйтесь наздоровье!
ПашокТеперь YandexMaps будет нахаляву! :)
P.S.: Документацию читайте пока только здесь. Ибо в доках и в модсторе она пока не обновлена. Параметры некорректно прописаны. Здесь я обновил.
1.0.5-beta
==============
— В сниппет добавлена проверка и предупреждение о наличии pdoTools
— Исправлена подгрузка js файлов jquery и api для https сайтов
— Упрощён вызов сниппета для одиночного объекта, достаточно указать tv карты
1.0.4-pl
==============
— Поправлена подгрузка css файла в админке
ПашокТеперь, чтобы вывести одиночный объект нужно указать минимум параметров:
На будущее планирую сделать системную настройку, в которой можно указать tv поле по-умолчанию, которое будет использоваться, если не указан параметр &tvCoords. Тогда сниппет для одиночных объектов можно будет вызывать без параметров.
Но добавьте это
в примеры использования)
ПашокКонтроллер можно добавить в чанке "tpl.yandexMaps" указав свои параметры вызова-инициализации карты.
ПашокПашокВнимательней читаем документацию и многие вопросы развеятся сами собой. :)
ПашокА, все, нашёл ответ выше. Жду обновления.
ПашокПашокСколько времени на подготовку дополнения потратил ты — никого не волнует.
Подскажите как сделать чтобы названия маркеров были не при наведении мышки, а сразу видны.
Пашокиспользую:
Получается что на каждом объекте presetText название неверное. Пресет текст нужно как то сделать разный на каждой точке
ПашокЧекбокс для идеала убрать бы. Потому что хочется выводить все точки без возможности дать пользователю отключать группы точек.
Кстати, а где документация?
ПашокБлок с фильтром можно убрать разными способами. Только я не сделал пока варианта отключения по параметру. Пока можно назначить ему стиль: «display:none».
ПашокПашокПашокЧитал остальные комментарии и хотел бы еще добавить некоторое к to-do:
— ObjectManager, для количества точек 1000+
— Отключаемый фильтр (с возможностью размещения его в другом месте, например отдельным чанком)
— Возможностью включать/выключать кластеризацию для разных точек/групп.
С остальным вроде бы разобрался. Спасибо за хороший модуль.
ПашокЕсли вы имеете ввиду при загрузке страницы без использования фильтрации, то параметр &checkZoomRange для сниппета YandexMaps Вам в помощь.
А вообще вот здесь про новую версию более подробно — modx.pro/components/5382-new-yandexmaps-v1-1.1/
update
showFilter увидел. А как его сделать в отдельном чанке?
&checkZoomRange попробовал, работает, но не так (наверно). При загрузке страницы — не изменяется, а при выборе пункта из списка — zoom изменяется.
ПашокЕго в чанке разработчик переместил влево. Там ничего сложного собственно нет. Помоему можно даже обычным CSS обойтись. Плюс ко всему у сниппета есть параметры начинающиеся со слова «style», посмотрите в документации или на старнице параметров сниппета у Вас в админке. Там и описание к каждому параметру подробное.
А зачем он нужен в отдельном чанке? Нет, ну конечно наверно так было бы удобнее. Но я об этом не думал. :)
У меня шаблон не позволяет блок размещать рядом. =( переписыванием css стиля это не решить.
ПашокТам многое можно сделать по-другому. Руки никак не доходят. :)
Как, все же, полностью отключить checkZoomRange? В коде не нашел. Что поправить?
У меня при выборе одной группы, где пока одна точка включается зум на максимум, а яндекст еще тайтлы не нарисовал, соответственно вижу «для этого участка местности нет данных… итд»
ПашокТам 2 таких записи — обе удалить…
Если найду альтернативу — отпишусь тут.
Вторая версия не будет ограничена только точками, в ней будет свой редактор карт, с ломанными линиями, многоугольниками и точками, что-то вроде официального конструктора, но написанного с нуля. Это будет отдельная вкладка в ресурсе. На примете ещё куча плюх, которые пока остаются в тайне. :)
А этот компонент — помещает в поле только координаты, что меня ООчень устраивало. Но вот проблема, Все плагины карт, если включать их через MIGX перестают искать и работать.
пришлось поставить Гугл карту и через нее искать. В результате я сделал что нужно, но заметил что гуг плохо ищет адреса… некоторых нет, А у Яндекса все как-то получше!..
Поэтому Пришлось симбиозами заниматься. А вывод подмножества точек вообще в ручную написал по API карт… Зато прошарился наконец-то чутка. :)))
[[!yandexMaps?
&tvCoords=`map`
]]
Долго грузится страница, карта так и не появляется, в консоле браузера различные ошибки о том, что что-то не загрузилось с Яндекса.
Почему?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" «www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
Тоже не работает. Работает, если доктайп удалить вообще!
Например:
&styleMapBlock=`width:100%;height:400px;`
В общем рабочий вызов карты с одной точкой выглядит так:
Это минимальное количество параметров!
Вопрос в следующем на примере приведенного вверху дерева документов.
Допустим требуется чтобы страницы «Инвистиционные проекты» и «Инвестиционные площадки» также содержали карту и показывали свои дочерние объекты — все это круто реализуется, но
когда происходит открытие страницы «Карта» общего предка показываются все требуемые объекты плюс объекты-контейнеры «Инвистиционные проекты» и «Инвестиционные площадки», так как для них также указывались координаты (ведь они обязательны). Если я заново инициирую (сниму-включу) фильтр показываются требуемые (фильтрованные) объекты, если перегружу страницу фильтр сразу не отрабатывает и для показа нужных объектов требуется манипуляция.
Как тут лучше поступить и где поправить?
Спасибо!
Товарищи! Подскажите пожалуйста что не так я делаю. Мой адрес не определяется на карте и свое изображение не выходит.
Использую стандартный пример
Создал доп.поле yandexmaps, указал шаблон страницы, в настройках страницы «контакты» на карте указал свой адрес.
Подскажите пожалуйста карта выводится без маркера, причем при установке на чистый локальный modx все нормально работает. В чем может быть причина?
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerPreset=`islands#yellowStretchyIcon`
&markerPresetText=`Плавательный бассейн`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&showMoreLink=`true`
&styleMapBlock=`width:530px;height:450px;`
¢erCoords=`[[*coords]]`
&zoom=`16`
]]
Вот как пробую (вызываю в контенте документа):
Получается сниппет не понимает TV. Как его научить понимать?, я смотрел код сниппета, сложновато для моего уровня.
А за компонент спасибо большое, идеально к моей задаче подходит.
аналогично с tv. Тут выводим description, если поле пусто, выводится id, а если выводится id — мы его скрываем.
или
Или можно править в сниппете $fieldForBalloonContent
Как в хинт — надо в сниппете править $fieldForHint.
У меня на странице вывода карты их две вместо одной joxi.ru/brR8wxWH4jBJ21. Проблема не в компоненте, но надеюсь на помощь знатаков. При использовании mapex эфект был тот же.
Спасибо за ответы.
Вот еще вопрос, вывожу одиночный объект с минимум настроек, ни метки ни балуна не видно, да еще и карта в админке не связанна с картой на сайте, что я делаю не так, подскажите пожалуйста.
Так что все работает, огромное спасибо за компонент! Супер.
Было бы круто, если бы такой тип TV можно было бы добавлять в MIGX
Мне больше нравится к одному рессурсу, например странице КОНТАКТЫ, добавлять 1 TV параметр ФИЛИАЛЫ MIGX и в нем хранить все филиалы, да и клиенту понятней и наглядней.
joxi.ru/gmvR5d9IxokRnm
Попробовал, карта со строкой поиска добавилась, но искать координаты не хочет, а жаль, круто было бы.
joxi.ru/n2Y8qWVFjz3Bdm
Придется пока что как и раньше вручную добавлять.
Скажите порядок действий, спасибо.
У меня есть раздел с городами, куда мы производим доставку. И хочется на каждой странице вывести соответствующий адрес. Вот с общей картой все хорошо, на карте мира)) он все маркеры выводит. А вот с одиночной — никак. Подскажите, что я делаю не так, вывожу стандартно:
вывод такой:
Параметр &showMoreLinkTpl имеет такое значение по умолчанию (посмотрел в сниппете)Но стоит его прописать в ресурсе
и генератор ссылок отказывается работать, выдает такую ошибку
Да, я могу редактировать параметры по умолчанию прямо в сниппете, но почему так происходит? Это моя ошибка?
поле где полный адрес ввожу адрес объекта автоматом заполняются поля
с помощью YandexMaps я могу организовать такую же форму
сам спросил сам ответил=\
Что нужно в subFilters добавить? pdoResources и pdoFiled в чанках карты работают не так.
все облазил и не нашел
в json параметр «preset»:«islands#darkGreenStretchyIcon»… т.е. тут явно зеленые указаны, откуда фиолетовые?
Делаю вызов
[[!yandexMaps?
&tvAddress=`adres`
&tvCoords=`coords`
&addressPrefix=`Украина, [[*cityfirm]], `
&zoom=`16`
&fieldForBalloonContent=`pagetitle`
&styleMapBlock=`width:100%;height:300px;`
&checkZoomRange=`0`
¢erCoords=`[[*coords]]`
]]
Выводит город и маркер в центре города для всех адресов. То есть город передается через [[*cityfirm]], а сам адрес нет.
У кого-нибудь работает &tvAddress? Что надо сделать? Как правильно вызывать?
А то в коде страницы вроде бы всё есть, а вот визуально на странице карта отсутствует
на этом сайте карта выводится
Делаю выборку документов с помощью pdoResources:
YandexMaps вызываю внутри чанка object.html:
Все карты выводятся адресом первого документа. И не срабатывает параметр zoom.
Подскажите, что делаю не правильно?
Тогда все появится.
А на строке 167:
Думаю можно подключить карты самим, отпищусь о результатах.
Вот сайт (MODX REVO), иконки объектов в нем — мягко говоря — не совсем круглой формы. Не могу понять, где в компоненте YandexMaps править этот косяк.
Вызов сниппета:
Направьте, пожалуйста, буду очень благодарен!
Подскажите пожалуйста, в админ. панели необходимо сделать для карты переключение слоев, каким образом можно сделать? Я понимаю, что при обновлении сниппета это все удалиться, но все же…
А если это будет включено в обновлении сниппета, то будет вообще супер.
Вызываю так:
Т.е. по факту заменить true на false и дописать строку.
Решение было найдено пользователем olvin, когда комментить можно было в отзывах о расширении. Слава Вебархиву
И есть один ресурс-родитель, на котором нужно вывести все метки со всех дочерних ресурсов (около 500 меток).
Подойдет ли данный компонент и как в этом случае добавить 20 меток к одной карте?
Жаль только нельзя устанавливать разный зум для множества точек и для одной точки.
С помощью ¢erCoords я указал центр карты над объектом, и теперь карта загружается с этого места. Но мне не удаётся увидеть маркер над объектом и надпись.
Скажите, как вывести две карты на одной странице одного ресурса?
Я вывожу вот так:
Но выводится две карты с одним адресом.
expert33Подскажите пожалуйста, ни как не могу понять почему, может быть кто сталкивался:
Выводу карту с множеством объектов.
Но не отображается фильтр, фильтр есть и есть чекбоксы только родителя но нет названий, и вложенных чекбоксов для фильтра.
Вывожу так:
expert33Необходимо реализовать фильтр, фильтр сам не появляется, а если делать вручную через json это слишком сложно (прописывать все в ручную).
И еще вывод по умолчанию фильтра почему то не отображает русские шрифты, красным выделил.
expert332. Вырежьте из 108-ой строки:
3.1 И вставьте её перед: (примерно 180-я строка)
3.2 Таким вот образом:
Пне в данный момент нравится как у гугла реализованы карты на мобильной версии. Вот странно, что яндекс никак не хочет сделать хотябы что то похожее на гуглокарты. Он прям выдает сообщение что масштаб со смартфона только 2мя пальцами.
Может кому пригодится хорошая инструкция по установке компонента
selection-studio.com/karta-google-dlya-kazhdogo-resursa-kak-tv-pole.html
Борюсь уже неделю, ни как не могу сделать:
Подскажите пожалуйста, как выводить на карту только те маркеры(Балуны) которые в видимой части карты.
Т.е. у меня +10 тыс объектов, при стандартном множественном выводе он не выводит, ошибка по тайм ауту соответственно, как сделать так что бы они погружались только на видимую область экрана.
Огромное спасибо!
На 3 пункте запнулся
Что надо сделать-то?
Notice: Undefined variable: objectsTypes in /core/cache/includes/elements/modsnippet/15.include.cache.php on line 487
Что это за ошибки?
Пробовал задавать параметр centerCoords как в вызове, так и в параметрах ввода координат. Не работает.
Но, всегда возникает один и тот же вопрос после установки этого компонента на каждый новый сайт: «как оно у тебя работает?» =)
Всегда и на всех сайтах, консоль браузера выдаёт одну и ту же ошибку: «Uncaught ReferenceError: suggestView is not defined». Карта прогружается, но не работает поиск, маркер и клик по карте (на переставляет маркер).
Приходится лезть в "/{core_path}/components/yandexmaps/tv/input/tpl/tv.yandexMaps.input.tpl
Удалять из 108-ой строки, строку: И вставлять её перед 180-ой строкой, перед: Таким вот образом: Только после этого карта запускается и начинает работать.
Ибо suggestView.events.add банально не видит window.suggestView
Т.к. она вне области видимости.
После обновления до версии 1.1.3-beta перестал работать поиск объекта на карте. В консоли браузера ошибка: «Uncaught ReferenceError: suggestView is not defined».
Как исправить?
net::ERR_ABORTED 403 (Forbidden)
{«statusCode»:403,«error»:«Forbidden»,«message»:«Key is required»}
ключик нужен. Куда его ставить?
Пожалуйста modx.pro/howto/19014
Как просто вывести адрес точки при клике по ней?
Не из поля, а как в админке просто при клике по точке.
Подскажите, как по умолчанию снять галку с чекбокса #checkbox_ymFiltersInvestProjects.
Логика след: Есть карточки объектов с земельными участками. Изначально показывается метка конкретного участка. Нужно при нажатии на кнопку показать все участки.
Или
Показать сразу все участки, но зумировать на участок с выбранным id.
Ковырял шаблон tpl.yandexMaps Но не смог самостоятельно разобраться.
[[!yandexMaps?
&id=`[[*id]]`
&zoom=`19`
&checkZoomRange=`0`
¢erCoords=`[[*coords]]`
&tvCoords=`coords`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&showMoreLink=`true`
&objectsTypesJSON=`[
{
«InvestProjects»: {
«parent»:«5»,
«preset»:«islands#violetStretchyIcon»,
«presetText»:«test»,
«title»:«test_02»
}
}
]`
]]
Или создаете 2 TV поля, но есть вероятность что не будет работать — нужно тестить.
Кто-нибудь знает как можно решить?
Код вызова: