Это идеальный инструмент для визуализации пространственных данных. Вместо того чтобы заставлять пользователя изучать скучные текстовые списки или таблицы, вы даете ему возможность взаимодействовать с наглядным планом, что значительно облегчает восприятие.
Для каких задач подходит модуль?
- Недвижимость и застройщики: Интерактивные генпланы коттеджных поселков, поэтажные планы новостроек или схемы бизнес-центров. Клиент сразу видит свободные, забронированные и проданные участки или квартиры благодаря цветовой индикации.
- Торговые центры и выставки: Схемы расположения павильонов, магазинов или фудкортов. Посетитель может навести курсор на нужный отдел, узнать его название и перейти на страницу с подробным описанием.
- Автодилеры и сервисы: Интерактивные схемы устройства автомобиля, где при наведении на деталь всплывает подсказка с ее названием и ссылкой на каталог запчастей.
Ключевые преимущества
- Встроенный визуальный редактор: Вам больше не нужно привлекать программистов или дизайнеров для разметки координат. В административной панели Битрикса встроен удобный редактор: просто загрузите картинку и обведите нужные области мышкой (многоугольниками, кругами или прямоугольниками).
- Цветовое кодирование статусов: Вы можете задавать разные цвета для заливки и контура каждой области. Это позволяет наглядно показывать статусы объектов: зеленый — «свободно», желтый — «бронь», красный — «продано».
- Информативные подсказки (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, описав возникшую проблему и приложив скриншоты. Там же вы сможете оставить пожелания по улучшению модуля.
В случае необходимости можно организовать созвон, разговоры записываются.
Для покупки товара в нашем интернет-магазине выберите понравившийся товар и добавьте его в корзину. Далее перейдите в Корзину и нажмите на «Оформить заказ» или «Быстрый заказ».
Если оформляете быстрый заказ: напишите ФИО, телефон и e-mail. Вам перезвонит менеджер и уточнит условия заказа. По результатам разговора вам придет подтверждение оформления товара на почту или через СМС. Теперь останется только ждать доставки и радоваться новой покупке.
Оформление заказа в стандартном режиме выглядит следующим образом. Заполняете полностью форму по последовательным этапам: адрес, способ доставки, оплаты, данные о себе. Советуем в комментарии к заказу написать информацию, которая поможет курьеру вас найти. Нажмите кнопку «Оформить заказ».
Оплачивайте покупки удобным способом. В интернет-магазине доступно 3 варианта оплаты:
- Наличные при самовывозе или доставке курьером. Специалист свяжется с вами в день доставки, чтобы уточнить время и заранее подготовить сдачу с любой купюры. Вы подписываете товаросопроводительные документы, вносите денежные средства, получаете товар и чек.
- Безналичный расчет при самовывозе или оформлении в интернет-магазине: карты МИР. Чтобы оплатить покупку на сайте, система перенаправит вас на сервер платежной системы. Здесь нужно ввести номер карты, срок действия и имя держателя.
- Электронные системы при онлайн-заказе: ЮMoney. Для совершения покупки система перенаправит вас на страницу платежного сервиса. Здесь необходимо заполнить форму по инструкции.
- Безналичная оплата на наш расчетный счет по выставленному счету.
Экономьте время на получении заказа. В интернет-магазине доступно 4 варианта доставки:
- Электронная поставка - все необходимые сведения о лицензии, праве пользования, кодах, ключах и др. высылаются покупателю на его e-mail.
- Курьерская доставка. Когда товар будет отправлен с нашего склада, Вам придет уведомление. В день доставки с Вами заблаговременно свяжется курьер для уточнения времени и деталей доставки. Доставка производится "до двери". Осмотрите упаковку на целостность и соответствие указанной комплектации.
- Постамат. Когда заказ поступит на точку, на Ваш телефон или e-mail придет уникальный код. Заказ нужно оплатить в терминале постамата. Срок хранения — 3 дня.
- Доставка Почтой России. Когда заказ придет в отделение, на Ваш адрес придет извещение о посылке. Перед оплатой Вы можете оценить состояние коробки: вес, целостность. Вскрывать коробку самостоятельно Вы можете только после оплаты заказа. Один заказ может содержать не больше 10 позиций и его стоимость не должна превышать 100 000 р.
Дополнительная информация.
Изучите полный алгоритм продления лицензий на модули 1С-Битрикс: Маркетплейс, включая активацию льготных купонов. Мы детально разбираем все условия: обязательный 30-дневный срок для сохранения максимальной выгоды, пропорциональное ценообразование (12,5%, 25%, 50% от цены модуля) и ограничение по минимальной сумме в 500 рублей. Этот гайд поможет вам эффективно планировать бюджет и гарантировать актуальность вашего проекта.
