Интерактивная SVG-карта с объектами на изображениях

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

Для каких задач подходит модуль?

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

Ключевые преимущества

• Встроенный визуальный редактор: Вам больше не нужно привлекать программистов или дизайнеров для разметки координат. В административной панели Битрикса встроен удобный редактор: просто загрузите картинку и обведите нужные области мышкой (многоугольниками, кругами или прямоугольниками).
  
• Цветовое кодирование статусов: Вы можете задавать разные цвета для заливки и контура каждой области. Это позволяет наглядно показывать статусы объектов: зеленый — «свободно», желтый — «бронь», красный — «продано».
  
• Информативные подсказки (Tooltips): При наведении курсора на выделенную зону пользователь увидит аккуратную всплывающую подсказку с названием объекта, ценой или кратким описанием.
  
• Абсолютная адаптивность: Карта автоматически подстраивается под размеры окна. Она корректно отображается и плавно масштабируется как на больших мониторах, так и на экранах мобильных телефонов.
  
• Поддержка сенсорных экранов: Модуль полностью оптимизирован для мобильных устройств — области легко нажимаются пальцем без ложных срабатываний.
  

Как настроить модуль (пошаговая инструкция)

Мы позаботились о том, чтобы процесс создания карты был максимально простым и интуитивно понятным для контент-менеджера:

1. Добавление новой карты. После установки модуля перейдите в административном меню в раздел Сервисы (Сервисы → SVG Карты → Список карт) и нажмите кнопку «Добавить карту».

2. Загрузка изображения. Введите название карты (например, «Генплан поселка» или "План этаже ТЦ") и загрузите нужное изображение в формате JPG, PNG или WebP. Нажмите «Применить».

3. Разметка объектов. После загрузки картинки вверху страницы появится визуальный редактор. Выберите подходящий инструмент ("Рисовать мышкой", "Рисовать полигоном", "Поставить точку") и кликами мыши или обведите нужный участок на загруженной картинке или поставьте маркеты (точки) в нужных местах.

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

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

Готово! Интерактивная карта сразу же появится на странице и будет готова к работе с вашими клиентами.