Карта объектов на сайте: как связать фильтры, список и маркеры

Фильтр выбрал объекты, а карта оставила прежние точки

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

Две выдачи — одна задача. Если список и метки получают данные разными правилами, одинаковые названия фильтров скрывают разные результаты. Начать стоит с определения объекта. У записи есть устойчивый признак, по которому карточка связывается со своей меткой. Это позволяет выбрать объект на карте и открыть те же сведения, которые человек видел в списке, а не похожую страницу с общим адресом.

Я бы формировал результаты один раз и передавал их обоим видам, потому что отдельное редактирование списка и карты создаёт лишнее место для расхождений и заставляет сотрудников повторять изменения, когда объект закрыт или его условия уже обновлены. Способ передачи определяет разработчик. Для компании критерий прост: набор подходящих объектов совпадает независимо от того, какой вид сейчас открыт.

Адрес и координаты отвечают на разные вопросы

Адрес читают люди, а координаты размещают точку. Запись может иметь понятное текстовое описание и при этом оказаться в неправильном месте на карте. Их принимают вместе.

В JavaScript API Яндекс Карт YMapMarker представляет маркер, привязанный к точке. Параметр coordinates содержит его координаты. Эти названия нужны специалисту при разборе: правильная подпись не исправит перепутанные координаты или точку, полученную по неточному адресу. В карточке каталога полезно сохранить понятное место получения услуги. Для объекта со сложным подъездом можно добавить описание входа, которое не приходится угадывать по положению значка. Полезную подпись берут из данных самого объекта, сохраняя её связь с карточкой каталога.

У Геокодера Яндекса есть показатель precision. В описании ответа exact означает найденный дом с запрошенным номером, а street — результат только до улицы. Это разная точность. Если источник нашёл улицу вместо дома, каталог не должен молча выдавать такую точку за точное положение объекта.

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

Список условий виден после отбора

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

Для каждого фильтра запишите, какое поле объекта он использует и как сочетается с другими условиями, чтобы одинаково выглядящий выбор не означал разные правила на карте и в списке при следующем обновлении интерфейса. Отдельное решение касается нескольких значений одной группы. Компания определяет, подходит ли любой из выбранных типов или требуется другое сочетание. Разработчик показывает результат на подготовленных данных. Правило не оставляют случайному поведению готового компонента. Набор контрольных записей позволяет увидеть действие каждого условия отдельно и в сочетании с другими.

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

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

Состояние адресной строки обсуждают отдельно. Если человек делится ссылкой на найденные объекты, получатель открывает тот же отбор либо видит понятное объяснение, что сохранённые условия больше не действуют.

Перемещение карты не всегда означает новый поиск

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

Сначала выберите правило области. Каталог может показывать все подходящие объекты и отдельно выделять видимые на экране либо ограничивать выдачу текущим прямоугольником карты. Оба варианта допустимы. Но текст о числе найденных объектов объясняет, какую область он считает. Иначе человек сравнивает общий список со случайно видимыми метками и принимает естественную разницу за ошибку фильтра.

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

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

Кластер собирает метки, но не заменяет объекты

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

В официальном примере Яндекс Карт YMapClusterer объединяет точки, а при нажатии на группу карта меняет границы по входящим объектам. Это пример поведения, которое можно согласовать со специалистом. Для посетителя достаточно понять, что за числом находятся отдельные места. После раскрытия группы он получает доступ к их карточкам. Нельзя оставлять плотную группу без понятного продолжения, особенно на телефоне.

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

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

Карточка открывается из списка и из метки

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

Полноэкранная карта и список могут чередоваться, если одновременный показ оставляет слишком мало места для чтения, но переход сохраняет фильтры и выбранный объект, чтобы посетитель не повторял поиск после каждого знакомства с расположением. Открытая карточка имеет понятное закрытие. При возвращении человек видит прежнюю область либо объяснимо возвращается к выбранной точке. Если ссылка ведёт на отдельную страницу, обычное возвращение в каталог тоже включают в приёмку. Состояние не должно зависеть от случайно оставшейся вкладки.

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

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

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

Сохраните правила результата в задании

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

Образец задания: «Список и карта используют общий набор объектов. Фильтры применяются к обоим видам. Каждая метка связана с записью каталога. Правило поиска по видимой области описано отдельно. После переключения вида фильтры и выбор сохраняются». Это основа обсуждения. К ней добавляют поля объекта и ожидаемые состояния отказа.

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

• Устойчивая запись, название и тип объекта.
• Адрес, координаты и способ подтверждения точности.
• Правила сочетания фильтров.
• Смысл счётчика и области поиска.
• Связь метки, списка и карточки.
• Поведение групп с совпадающими координатами.
• Рабочий путь при недоступной карте.

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