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


Новая версия полностью переработана несколько раз, написан конструктор карт с нуля, продумана работа с mFilter2.

Преимущества перед подобными компонентами

  • Новая версия API карт, которая поддерживается командой Яндекса
  • Работа с mFilter2 из коробки при небольшой настройке компонента в 3 шага
  • Конструктор карты в бекенде отображается в ресурсах, товарах, тикетах, пользователях
  • Принцип работы похож на UserFiles, что позволяет внедрить конструктор карт в любое место админки, с небольшими знаниями ExtJS. Так, к примеру, я прицепил UserFiles к своему кастомному объекту, без правки исходника.

Конструктор карт

Так выглядит конструктор карты в бекенде при редактировании ресурса:


Вся основная работа компонента заключена в конструкторе карт. Любая карта начинается отсюда.
Конструктор поддерживает 4 типа объектов:
  1. Точки, метки
  2. Ломаные линии
  3. Многоугольники
  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 Класс объекта. listdefaultИмя списка. К нему будет привязана карта. mapym2mapID блока с картой. center[55.72, 37.64]Центральные координаты карты. zoom10Приближение карты. objects Массив объектов карты. Если указан, выборка объектов из базы производиться не будет. modedefaultРежим сниппета. Варианты: default, mfilter2 scripts1Нужно ли подключать скрипты карты. jquery1Нужно ли подключать jQuery. tpltpl.YandexMaps2Чанк вывода карты.

Примеры

Все объекты класса modDocument
{'!YandexMaps2' | snippet : [
    'class' => 'modDocument',
]}

Все объекты класса msProduct
{'!YandexMaps2' | snippet : [
    'class' => 'msProduct',
]}

Все объекты пользователей
{'!YandexMaps2' | snippet : [
    'class' => 'modUser',
    'map' => 'ym2map-users',
]}


Планы на будущее

В следующих версиях компонента планируется реализовать:
— Вывод конструктора карт на фронте,
— Поддержка кастомных иконок для меток.

Демо сайт

Компонент в Modstore

Павел Гвоздь
21 ноября 2017, 19:02
modx.pro
6
3 024
+13
Поблагодарить автора Отправить деньги

Комментарии: 43

Евгений Шеронов
22 ноября 2017, 09:37
0
Павел, а чисто теоретически, с компонентом реализуем такой функционал?
1) Есть объекты в городе, у каждого своя точка;
2) Человек на карте выбирает произвольную область;
3) Через mFilter2 показываем удовлетворяющие этой области объекты.

