[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 показываем удовлетворяющие этой области объекты.
В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?
                    1) Есть объекты в городе, у каждого своя точка;
2) Человек на карте выбирает произвольную область;
3) Через mFilter2 показываем удовлетворяющие этой области объекты.
В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?
                Теоретически — да. На практике надо смотреть, чего не хватает и допиливать.
                    2) Человек на карте выбирает произвольную область;Как будет происходить выбор области — не понятно.
В целом это вопрос наверно по библиотеке, есть ли там функционал определения вхождения точек в произвольную область?На данный момент нет такого функционала. Однако, дописать такое реально. Другое дело, что необходимо знать, что дописывать и будет ли на это время…
                404 по ссылке на магазин            
                    
                Модерируем… можете пока демку потыкать)            
                    
                А демка работает?
Что-то ничего не происходит.
                    Что-то ничего не происходит.
                У меня работает и происходит.            
                    
                Страница с фильтрами, картой и функционалом.
            
                    
            
                Последний Firefox не показывает
В Chrome увидел
                    В Chrome увидел
                Вот FireFox:
            
                    
            
                Может все таки это у тебя что-то не так?..
Вот FireFox на винде:
            
                    Вот FireFox на винде:
            
                Обнови Firefox до последней версии. 
У товарища тоже не отображается ничего в новом FF
                    У товарища тоже не отображается ничего в новом FF
                у меня последней версии FF на винде и все работает четко: prntscr.com/hdu76m            
                    
                может у вас с товарищем что-то бьет какое-нибудь расширение, блокирующее рекламу?            
                    
                Отключали, результата нет всё-равно.
Спасибо, буду знать, что проблема локальная
                    Спасибо, буду знать, что проблема локальная
                Компонент не нашел в Modstore, как можно данный компонент установить? prntscr.com/he4hzd            
                    
                Выше писали уже, что на модерации еще находится. Т.е через пару дней появится в репозитории.            
                    
                Не заметил, Спасибо!            
                    
                Доброго дня! Подскажите, получиться вывести все объекты ранее добавленные на yandexmaps с использованием yandexmaps2? 
У меня сейчас около 350 ресурсов с координатами, у каждого выводится своя метка и собраны разные общие карты. Очень проблематично будет по новой прописывать метки, но новые возможности будут действительно полезны
                    У меня сейчас около 350 ресурсов с координатами, у каждого выводится своя метка и собраны разные общие карты. Очень проблематично будет по новой прописывать метки, но новые возможности будут действительно полезны
                Увы, версии не совместимы.            
                    
                спасибо, понял. Пока значит повременим с приобретением компонента, но когда будет время всё-равно перейдём на yandexmaps2, так что спасибо за работу.            
                    
                Можно ли отключать/подключать вкладку штатными средствами для конкретных шаблонов?            
                    
                В этой версии нет. В будущей.            
                    
                Перестал работать модуль -(… я про первую версию            
                    
                Всем привет!
есть вопрос по yandexmaps2, Есть n-количество объектов, с метками и полигонами, возможно ли вывести на отельных ресурсах только полигоны и только метки?
                    есть вопрос по yandexmaps2, Есть n-количество объектов, с метками и полигонами, возможно ли вывести на отельных ресурсах только полигоны и только метки?
                Да            
                    
                покажите плиз вызов сниппета с тем чтобы открывался балун по клику на метке
а балуне был текст и изображение из tv
                    а балуне был текст и изображение из tv
                А в компоненте есть функция маршрутизации?            
                    
                В конструкторе? Нет.            
                    
                На стороне фронтенда. Чтобы геолокация определяла пользователя и строился маршрут до метки.            
                    На стороне фронтендаНет, такого нет. Только что-то как-то допиливать.
Чтобы геолокацияПросто так карты не получат координаты юзера, ему надо будет дать на это разрешение.
и строился маршрут до меткиДо какой метки? Во-первых, маршрут строится не до метки, а от точки А до точки Б. Во-вторых, как на бэке эту точку обозначить? Если меткой, то куда на фронте эту метку девать, когда маршрут будет построен? И как вообще эту метку находить на фронте, если, например их у ресурса будет две или больше?
Проще сделать какое-то своё решение для вашей задачи.
Просто так карты не получат координаты юзера, ему надо будет дать на это разрешение.Определять местоположение по айпи.
Во-вторых, как на бэке эту точку обозначить?Координатами.
Если меткой, то куда на фронте эту метку девать, когда маршрут будет построен?Скрывать и показывать маршрут.
И как вообще эту метку находить на фронте, если, например их у ресурса будет две или больше?Ближайшую к пользователю.
Проще сделать какое-то своё решение для вашей задачи.Я так и подумал, что придётся изучать апи и делать самому.
Было бы неплохо увидеть такой функционал в этом дополнении, если вдруг я Вам дал наводку на реализацию.
                Ага, а теперь возле каждого ответа решение пожалуйста… Вот эти «скрывать и показывать», «ближайшую к пользователю» и тд, так и заставляют дать ответ вроде: Бери и делай.
Если вам показалось, что я этого не понимаю, этих банальных ответов, то вам показалось. Вопрос здесь не в том, что надо сделать, а как это сделать.
И к слову, по айпи вычислить местоположение юзера? Ну-ка ну-ка, по-подробнее и с примерами.
                    Если вам показалось, что я этого не понимаю, этих банальных ответов, то вам показалось. Вопрос здесь не в том, что надо сделать, а как это сделать.
И к слову, по айпи вычислить местоположение юзера? Ну-ка ну-ка, по-подробнее и с примерами.
Ага, а теперь возле каждого ответа решение пожалуйста…Если Вам действительно это интересно, я могу сделать отдельную ветку, если есть опенсорс проект, а так это будет бесполезная переписка.
                Интересно, давайте! И не мне одному интересно будет.            
                    
                Решение готово. Решил, что если скинетесь в общую сумму 1500р., то выложу решение ;)            
                    
                Приветствую.
