Интерактивная SVG карта (объекты на изображениях)

Что умеет решение

Модуль «Интерактивная карта» преобразует статичные изображения, планы и схемы в кликабельные элементы сайта. Визуальный редактор позволяет выделять области, назначать им цвета, добавлять всплывающие подсказки и ссылки.

Инструмент оптимизирует восприятие пространственных данных, заменяя текстовые списки интерактивным планом. Подходит для недвижимости: генпланы поселков, поэтажные планы и схемы бизнес-центров с цветовой индикацией статуса участков или квартир. Эффективен для торговых центров и выставок: навигация по павильонам, магазинам и фудкортам с переходом на страницы описания. Полезен автодилерам и сервисам: интерактивные схемы автомобилей с подсказками о деталях и ссылками на каталоги запчастей.

Интерактивная SVG-карта (объекты на изображениях)

Модуль включает встроенный визуальный редактор, позволяющий размечать координаты на изображениях без участия программистов. В административной панели Битрикса достаточно загрузить картинку и выделить нужные области мышью, используя многоугольники, круги или прямоугольники.

Функция цветового кодирования статусов позволяет назначать уникальные цвета заливки и контура для каждой зоны. Это дает возможность визуально отображать состояние объектов: зеленый цвет означает «свободно», желтый — «бронь», красный — «продано».

Система информативных подсказок (Tooltips) показывает всплывающее окно с названием объекта, ценой или кратким описанием при наведении курсора на выделенную область.

Решение обладает полной адаптивностью: карта автоматически подстраивается под размер окна, корректно отображается и плавно масштабируется на экранах любых габаритов, от больших мониторов до мобильных телефонов.

Модуль полностью оптимизирован для сенсорных экранов. На мобильных устройствах области легко нажимаются пальцем без ложных срабатываний.

Модуль позволяет создавать интерактивные SVG-карты, размещая на изображениях кликабельные объекты. Процесс настройки доступен контент-менеджеру без специальных технических навыков.

Для создания новой карты перейдите в административном меню в раздел Сервисы → SVG Карты → Список карт и нажмите кнопку «Добавить карту». Введите название карты, например «Генплан поселка» или «План этажей ТЦ», и загрузите изображение в формате JPG, PNG или WebP.

После загрузки изображения откроется визуальный редактор. Доступны три инструмента разметки: рисование мышкой, создание полигонов и установка точек. С помощью мыши обведите нужный участок или поставьте маркеры в требуемых местах.

При добавлении объекта сразу открывается панель его настройки. Здесь можно задать название, которое будет отображаться в подсказке при наведении курсора, указать ссылку для перехода, выбрать цвет заливки области или размер точки.

5. Размещение на сайте. После сохранения схемы в списке появится её уникальный идентификатор. Перейдите на нужную страницу сайта, откройте визуальный редактор Битрикса и добавьте стандартный компонент goodsol:imagemap. В настройках компонента укажите полученный ID. Интерактивная карта сразу отобразится на странице и будет готова к работе с посетителями.

General iT поможет установить модуль, настроить его и проверить работу на твоём сайте.