[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
6
2 885
+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, теперь все ОК.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.