А есть ли у компонента ограничение на число объектов на карте?
в mFilter2 выводятся около 500 объектов, YandexMaps2 же выводит на карту только примерно 100 объектов.
И как включить кластеризацию? Не нашел такой параметр в настройках.
                    А есть ли у компонента ограничение на число объектов на карте?
в mFilter2 выводятся около 500 объектов, YandexMaps2 же выводит на карту только примерно 100 объектов.
И как включить кластеризацию? Не нашел такой параметр в настройках.
А есть ли у компонента ограничение на число объектов на карте?Нет, ограничений нет. На всякий указал лимит явно, обновляйтесь.
И как включить кластеризацию? Не нашел такой параметр в настройках.Нет такого. Можете в коде default.js добавить самостоятельно.
P.S. Вопросы по приобретённому компоненту задавайте в техподдержку Modstore.
                Аналогичная история с limit. 
Сайт: sportbook.su/
mFilter2 выводит 678 объектов, но при открытии страницы их на карте явно меньше.
Причем, если выбрать фильтр, к примеру, sportbook.su/?city=Балашиха, то пропавшие выводятся.
При сбросе фильтров снова выводится примерно 100.
С limit экспериментировал — не помогает.
                    Сайт: sportbook.su/
mFilter2 выводит 678 объектов, но при открытии страницы их на карте явно меньше.
Причем, если выбрать фильтр, к примеру, sportbook.su/?city=Балашиха, то пропавшие выводятся.
При сбросе фильтров снова выводится примерно 100.
С limit экспериментировал — не помогает.
                Сам себе отвечу — у одного объекта не были указаны координаты ).
Сделал проверку при выводе mFilter2 на наличие значений в geometry, теперь все ОК.
                    Сделал проверку при выводе mFilter2 на наличие значений в geometry, теперь все ОК.
                Здравствуйте, скажите пожалуйста, можно ли как то получить координаты точки на карте для документа? Видно что в бд записывается json часть кода 
                    "geometry":[48.54047113739968,39.260353189639424] чтобы попробовать относительно этой точки вывести ближайших несколько точек(документов) или есть может другие варианты?            
                Ребята, кто купил компонент, техподдержка отвечает? А то что-то в этом треде давно автора не было. Перед покупкой хотелось бы пару вопросов задать, а то сейчас тестирую и пара вещей не работает, хотя должна вроде как.            
                    
                Что не работает?            
                    
                Развернул тестовый стенд на modhost. Из шаблона вызываю вот так:
 
Еще не понял куда подключать этот код:
Пока не включил friendlyURL, ссылки под картой указывали на главную страницу, хотя у вас на демо странице оно вроде как работает и без этого.
Вообще меня почти полностью устраивал yandexMaps :)) Только фильтрацию нужную не смог там настроить и с выводом фильтров разобраться )
                    {'!mFilter2' | snippet : [
    'parents' => 5,
    'limit' => 0,
    'tplOuter' => 'tpl.mFilter2.outer.Map',
    'tpl' => 'tpl.mSearch2.row.Map'
    'filters' => '
        tv|system,
    ',
    'tplFilter.outer.tv|system' => 'tpl.mFilter2.filter.select',
    'tplFilter.row.tv|system' => 'tpl.mFilter2.filter.option',
]}tpl.mFilter2.outer.Map<div class="row msearch2" id="mse2_mfilter">
    <div class="span3 col-md-4">
        <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-12">
        {'!YandexMaps2' | snippet : [
            'mode' => 'mfilter2',
            'class' => 'modDocument',
            'objectsInScope' => 1,
            'defaultBalloonContent' => '<div><b>pagetitle</b>: {$data.current | resource : "pagetitle"}</div>
                                        <div><b>tv</b>: {$data.current | resource : "system"}</div>
            ',
            'defaultIconContent' => 'test'
        ]}
        <div id="mse2_results">
            {$results}
        </div>
    </div>
</div>tpl.mSearch2.row.Map<div class="mse2-row">
    [[+idx]]. <a href="[[+uri]]">[[+pagetitle]]</a>[[+weight]]
    [[+intro]]
</div>
<div class="js-ym2-mse2-objects" style="display:none">{'!YandexMaps2' | snippet : [
    'parent' => $id,
    'scripts' => false,
    'tpl' => '@INLINE {(($objects | toJSON: 9) | replace: "{": "{ ") | replace: "[": "[ "}',
]}</div>
<!--msearch2_weight  ([[%mse2_weight]]: [[+weight]])-->
<!--msearch2_intro <p>[[+intro]]</p>-->Почему-то не вылазят баллуны, вообще никак. То есть при клике на метку ничего не происходит. Еще не получилось в баллун встроить название ресурса и ссылку на него, как это работает в yandexMaps первой версии. Есть ощущение что в документации отражено далеко не всё, что может компонент. А больше и посмотреть негде (( Очень мало инфы по нему.Еще не понял куда подключать этот код:
$(document).ready(function() {
    $(document).on('ymOnLoadMap', function(e, ym2, map) {
        map.controls
            .remove('fullscreenControl') // полный экран
            .remove('geolocationControl') // моя геопозиция
            .remove('rulerControl') // линейка
            .remove('trafficControl') // пробки
            .remove('searchControl') // поиск
            .remove('typeSelector') // слои
            .remove('zoomControl') // масштаб
        ;
    });
});Куда бы я его не подключал, где по моим представлениям он может быть, нигде не сработало. Я не программист, поэтому может откровенную фигню творил ))Пока не включил friendlyURL, ссылки под картой указывали на главную страницу, хотя у вас на демо странице оно вроде как работает и без этого.
Вообще меня почти полностью устраивал yandexMaps :)) Только фильтрацию нужную не смог там настроить и с выводом фильтров разобраться )
                Если просто выводить карту, без фильтров, то всё отлично выводится
                    <div>
    {'!YandexMaps2' | snippet : [
        'parents' => 5,
        'class' => 'modDocument',
        'objectsInScope' => 1,
        'defaultBalloonContent' => '<div><strong>{$data.parent | resource : "pagetitle"}</strong></div>
                                    <div><p><a href="{$data.parent | resource : "uri"}">Подробнее</a></p></div>
        ',
    ]}