В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?
    Павел Гвоздь
    22 ноября 2017, 10:10
    0
    Теоретически — да. На практике надо смотреть, чего не хватает и допиливать.

    2) Человек на карте выбирает произвольную область;
    Как будет происходить выбор области — не понятно.

    В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?
    На данный момент нет такого функционала. Однако, дописать такое реально. Другое дело, что необходимо знать, что дописывать и будет ли на это время…
    Алексей Шумаев
    22 ноября 2017, 09:59
    0
    404 по ссылке на магазин
      Павел Гвоздь
      22 ноября 2017, 10:11
      0
      Модерируем… можете пока демку потыкать)
      Stan Ezersky
      22 ноября 2017, 14:56
      0
      А демка работает?
      Что-то ничего не происходит.
        Павел Гвоздь
        22 ноября 2017, 16:06
        0
        У меня работает и происходит.
          Stan Ezersky
          22 ноября 2017, 16:08
          0
          Страница с фильтрами и всё.

            Павел Гвоздь
            22 ноября 2017, 16:11
            0
            Страница с фильтрами, картой и функционалом.
              Stan Ezersky
              22 ноября 2017, 16:14
              0
              Последний Firefox не показывает

              В Chrome увидел
                Павел Гвоздь
                22 ноября 2017, 16:18
                0
                Вот FireFox:
                  Stan Ezersky
                  22 ноября 2017, 16:29
                  0
                  В MacOS у меня тоже показывает, а на виндах не работает



                  Под виндами

                    Павел Гвоздь
                    22 ноября 2017, 16:38
                    0
                    Может все таки это у тебя что-то не так?..
                    Вот FireFox на винде:
                      Stan Ezersky
                      22 ноября 2017, 16:40
                      0
                      Обнови Firefox до последней версии.

                      У товарища тоже не отображается ничего в новом FF
                        Дмитрий Суворов
                        22 ноября 2017, 19:01
                        +1
                        у меня последней версии FF на винде и все работает четко: prntscr.com/hdu76m
                          Дмитрий Суворов
                          22 ноября 2017, 19:03
                          +2
                          может у вас с товарищем что-то бьет какое-нибудь расширение, блокирующее рекламу?
                            Stan Ezersky
                            24 ноября 2017, 12:45
                            0
                            Отключали, результата нет всё-равно.

                            Спасибо, буду знать, что проблема локальная
        Radj
        23 ноября 2017, 11:31
        0
        Компонент не нашел в Modstore, как можно данный компонент установить? prntscr.com/he4hzd
          Anton
          24 ноября 2017, 10:47
          +1
          Выше писали уже, что на модерации еще находится. Т.е через пару дней появится в репозитории.
            Radj
            24 ноября 2017, 12:29
            0
            Не заметил, Спасибо!
              vrm13
              20 декабря 2017, 10:46
              0
              Доброго дня! Подскажите, получиться вывести все объекты ранее добавленные на yandexmaps с использованием yandexmaps2?
              У меня сейчас около 350 ресурсов с координатами, у каждого выводится своя метка и собраны разные общие карты. Очень проблематично будет по новой прописывать метки, но новые возможности будут действительно полезны
                Павел Гвоздь
                20 декабря 2017, 12:09
                0
                Увы, версии не совместимы.
                  vrm13
                  20 декабря 2017, 12:17
                  0
                  спасибо, понял. Пока значит повременим с приобретением компонента, но когда будет время всё-равно перейдём на yandexmaps2, так что спасибо за работу.
                Максим Кузнецов
                08 января 2018, 17:51
                0
                Можно ли отключать/подключать вкладку штатными средствами для конкретных шаблонов?
                UDAV
                28 февраля 2018, 10:34
                -1
                Перестал работать модуль -(… я про первую версию
                  Дмитрий
                  22 мая 2018, 11:59
                  0
                  Всем привет!
                  есть вопрос по yandexmaps2, Есть n-количество объектов, с метками и полигонами, возможно ли вывести на отельных ресурсах только полигоны и только метки?
                  igor
                  03 сентября 2018, 07:39
                  0
                  покажите плиз вызов сниппета с тем чтобы открывался балун по клику на метке
                  а балуне был текст и изображение из tv
                    Кирилл Киселев
                    30 мая 2019, 19:09
                    0
                    А в компоненте есть функция маршрутизации?
                      Павел Гвоздь
                      30 мая 2019, 20:20
                      0
                      В конструкторе? Нет.
                        Кирилл Киселев
                        31 мая 2019, 18:06
                        0
                        На стороне фронтенда. Чтобы геолокация определяла пользователя и строился маршрут до метки.
                          Павел Гвоздь
                          31 мая 2019, 18:30
                          0
                          На стороне фронтенда
                          Нет, такого нет. Только что-то как-то допиливать.

                          Чтобы геолокация
                          Просто так карты не получат координаты юзера, ему надо будет дать на это разрешение.

                          и строился маршрут до метки
                          До какой метки? Во-первых, маршрут строится не до метки, а от точки А до точки Б. Во-вторых, как на бэке эту точку обозначить? Если меткой, то куда на фронте эту метку девать, когда маршрут будет построен? И как вообще эту метку находить на фронте, если, например их у ресурса будет две или больше?

                          Проще сделать какое-то своё решение для вашей задачи.
                            Кирилл Киселев
                            02 июня 2019, 10:02
                            0
                            Просто так карты не получат координаты юзера, ему надо будет дать на это разрешение.
                            Определять местоположение по айпи.

                            Во-вторых, как на бэке эту точку обозначить?
                            Координатами.

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

                            И как вообще эту метку находить на фронте, если, например их у ресурса будет две или больше?
                            Ближайшую к пользователю.

                            Проще сделать какое-то своё решение для вашей задачи.
                            Я так и подумал, что придётся изучать апи и делать самому.

                            Было бы неплохо увидеть такой функционал в этом дополнении, если вдруг я Вам дал наводку на реализацию.
                              Павел Гвоздь
                              02 июня 2019, 10:26
                              0
                              Ага, а теперь возле каждого ответа решение пожалуйста… Вот эти «скрывать и показывать», «ближайшую к пользователю» и тд, так и заставляют дать ответ вроде: Бери и делай.
                              Если вам показалось, что я этого не понимаю, этих банальных ответов, то вам показалось. Вопрос здесь не в том, что надо сделать, а как это сделать.

                              И к слову, по айпи вычислить местоположение юзера? Ну-ка ну-ка, по-подробнее и с примерами.
                                Кирилл Киселев
                                02 июня 2019, 11:01
                                0
                                Ага, а теперь возле каждого ответа решение пожалуйста…
                                Если Вам действительно это интересно, я могу сделать отдельную ветку, если есть опенсорс проект, а так это будет бесполезная переписка.
                                  Павел Гвоздь
                                  02 июня 2019, 12:09
                                  0
                                  Интересно, давайте! И не мне одному интересно будет.
                                    Кирилл Киселев
                                    16 июня 2019, 17:29
                                    0
                                    Решение готово. Решил, что если скинетесь в общую сумму 1500р., то выложу решение ;)
                      Denis
                      04 июля 2019, 12:20
                      0
                      Приветствую.
                      А есть ли у компонента ограничение на число объектов на карте?
                      в mFilter2 выводятся около 500 объектов, YandexMaps2 же выводит на карту только примерно 100 объектов.
                      И как включить кластеризацию? Не нашел такой параметр в настройках.
                        Павел Гвоздь
                        04 июля 2019, 18:39
                        0
                        А есть ли у компонента ограничение на число объектов на карте?
                        Нет, ограничений нет. На всякий указал лимит явно, обновляйтесь.

                        И как включить кластеризацию? Не нашел такой параметр в настройках.
                        Нет такого. Можете в коде default.js добавить самостоятельно.

                        P.S. Вопросы по приобретённому компоненту задавайте в техподдержку Modstore.
                          Павел Романов
                          17 июля 2019, 13:55
                          0
                          Аналогичная история с limit.
                          Сайт: sportbook.su/
                          mFilter2 выводит 678 объектов, но при открытии страницы их на карте явно меньше.
                          Причем, если выбрать фильтр, к примеру, sportbook.su/?city=Балашиха, то пропавшие выводятся.
                          При сбросе фильтров снова выводится примерно 100.
                          С limit экспериментировал — не помогает.
                            Павел Романов
                            17 июля 2019, 16:30
                            +1
                            Сам себе отвечу — у одного объекта не были указаны координаты ).
                            Сделал проверку при выводе mFilter2 на наличие значений в geometry, теперь все ОК.
                        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                        43