Интерактивная SVG карта (объекты на изображениях)
Модуль «Интерактивная карта» позволяет превратить любую статичную картинку, план или схему в живой, кликабельный элемент вашего сайта. С помощью удобного визуального редактора вы можете выделять определенные области на изображении, назначать им цвета, добавлять всплывающие подсказки и ссылки.
Это идеальный инструмент для визуализации пространственных данных. Вместо того чтобы заставлять пользователя изучать скучные текстовые списки или таблицы, вы даете ему возможность взаимодействовать с наглядным планом, что значительно облегчает восприятие.
Для каких задач подходит модуль?
- Недвижимость и застройщики: Интерактивные генпланы коттеджных поселков, поэтажные планы новостроек или схемы бизнес-центров. Клиент сразу видит свободные, забронированные и проданные участки или квартиры благодаря цветовой индикации.
- Торговые центры и выставки: Схемы расположения павильонов, магазинов или фудкортов. Посетитель может навести курсор на нужный отдел, узнать его название и перейти на страницу с подробным описанием.
- Автодилеры и сервисы: Интерактивные схемы устройства автомобиля, где при наведении на деталь всплывает подсказка с ее названием и ссылкой на каталог запчастей.
Ключевые преимущества
- Встроенный визуальный редактор: Вам больше не нужно привлекать программистов или дизайнеров для разметки координат. В административной панели Битрикса встроен удобный редактор: просто загрузите картинку и обведите нужные области мышкой (многоугольниками, кругами или прямоугольниками).
- Цветовое кодирование статусов: Вы можете задавать разные цвета для заливки и контура каждой области. Это позволяет наглядно показывать статусы объектов: зеленый — «свободно», желтый — «бронь», красный — «продано».
- Информативные подсказки (Tooltips): При наведении курсора на выделенную зону пользователь увидит аккуратную всплывающую подсказку с названием объекта, ценой или кратким описанием.
- Абсолютная адаптивность: Карта автоматически подстраивается под размеры окна. Она корректно отображается и плавно масштабируется как на больших мониторах, так и на экранах мобильных телефонов.
- Поддержка сенсорных экранов: Модуль полностью оптимизирован для мобильных устройств — области легко нажимаются пальцем без ложных срабатываний.
Мы позаботились о том, чтобы процесс создания карты был максимально простым и интуитивно понятным для контент-менеджера:
1. Добавление новой карты. После установки модуля перейдите в административном меню в раздел Сервисы (Сервисы → SVG Карты → Список карт) и нажмите кнопку «Добавить карту».
2. Загрузка изображения. Введите название карты (например, «Генплан поселка» или "План этаже ТЦ") и загрузите нужное изображение в формате JPG, PNG или WebP. Нажмите «Применить».
3. Разметка объектов. После загрузки картинки вверху страницы появится визуальный редактор. Выберите подходящий инструмент ("Рисовать мышкой", "Рисовать полигоном", "Поставить точку") и кликами мыши или обведите нужный участок на загруженной картинке или поставьте маркеты (точки) в нужных местах.
4. Настройка области. При добавлении объектов на карте рядом сразу появится новя запись, где можно задать название (оно будет выводиться в подсказке при наведении) и ссылку, в также сможет выбрать цвет заливки объекта или размер добавляемых точек.
5. Размещение на сайте. Сохраните карту. В списке карт вы увидите уникальный ID вашей новой схемы. Перейдите на любую страницу сайта, откройте визуальный редактор Битрикса и разместите стандартный компонент goodsol:imagemap, указав в его настройках нужный ID.
Готово! Интерактивная карта сразу же появится на странице и будет готова к работе с вашими клиентами.
