Тип компонента Карта с метками

Что это за компонент

Карта с метками - это компонент, который показывает интерактивную карту с отмеченными точками.

Если говорить совсем просто, это блок, где клиент видит:

• заголовок
• короткий вводный текст
• карту
• точки на карте
• карточку с подробностями по метке после нажатия

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

Когда использовать именно этот тип

Карта с метками подходит, если нужно:

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

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

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Карта с метками.
2. В карточке компонента заполняются заголовок и общий текст.
3. Ниже добавляются метки с координатами и описанием.
4. После сохранения компонент размещается на странице.
5. В mini app клиент видит карту с точками и может нажимать на них, чтобы открыть подробности.

1. Как создать компонент Карта с метками

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Карта с метками.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Заполните заголовок.
7. При необходимости добавьте общий текст над картой.
8. Нажмите Новая метка.
9. Заполните первую метку.
10. Добавьте остальные точки.
11. Проверьте карту.
12. Сохраните компонент.
13. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Карты с метками используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В обычной работе он нужен редко.

Тип

Для этого документа тип всегда будет Карта с метками.

Он определяет:

• состав полей компонента
• внешний вид блока у клиента
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название карты в Omnis.

Лучше использовать понятные названия, например:

• Карта магазинов
• Пункты самовывоза
• Наши филиалы
• Точки продаж по городу

Приоритет

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

Активирован

Этот переключатель помогает:

• включать рабочую карту
• хранить черновики
• временно скрывать блок без удаления

3. Общие поля самой карты

Ниже стандартных полей находится область настройки самой карты.

У компонента есть общий заголовок, общий текст и список меток.

Заголовок

Это заголовок блока, который клиент видит над картой.

Он помогает сразу объяснить смысл карты. Например:

• Где нас найти
• Наши адреса
• Точки самовывоза
• Филиалы компании

Контент

Это общий текст над картой.

Он отображается перед самой картой и помогает дать короткое пояснение. Например:

• как выбрать подходящую точку
• в каких случаях обращаться в конкретный филиал
• важное замечание по графику работы
• пояснение по зоне доставки или самовывозу

Если такой вводный текст не нужен, поле можно оставить пустым.

Новая метка

Это кнопка добавления новой точки на карту.

Каждая добавленная запись становится отдельной меткой.

4. Как устроены метки на карте

Ниже общего блока располагается список меток.

Каждая метка настраивается отдельно и может содержать:

• название
• координаты
• иконку
• короткое описание
• подробный текст

Изменение порядка меток

Метки можно переставлять местами.

Это полезно, если нужно:

• поставить главную точку первой
• сгруппировать точки в нужной последовательности
• управлять порядком данных внутри компонента

Удаление метки

У каждой метки есть удаление.

Это нужно, если точка больше не актуальна или была добавлена по ошибке.

5. Все поля отдельной метки

У каждой метки есть собственный набор полей.

Наименование

Это название точки.

Именно оно обычно используется как главный заголовок при открытии подробностей по метке.

Хорошие примеры:

• Магазин на Тверской
• Пункт самовывоза Север
• Офис продаж
• Склад на юге города

Широта

Это одна из координат точки на карте.

Без корректной широты метка не сможет встать в нужное место.

Практический совет:

• копируйте координаты внимательно
• не округляйте их слишком грубо
• после сохранения проверяйте, что точка стоит именно там, где нужно

Долгота

Это вторая координата точки на карте.

Она работает вместе с широтой и определяет точное положение точки.

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

Иконка

Это необязательное изображение для метки.

Если иконка добавлена, она показывается внутри маркера на карте.

Это полезно, если нужно:

• выделить фирменные точки
• отличать разные типы локаций
• сделать карту визуально более узнаваемой

Если иконку не задавать, карта использует стандартный значок метки.

Описание

Это короткий текст по точке.

Он показывается в карточке метки как краткое пояснение под названием.

Здесь удобно указывать:

• короткий адрес
• краткую подсказку
• назначение точки
• важную деталь в одну-две строки

