При создании сайтов для клиентов мы в
При анализе
[spoiler]
В реализации же это не совсем тривиальная задача, поскольку нужно вспомнить API карт и лучшие практики реализации требуемого функционала, «подружить» php с js, добавить приправ в виде стилизованных иконок, кластеров, изображений объектов и завершить это всё тестированием. Работают над задачей несколько специалистов от дизайнера до бэкэнд-программиста, каждый делает это по-своему и каждый раз как в первый раз, ну или использует каждый свои заготовки-наработки, которые постепенно дописываются.
Мы постарались учесть все эти моменты и сделать хороший и простой модуль, удовлетворяющий наиболее часто возникающим потребностям. Выбрали оптимальный набор настроек для возможности кастомизации оформления и в то же время удобной и быстрой настройки компонента. Представляемое готовое решение позволяет сократить время на выполнение определенных задач и тестирование результата, оно настраиваемо и прошло контроль качества. Решение называется
Мы использовали Яндекс.Карты и заложили следующие возможности для настройки:
- Кластеризация.
- Собственные метки, которые могут быть различными для разных типов объектов.
- Вывод названия, фото и краткого описания объекта в балуне из любых свойств элемента, а также возможность вывода ссылки на подробное описание.
- И другие настройки, такие как: размеры, центр и приближение карты, настройки отображения и поведения карты.
- Последняя версия API карт.
- Удобные настройки.
- Минимум необходимых настроек при установке: по умолчанию все заданы и компонент сразу работает. Необходимо указать только инфоблок и поле с координатами.
- Чистый код, индексируемое содержимое (за счёт вывода данных в разметке и отдельно оформленного js-обработчика).
- Поддержка композита.
- Поддержка адаптива. Реализована она за счёт возможности указания размеров карты в любых css-единицах и адаптивности Яндекс.Карт.
- Список офисов компании на карте с фото и адресами.
- Сеть торговых точек, пунктов обслуживания, складов, пунктов выдачи/приемки, дилеров, партнёров на карте города/страны.
- Интерактивный список городов присутствия компании.
- Список регионов доставки с указанием стоимости и деталей доставки и так далее…
Интерактивное представление любых объектов, имеющих географические координаты, всегда гораздо нагляднее и может быть альтернативным или дополнительным способом представления необходимой пользователю информации, а также повышает удобство её восприятия. При этом компонент впишется в любой дизайн, потому что не содержит сложной разметки и не требует стилизации. В то же время имеется возможность изменить оформление содержимого балунов, если это потребуется, используя файл стилей. Для продвинутого использования также имеются возможность передачи параметров фильтрации данных в компонент для организации фильтров выводимых объектов.
Дополнительно к данному решению мы разработали ещё одно, которое позволяет сократить время наполнения координатами данных для вывода на карте:
Решение представляет из себя аналог типа свойства «Привязка к Яндекс.Карте», но имеет более удобный интерфейс, свежую версию карты и самое полезное – автоматическое геокодирование по адресу, указанному в других свойствах элемента. То есть, если у вас есть поле «адрес» у элементов инфоблока, либо, например, поля «город», «улица», «дом», и требуется вывести объекты на карте, то данное решение позволит ускорить заполнение полей координат для этих элементов.
Рады поделиться нашими решениями и будем благодарны за обратную связь. Пользуйтесь на здоровье и создавайте качественные продукты для себя и клиентов!
Ссылки на решения: