Интерактивная SVG карта (объекты на изображениях)
Скриншоты
Технические данные
Совместимые редакции
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Старт
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Стандарт
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Малый бизнес
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Бизнес
Описание
Модуль «Интерактивная карта» позволяет превратить любую статичную картинку, план или схему в живой, кликабельный элемент вашего сайта. С помощью удобного визуального редактора вы можете выделять определенные области на изображении, назначать им цвета, добавлять всплывающие подсказки и ссылки.
Это идеальный инструмент для визуализации пространственных данных. Вместо того чтобы заставлять пользователя изучать скучные текстовые списки или таблицы, вы даете ему возможность взаимодействовать с наглядным планом, что значительно облегчает восприятие.
Для каких задач подходит модуль?
- Недвижимость и застройщики: Интерактивные генпланы коттеджных поселков, поэтажные планы новостроек или схемы бизнес-центров. Клиент сразу видит свободные, забронированные и проданные участки или квартиры благодаря цветовой индикации.
- Торговые центры и выставки: Схемы расположения павильонов, магазинов или фудкортов. Посетитель может навести курсор на нужный отдел, узнать его название и перейти на страницу с подробным описанием.
- Автодилеры и сервисы: Интерактивные схемы устройства автомобиля, где при наведении на деталь всплывает подсказка с ее названием и ссылкой на каталог запчастей.
Ключевые преимущества
- Встроенный визуальный редактор: Вам больше не нужно привлекать программистов или дизайнеров для разметки координат. В административной панели Битрикса встроен удобный редактор: просто загрузите картинку и обведите нужные области мышкой (многоугольниками, кругами или прямоугольниками).
- Цветовое кодирование статусов: Вы можете задавать разные цвета для заливки и контура каждой области. Это позволяет наглядно показывать статусы объектов: зеленый — «свободно», желтый — «бронь», красный — «продано».
- Информативные подсказки (Tooltips): При наведении курсора на выделенную зону пользователь увидит аккуратную всплывающую подсказку с названием объекта, ценой или кратким описанием.
- Абсолютная адаптивность: Карта автоматически подстраивается под размеры окна. Она корректно отображается и плавно масштабируется как на больших мониторах, так и на экранах мобильных телефонов.
- Поддержка сенсорных экранов: Модуль полностью оптимизирован для мобильных устройств — области легко нажимаются пальцем без ложных срабатываний.
Мы позаботились о том, чтобы процесс создания карты был максимально простым и интуитивно понятным для контент-менеджера:
1. Добавление новой карты. После установки модуля перейдите в административном меню в раздел Сервисы (Сервисы → SVG Карты → Список карт) и нажмите кнопку «Добавить карту».
2. Загрузка изображения. Введите название карты (например, «Генплан поселка» или "План этаже ТЦ") и загрузите нужное изображение в формате JPG, PNG или WebP. Нажмите «Применить».
3. Разметка объектов. После загрузки картинки вверху страницы появится визуальный редактор. Выберите подходящий инструмент ("Рисовать мышкой", "Рисовать полигоном", "Поставить точку") и кликами мыши или обведите нужный участок на загруженной картинке или поставьте маркеты (точки) в нужных местах.
4. Настройка области. При добавлении объектов на карте рядом сразу появится новя запись, где можно задать название (оно будет выводиться в подсказке при наведении) и ссылку, в также сможет выбрать цвет заливки объекта или размер добавляемых точек.
5. Размещение на сайте. Сохраните карту. В списке карт вы увидите уникальный ID вашей новой схемы. Перейдите на любую страницу сайта, откройте визуальный редактор Битрикса и разместите стандартный компонент goodsol:imagemap, указав в его настройках нужный ID.
Готово! Интерактивная карта сразу же появится на странице и будет готова к работе с вашими клиентами.
Установка модуля
После приобретения модуля зайдите в административную панель вашего сайта, откройте раздел Marketplace → Установленные решения, найдите модуль «Интерактивная SVG-карта» и нажмите кнопку «Скачать», затем «Установить».
Шаг 1: Создание новой карты
Перейдите раздел «Сервисы» (Сервисы → SVG Карты → Список карт) и нажмите кнопку «Добавить карту».
(В этом же списке можно вызать редактирование ранее добавленных изображений)
В открывшемся бланке редактирования введите «Название карты» (например, «План ТЦ – 1й этаж» или «Схема микрорайона»). Загрузите нужное изображение (поддерживаются форматы JPG, PNG, WEBP) и нажмите «Применить», чтобы картинка загрузилась на сервер и появилась на холсте.
Шаг 2: Рисование интерактивных зон
В бланке редактирования имеется панель инструментов:
Рисовать мышкой — позволяет выделить произвольную сложную область (просто зажмите левую кнопку мыши и обведите нужный участок).
Рисовать полигоном — идеально для форм с прямыми углами (помещения на плане здания, здания на плане микрорайона). Кликайте мышкой по углам объекта. Чтобы завершить полигон, дважды кликните по последней точке или нажмите Enter. Отменить рисование текущего объекта можно клавишей «Esc».
Скруглённые области тоже можно выделять этим инструментом, аккуратно расставляя точки по периметру.
Поставить точку — ставит круглый цветной маркер поверх изображения. Удобно для указания точек на карте или деталей на схеме оборудования. Также можно выбрать один из нескольких размеров точек (большая, средняя, маленькая)
Настройка объекта:
Перед тем как нарисовать фигуру, вы можете выбрать её цвет в палитре на верхней панели. Если вы хотите сделать область невидимой для пользователя (это в случае, если объекты уже нарисованы на исходной картинке, нужно просто сделать их кликабельными), поставьте галочку для свойства «Прозрачная заливка».
Шаг 3: Добавление описаний и ссылок
Как только вы нарисовали фигуру на холсте, в правой колонке «Добавленные элементы» появится новая карточка объекта. В ней вы можете:
- ввести текст для всплывающей подсказки (тултип), которая появится при наведении курсора на эту область;
- указать ссылку (например, https://yoursite.ru/catalog/), по которой перейдет пользователь при клике на выделенную зону.
Если что-то изменилось на плане или если вы ошиблись при разметке объектов, любой добавленный элемент всегда можно удалить по отдельности, нажав кнопку с красным крестиком.
После завершения работы с изображением нажмите «Сохранить».
Как вывести карту на сайт
Модуль поддерживает вывод интерактивных карт в любом месте сайта, где доступен визуальный редактор Битрикс (в новостях, статьях, описаниях разделов и товаров).
Способ 1: Использование макроса (самый простой)
Зайдите в редактирование страницы, новости или статической области.
В визуальном редакторе напишите конструкцию: #MAP_ID# (где ID — это номер вашей карты, который можно посмотреть в списке таблице «Список интерактивных карт» (Сервисы → SVG Карты → Список карт). (ID обведён на первом рисунке.
Пример: #MAP_1# выведет карту с идентификатором 1.
Данный тег можно добавить в текст используя «Сниппеты»
Сохраните страницу. На выводе модуль автоматически заменит этот тег на готовую интерактивную карту!
Способ 2: Использование компонента (для разработчиков)
Модуль устанавливает стандартный компонент vendor:image.map.
Вы можете разместить его в исходном коде шаблона любой страницы.
Мы оказываем аварийную и гарантийную поддержку по настройке наших модулей.
Обработка заявок ведётся в рабочие дни недели (пн-пт), в рабочие часы с 9:00 до 18:00 (Мск), в порядке очереди.
Чтобы ваша заявка попала в очередь задач и не потерялась, просим использовать форму на нашем сайте https://goodsol.ru/support.php, описав возникшую проблему и приложив скриншоты. Там же вы сможете оставить пожелания по улучшению модуля.
В случае необходимости можно организовать созвон, разговоры записываются.
Установите этот модуль прямо сейчас!
Для этого укажите адрес сайта:
