[YandexMaps2] Собственный конструктор карт, работа с mFilter2

Новая версия полностью переработана
Преимущества перед подобными компонентами
- Новая версия API карт, которая поддерживается командой Яндекса
- Работа с mFilter2 из коробки при небольшой настройке компонента в 3 шага
- Конструктор карты в бекенде отображается в ресурсах, товарах, тикетах, пользователях
- Принцип работы похож на UserFiles, что позволяет внедрить конструктор карт в любое место админки, с небольшими знаниями ExtJS. Так, к примеру, я прицепил UserFiles к своему кастомному объекту, без правки исходника.
Конструктор карт
Так выглядит конструктор карты в бекенде при редактировании ресурса:
Вся основная работа компонента заключена в конструкторе карт. Любая карта начинается отсюда.
Конструктор поддерживает 4 типа объектов:
- Точки, метки
- Ломаные линии
- Многоугольники
- Круги
Библиотека конструктора для Яндекс Карт писалась мной с нуля и, вскоре, есть планы выложить ее в открытый доступ для общего пользования разработчиками.
Работа с mFilter2
Работа фильтрации объектов на карте при помощи mFilter2 продумана из коробки и реализуется в три шага:Шаг 1
В нужном месте страницы вызываем mFilter2 со следующими параметрами:{'!mFilter2' | snippet : [
'parents' => $_modx->resource['id'],
'limit' => 0,
'outputSeparator' => ',',
'filters' => '
tv|symbol,
',
]}Конечно, параметр &filters у вас должен быть свой, со своими полями.Шаг 2
Чанк tpl.mFilter2.outer будет выглядеть примерно так:<div class="row msearch2" id="mse2_mfilter">
<div class="span3 col-md-3">
<form action="[[~[[*id]]]]" method="post" id="mse2_filters">
<div>
[[+filters]]
</div>
[[+filters:isnot=``:then=`
<button type="reset" class="btn btn-default hidden">[[%mse2_reset]]</button>
<button type="submit" class="btn btn-success pull-right hidden">[[%mse2_submit]]</button>
<div class="clearfix"></div>
`]]
</form>
</div>
<div class="span9 col-md-9">
{'!YandexMaps2' | snippet : [
'objects' => $results,
'mode' => 'mfilter2',
]}
</div>
</div>Шаг 3
Чанк tpl.mSearch2.row должен выглядеть так:{'!YandexMaps2' | snippet : [
'parent' => $id,
'scripts' => false,
'tpl' => '@INLINE {($objects | toJSON) | replace : "[" : "[ "}',
]}Сниппет YandexMaps2
Основной сниппет компонента, который реализует вывод карты на фронте.Параметры
| Название | По умолчанию | Описание | parent | 0 | Идентификатор родителя. | class | Класс объекта. | list | default | Имя списка. К нему будет привязана карта. | map | ym2map | ID блока с картой. | center | [55.72, 37.64] | Центральные координаты карты. | zoom | 10 | Приближение карты. | objects | Массив объектов карты. Если указан, выборка объектов из базы производиться не будет. | mode | default | Режим сниппета. Варианты: default, mfilter2 | scripts | 1 | Нужно ли подключать скрипты карты. | jquery | 1 | Нужно ли подключать jQuery. | tpl | tpl.YandexMaps2 | Чанк вывода карты. |
|---|
Примеры
Все объекты класса modDocument
{'!YandexMaps2' | snippet : [
'class' => 'modDocument',
]}Все объекты класса msProduct
{'!YandexMaps2' | snippet : [
'class' => 'msProduct',
]}Все объекты пользователей
{'!YandexMaps2' | snippet : [
'class' => 'modUser',
'map' => 'ym2map-users',
]}Планы на будущее
В следующих версиях компонента планируется реализовать:— Вывод конструктора карт на фронте,
— Поддержка кастомных иконок для меток.
Демо сайт
Компонент в Modstore
Комментарии: 61
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
1) Есть объекты в городе, у каждого своя точка;
2) Человек на карте выбирает произвольную область;
3) Через mFilter2 показываем удовлетворяющие этой области объекты.
В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?
Как будет происходить выбор области — не понятно.
На данный момент нет такого функционала. Однако, дописать такое реально. Другое дело, что необходимо знать, что дописывать и будет ли на это время…
Что-то ничего не происходит.
В Chrome увидел
Под виндами
Вот FireFox на винде:
У товарища тоже не отображается ничего в новом FF
Спасибо, буду знать, что проблема локальная
У меня сейчас около 350 ресурсов с координатами, у каждого выводится своя метка и собраны разные общие карты. Очень проблематично будет по новой прописывать метки, но новые возможности будут действительно полезны
есть вопрос по yandexmaps2, Есть n-количество объектов, с метками и полигонами, возможно ли вывести на отельных ресурсах только полигоны и только метки?
а балуне был текст и изображение из tv
Просто так карты не получат координаты юзера, ему надо будет дать на это разрешение.
До какой метки? Во-первых, маршрут строится не до метки, а от точки А до точки Б. Во-вторых, как на бэке эту точку обозначить? Если меткой, то куда на фронте эту метку девать, когда маршрут будет построен? И как вообще эту метку находить на фронте, если, например их у ресурса будет две или больше?
Проще сделать какое-то своё решение для вашей задачи.
Координатами.
Скрывать и показывать маршрут.
Ближайшую к пользователю.
Я так и подумал, что придётся изучать апи и делать самому.
Было бы неплохо увидеть такой функционал в этом дополнении, если вдруг я Вам дал наводку на реализацию.
Если вам показалось, что я этого не понимаю, этих банальных ответов, то вам показалось. Вопрос здесь не в том, что надо сделать, а как это сделать.
И к слову, по айпи вычислить местоположение юзера? Ну-ка ну-ка, по-подробнее и с примерами.
А есть ли у компонента ограничение на число объектов на карте?
в mFilter2 выводятся около 500 объектов, YandexMaps2 же выводит на карту только примерно 100 объектов.
И как включить кластеризацию? Не нашел такой параметр в настройках.
Нет такого. Можете в коде default.js добавить самостоятельно.
P.S. Вопросы по приобретённому компоненту задавайте в техподдержку Modstore.
Сайт: sportbook.su/
mFilter2 выводит 678 объектов, но при открытии страницы их на карте явно меньше.
Причем, если выбрать фильтр, к примеру, sportbook.su/?city=Балашиха, то пропавшие выводятся.
При сбросе фильтров снова выводится примерно 100.
С limit экспериментировал — не помогает.
Сделал проверку при выводе mFilter2 на наличие значений в geometry, теперь все ОК.
tpl.mFilter2.outer.Map
tpl.mSearch2.row.Map
Почему-то не вылазят баллуны, вообще никак. То есть при клике на метку ничего не происходит. Еще не получилось в баллун встроить название ресурса и ссылку на него, как это работает в yandexMaps первой версии. Есть ощущение что в документации отражено далеко не всё, что может компонент. А больше и посмотреть негде (( Очень мало инфы по нему.
Еще не понял куда подключать этот код:
Куда бы я его не подключал, где по моим представлениям он может быть, нигде не сработало. Я не программист, поэтому может откровенную фигню творил ))
Пока не включил friendlyURL, ссылки под картой указывали на главную страницу, хотя у вас на демо странице оно вроде как работает и без этого.
Вообще меня почти полностью устраивал yandexMaps :)) Только фильтрацию нужную не смог там настроить и с выводом фильтров разобраться )
С выводом ссылок разобрался, в прошлый раз видимо что-то не то написал там. Но баллуны выводятся только если вызываешь сниппет без фильтров
Вот такие баллуны можно вывести, как в первой версии компонента? Чтобы не по клику, а сразу названия были
вывел, но можно ли настроить вид, как в первой версии?
в шаблон, сразу после вызова карты. Но это никак не подействовало, кроме того что стала появляться ошибка в консоли
(index):131 Uncaught ReferenceError: $ is not defined at (index):131 (anonymous) @ (index):131
Если используешь параметр objectsInScope то параметр zoom не работает, в настройках ym2_zoom тоже нет реакции. Если убираешь objectsInScope то нужно прописывать zoom и center, но как взять координаты центра, кроме как руками прописывать? вызов сниппета с указанием пустого шаблона, чтобы посмотреть плейсхолдеры не прокатывает, всё равно карта выводится.
Согласно документации я могу использовать ЛИБО 1. objectsInScope ЛИБО 2 zoom+center.
1. Если использую objectsInScope, тогда zoom не работает, а мне нужно чтобы он был меньше, сейчас зум на максимуме, здание на весь экран и я не могу это изменить. Системные настройки инициализации карты на него тоже не влияют как я понял.
2. Если использовать zoom + center, то в zoom я могу прописать нужную цифру. А вот как в center прокинуть нужные координаты — этого я не знаю. Объектов много, писать их каждому ручками вообще не вариант.