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

Визуализируйте любую схему в несколько кликов

Статичные изображения на сайте — это вчерашний день. Посетителю приходится всматриваться в мелкие подписи, чтобы понять, где находится нужный отдел или какой участок свободен. Модуль «Интерактивная SVG карта» решает эту проблему: вы берёте обычный план, фотографию или чертёж и превращаете его в живой, отзывчивый интерфейс. Всё, что требуется — загрузить картинку в формате JPG, PNG или WebP и обвести мышкой ключевые зоны. Больше не нужно заказывать сложную вёрстку у разработчиков или разбираться в координатах. Редактор встроен прямо в административную панель Битрикса, и контент-менеджер справится с ним за пару минут.

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

Реальные сценарии: от генпланов до схем запчастей

Модуль пригодится в самых разных сферах бизнеса. Застройщики и агентства недвижимости получают интерактивные генпланы коттеджных посёлков и поэтажные планы новостроек. Каждая квартира или участок окрашивается в свой цвет: зелёный — свободно, жёлтый — бронь, красный — продано. Покупатель видит актуальную картину без звонков в офис.

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

Инструменты разметки, с которыми справится каждый

Визуальный редактор модуля не требует навыков программирования или дизайна. Вы просто загружаете изображение и выбираете один из трёх способов разметки: рисовать произвольные области мышкой, строить точные многоугольники (полигоны) или ставить маркеры-точки в нужных местах. Каждую зону можно сразу переименовать, задать ей цвет заливки и контура, а также прикрепить ссылку для перехода.

Цветовое кодирование статусов делает карту максимально информативной. Вы сами решаете, какой оттенок соответствует «свободно», «занято» или «в обработке». Это особенно удобно для динамических объектов, где статусы меняются ежедневно. При наведении на любую размеченную область всплывает аккуратная подсказка (tooltip) с названием, ценой или кратким описанием — пользователь получает всю ключевую информацию без лишних кликов.

Адаптивность и работа на любых устройствах

Современный сайт обязан одинаково хорошо выглядеть на десктопе, планшете и смартфоне. SVG-карта автоматически подстраивается под ширину окна браузера: она плавно масштабируется, не теряя чёткости и не «разваливая» разметку. На больших мониторах все зоны остаются кликабельными, а на мобильных экранах модуль корректно обрабатывает касания пальцем — ложных срабатываний не возникает.

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

Пошаговая настройка за 5 минут

Чтобы запустить интерактивную карту на своём сайте, достаточно выполнить несколько простых действий. После установки модуля зайдите в административном меню в раздел «Сервисы» → «SVG Карты» → «Список карт» и нажмите «Добавить карту». Придумайте название (например, «План первого этажа» или «Схема парка») и загрузите изображение в одном из поддерживаемых форматов.

После загрузки перед вами откроется визуальный редактор. Выберите инструмент разметки и кликами мыши обведите нужные участки или поставьте маркеры. Сразу после добавления объекта в боковой панели появится запись, где можно задать название для подсказки, ссылку и цвет. Когда карта готова, сохраните её — система присвоит ей уникальный ID. Затем откройте любую страницу сайта в визуальном редакторе Битрикса и добавьте стандартный компонент goodsol:imagemap, указав в настройках этот ID. Карта появится на странице мгновенно и будет готова к работе с вашими клиентами.