Контент

Это более подробный текст по конкретной метке.

Он показывается после нажатия на метку в карточке подробностей.

Здесь удобно размещать:

• полный адрес
• режим работы
• инструкцию по проходу или подъезду
• комментарий по условиям самовывоза
• дополнительную информацию для клиента

6. Как Карта с метками выглядит у клиента

В mini app этот компонент показывает:

• заголовок
• общий текст
• карту
• интерактивные метки

Что происходит при нажатии на метку

Когда клиент нажимает на метку:

• открывается карточка с подробностями по выбранной точке
• в карточке показывается Наименование
• ниже выводится Описание
• затем выводится основной Контент, если он заполнен

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

Если меток много

Если на карте расположено много точек близко друг к другу, они могут объединяться в общий значок с числом.

Это помогает:

• не перегружать карту
• избежать наложения меток друг на друга
• упростить навигацию по плотным зонам

Если ключ карты не задан

Если для карты не настроен ключ, вместо рабочей карты клиент увидит сообщение о том, что карта недоступна.

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

7. Общие настраиваемые свойства компонента

Как и у других компонентов, у Карты с метками действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить карту от соседних блоков
• сделать страницу аккуратнее
• дать больше воздуха вокруг карты

8. Собственные настраиваемые свойства Карты с метками

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

Подключение карты

• apikey - ключ карты
• initial-zoom - начальный масштаб карты

apikey нужен для работы карты.

Практически здесь важно понимать:

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

initial-zoom помогает определить, насколько близко карта будет открываться изначально.

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

Заголовок и общий текст

• color-label - цвет заголовка
• weight-label - насыщенность заголовка
• size-label - размер заголовка
• color-content - цвет общего текста
• weight-content - насыщенность общего текста
• size-content - размер общего текста

Эти свойства помогают:

• сделать заголовок заметнее
• сделать поясняющий текст спокойнее
• привести блок к фирменному стилю витрины

Размер карты

• height-map - высота блока карты
• round-map - скругление контейнера карты

Эти свойства влияют на то, как карта выглядит на странице:

• более высокая карта показывает больше области
• более компактная карта занимает меньше места
• мягкое скругление делает блок дружелюбнее визуально

Внешний вид отдельных меток

• pm-shape-size - размер метки
• pm-color - основной акцентный цвет метки
• pm-shape-offset - внутренний отступ внутри метки
• pm-radius - скругление метки
• pm-border - рамка метки
• pm-background-color - фон метки

Эти свойства помогают:

• сделать метки более заметными
• поддержать фирменный стиль
• отличить карту вашего проекта от стандартного вида

Для pm-border в редакторе доступны готовые пресеты рамок, чтобы быстрее подобрать мягкую, обычную, плотную или пунктирную границу без ручного ввода.

Внешний вид групповых значков

• cluster-size - размер группового значка
• cluster-round - скругление группового значка
• cluster-font-weight - насыщенность числа внутри значка
• cluster-bg - фон группового значка
• cluster-color - цвет числа
• cluster-border - рамка группового значка

Эти свойства особенно важны, если на карте много точек.

С их помощью можно сделать групповые значки:

• более заметными
• более аккуратными
• более читаемыми на светлом или темном фоне карты

Для cluster-border используется тот же готовый набор пресетов рамок, что и для pm-border.

9. Практические рекомендации по настройке

Чтобы Карта с метками была действительно полезной клиенту, полезно придерживаться нескольких правил.

Всегда проверяйте координаты

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

Делайте названия точек понятными

Клиент должен быстро понимать, что это за место. Лучше ясное название точки, чем внутреннее служебное имя.

Не перегружайте короткое описание

Описание лучше использовать как краткое пояснение, а более подробную информацию переносить в Контент.

Проверяйте карту на телефоне

На мобильном экране важно убедиться:

• удобно ли нажимать на метки
• читается ли карточка подробностей
• достаточно ли заметны точки
• не выглядит ли карта слишком низкой или слишком высокой

Проверяйте наличие рабочего ключа карты

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