Как виджет выглядит и работает для посетителя

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

С помощью виджета посетитель может:

• посмотреть точки на карте;
• открыть список объектов;
• воспользоваться поиском;
• применить фильтры;
• открыть карточку точки;
• посмотреть фотографии и видео;
• определить своё местоположение;
• развернуть карту на весь экран.

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

Первый экран зависит от настроек мобильных и десктопных устройств.

Возможны два варианта:

1. Карта сразу отображается внутри страницы.
2. Сначала отображается блок-превью с фотографией или видео и кнопкой для открытия карты.

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

• фоновая фотография;
• фоновое видео;
• короткий текст;
• кнопка, например «Открыть карту».

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

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

• список точек;
• строка поиска;
• кнопка фильтров;
• кнопка определения местоположения;
• кнопка полноэкранного режима;
• кнопка открытия или скрытия списка.

Набор элементов зависит от размера экрана и настроек виджета.

Картой можно управлять привычным способом.

На компьютере посетитель может:

• перемещать карту мышью;
• изменять масштаб;
• нажимать на маркеры;
• нажимать на группы точек;
• разворачивать карту на весь экран.

На телефоне карту можно перемещать пальцем и увеличивать или уменьшать привычными жестами.

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

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

1. маркер становится активным;
2. карта перемещается к выбранной точке;
3. открывается карточка объекта.

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

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

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

На карте находится кнопка «Моё местоположение». Она обозначается значком геолокации.

После нажатия браузер может попросить разрешение на определение местоположения.

Если посетитель разрешит доступ:

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

Помимо маркеров, посетитель может просматривать объекты в виде списка.

В краткой карточке обычно показываются:

• фотография или обложка видео;
• название точки;
• адрес, если его отображение включено.

Список подгружается постепенно. Когда посетитель прокручивает его вниз, Mapfolio загружает следующие точки.

1. Откройте список точек.
2. Найдите нужный объект.
3. Нажмите на его краткую карточку.
4. Mapfolio откроет подробную карточку.
5. Соответствующий маркер станет активным.

Если владелец виджета не скрыл поиск, посетитель увидит поле «Поиск».

Чтобы найти объект, посетителю нужно:

1. нажать на поле «Поиск»;
2. начать вводить название или подходящий запрос;
3. выбрать нужный результат;
4. открыть найденную точку.

Результаты на карте и в списке изменяются с учётом поискового запроса.

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

Кнопка с изображением ползунков открывает раздел «Фильтры».

В нём могут находиться:

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

Набор фильтров зависит от полей, которые владелец Mapfolio настроил для своих точек.

1. Нажмите кнопку «Фильтры».
2. Выберите город, если такой фильтр доступен.
3. Отметьте подходящие варианты.
4. Для числового фильтра укажите значения «От» и «до» или передвиньте ползунки.
5. Нажмите «Показать».
6. Дождитесь обновления карты и списка.

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

Чтобы снова показать все опубликованные точки:

1. откройте раздел «Фильтры»;
2. нажмите «Сбросить»;
3. при необходимости нажмите «Показать точки».

Если ничего не найдено, Mapfolio также может показать ссылку «сбросить фильтр и показать все точки».

Подробная карточка открывается после нажатия на маркер или объект в списке.

В карточке могут отображаться:

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

Пустые поля не показываются.

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

На телефоне также можно воспользоваться системной кнопкой «Назад» браузера. Mapfolio последовательно закрывает открытую карточку, фильтры или полноэкранную карту.

Фотографии отображаются в верхней части карточки.

Если фотографий несколько, посетитель может:

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

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

После нажатия фотография открывается поверх виджета.

Посетитель может:

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

На телефоне фотографию также можно перемещать и увеличивать жестами.

Видео обозначается кнопкой воспроизведения поверх обложки.

После нажатия ролик открывается в окне просмотра. Посетитель может использовать элементы управления видеоплатформы: запускать и останавливать воспроизведение, менять громкость и переходить в полноэкранный режим, если платформа это поддерживает.

На широком экране карта и список могут отображаться одновременно.

Обычно посетитель видит:

• карту с правой стороны;
• список точек в боковой панели;
• поиск над списком;
• кнопку фильтров;
• кнопку «Список» для скрытия или открытия панели;

Подробная карточка открывается поверх списка или в боковой области, а карта остаётся доступной для просмотра.

Если кнопка полноэкранного режима доступна, посетитель может развернуть карту поверх страницы.

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

Для возврата на страницу нужно нажать кнопку закрытия с крестиком.

На телефоне для карты доступно меньше места, поэтому список, фильтры и карточки открываются по очереди.

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

• «Открыть список» — перейти от карты к списку точек;
• «Открыть карту» — вернуться из списка на карту;
• кнопку фильтров — выбрать подходящие условия;
• кнопку поиска — найти объект;
• крестик — закрыть полноэкранный виджет.

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

Так посетитель не теряет карту и может быстро переключаться между точками.

Если поиск или фильтры не подходят ни к одной точке, в списке появляется сообщение «Ничего не найдено».

Посетитель может:

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

После сброса карта и список снова обновятся.

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

Посетитель увидит изменения после загрузки или обновления страницы сайта:

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

Повторно устанавливать код виджета на сайт не требуется.

При проблеме с Яндекс Картами посетитель увидит сообщение «Не удалось загрузить карту» и кнопку «Повторить».

Посетитель может:

1. проверить подключение к интернету;
2. нажать «Повторить»;
3. обновить страницу.

Если ошибка повторяется, владельцу сайта необходимо проверить API-ключ Яндекс Карт и ограничения по доменам.

• На карте отображаются только нужные опубликованные точки.
• Маркеры хорошо заметны на фоне карты.
• Обычный и активный маркеры отличаются.
• Список удобно открывается и закрывается.
• Поиск находит точки по понятным запросам.
• Фильтры показывают правильные варианты.
• После фильтрации обновляются карта и список.
• В карточках правильно отображаются названия и адреса.
• Фотографии открываются в увеличенном виде.
• Видео запускаются.
• Мобильная карточка удобно раскрывается и закрывается.
• Полноэкранный режим работает.
• Виджет проверен на компьютере и телефоне.
• После изменения настроек проверена реальная страница сайта.