</div>С выводом ссылок разобрался, в прошлый раз видимо что-то не то написал там. Но баллуны выводятся только если вызываешь сниппет без фильтров            
Вот такие баллуны можно вывести, как в первой версии компонента? Чтобы не по клику, а сразу названия были
                С помощью
                    'defaultIconCaption' => '{$data.parent | resource : "pagetitle"}'вывел, но можно ли настроить вид, как в первой версии?            
                Пробовал вставить
(index):131 Uncaught ReferenceError: $ is not defined at (index):131 (anonymous) @ (index):131
                    <script>
$(document).ready(function() {
    $(document).on('ymOnLoadMap', function(e, ym2, map) {
        // console.log('ym2', ym2);
        // console.log('map', map);
        
        map.controls
            .remove('fullscreenControl')
            .remove('geolocationControl')
            .remove('rulerControl')
            .remove('trafficControl')
            .remove('searchControl')
            .remove('typeSelector')
            .remove('zoomControl')
        ;
    });
});
</script>в шаблон, сразу после вызова карты. Но это никак не подействовало, кроме того что стала появляться ошибка в консоли(index):131 Uncaught ReferenceError: $ is not defined at (index):131 (anonymous) @ (index):131
                Павел, можете помочь?            
                    
                jQuery подключите. Остальные вопросы в ТП на Модстор, пожалуйста.            
                    
                ребят, а кто знает, как вывести один объект на карте с определенным зумом?
Если используешь параметр objectsInScope то параметр zoom не работает, в настройках ym2_zoom тоже нет реакции. Если убираешь objectsInScope то нужно прописывать zoom и center, но как взять координаты центра, кроме как руками прописывать? вызов сниппета с указанием пустого шаблона, чтобы посмотреть плейсхолдеры не прокатывает, всё равно карта выводится.
                    Если используешь параметр objectsInScope то параметр zoom не работает, в настройках ym2_zoom тоже нет реакции. Если убираешь objectsInScope то нужно прописывать zoom и center, но как взять координаты центра, кроме как руками прописывать? вызов сниппета с указанием пустого шаблона, чтобы посмотреть плейсхолдеры не прокатывает, всё равно карта выводится.
                Документацию читайте. joxi.ru/YmEXd3OHB9MEOr            
                    
                Да вот читаю. Мне нужно вывести ОДИН объект на карте, на странице (ресурсе) этого объекта. 
Согласно документации я могу использовать ЛИБО 1. objectsInScope ЛИБО 2 zoom+center.
1. Если использую objectsInScope, тогда zoom не работает, а мне нужно чтобы он был меньше, сейчас зум на максимуме, здание на весь экран и я не могу это изменить. Системные настройки инициализации карты на него тоже не влияют как я понял.
2. Если использовать zoom + center, то в zoom я могу прописать нужную цифру. А вот как в center прокинуть нужные координаты — этого я не знаю. Объектов много, писать их каждому ручками вообще не вариант.
                    Согласно документации я могу использовать ЛИБО 1. objectsInScope ЛИБО 2 zoom+center.
1. Если использую objectsInScope, тогда zoom не работает, а мне нужно чтобы он был меньше, сейчас зум на максимуме, здание на весь экран и я не могу это изменить. Системные настройки инициализации карты на него тоже не влияют как я понял.
2. Если использовать zoom + center, то в zoom я могу прописать нужную цифру. А вот как в center прокинуть нужные координаты — этого я не знаю. Объектов много, писать их каждому ручками вообще не вариант.
                Я так понимаю нет такой возможности?            
                    
                Нет. 
                    Остальные вопросы в ТП на Модстор, пожалуйста.
                Павел, подскажите, пожалуйста, по одной части компонента, я возможно не до конца понял. Я хочу его приобрести под сайт недвижимости, но обратил внимание, на обязательный параметр limit => 0 в вызове mfilter2. Я правильно понимаю, что это принципиальный параметр, чтобы данные меток отображались сразу все на странице, и если использовать свои параметры с пагинацией, то на карте будет выводиться только текущая страница? Или все же есть обход, потому что я пока не понял как быть, когда ресурсов будет более 50-100 на одной странице            
                    
                Только текущая страница.            
                    
                Спасибо за ответ. Попробую покопаться в другом направлении)            
                    
                            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                    
            
                    
                    
                

