На сайте агентства коммерческой недвижимости Minds Capital (https://mindscapital.ru/) понадобилось изменить карту, на которой отмечены все объекты, присутствующие в базе агентства. Первая версия карты решала основную задачу - отобразить отметки, указывающие на объекты. Важная особенность этой карты - кластеризация отметок при маленьком масштабе. То есть, чтобы не перегружать карту большим количеством отметок, они объединяются в кластер. Кластер выглядел так же, как отметка одиночного объекта, но с числом, которое указывало на количество объектов в одном кластере.
Для реализации первой версии карты использовался JS-скрипт от внешнего разработчика, найденный на просторах интернета. Два года карта прекрасно выполняла свою функцию. Но спустя некоторое время стало ясно, что карте нужна наглядность и удобство. Карта работала просто - щелкаем на отметке объекта, - получаем небольшой балун с адресом; щелкаем по адресу - переходим на страницу с описанием объекта коммерческой недвижимости. Если щелкаем по кластеру, то просто меняется масштаб карты до тех пор, пока на ней не отобразятся отметки объектов.
Карта сделана на базе технологии Яндекс.Карта. Поскольку первая версия карты была сделана несколько лет назад, то для реализации новых возможностей понадобилось перейти на более новую версию платформы. Именно благодаря этому и получилось добавить наглядность и удобство.
Что мы имеем в итоге? Новая карта (https://mindscapital.ru/buildings/map) получила разноцветные отметки.
Цвет отметки означает тип сделки по объекту недвижимости. Таким образом, посетитель сразу может понять, какой из объектов подходит ему для решения своей бизнес-задачи. Желаете купить недвижимость под магазин, салон красоты или производство? Вот, пожалуйста, отметки красного цвета. Если нужна просто аренда, то на это покажут отметки голубого цвета. А отметки зеленого цвета, это продажа объектов коммерческой недвижимости с арендатором, т.е. это фактически инвестиция в стабильный доход от аренды.
Конечно же осталась кластеризация отметок. Но теперь и кластер имеет вид диаграммы, у которой цветные сектора указывают на наличие объектов с определенным типом сделки.
Дальше еще интереснее. Если щелкнуть по метке с одиночным объектом, то появится балун, в котором можно сразу увидеть краткую информацию по объекту и его фотографию.
Клик по заголовку или изображению в балуне приведет на страницу с подробным описанием объекта.
Аналогично работают и кластеры. Теперь при щелчке по кластеру не станет изменяться масштаб карты (это ведь можно сделать и прокруткой колесиком мышки или пальцами на экране смартфона), а также появится балун с краткой информацией по тем объектам, которые объединены кластером. Когда объектов в кластере много, то балун формирует из них карусель с постраничным просмотром.
Важной частью работы над новой версией карты стало создание серверной бизнес-логики всего веб-приложения. Как было сказано выше, у первой версии использовался JS-скрипт внешнего разработчика. Это сильно ограничивало в создании новой версии, поскольку понадобилось контролировать внутренние процессы при работе с источником данных и дальнейшее формирование внешнего вида. От чужого скрипта отказались, но разработали собственную серверную часть.
На создание новой версии карты и ее отладку ушло пять рабочих дней. Основная цель - наглядность и удобство - решена. Ожидаемый эффект от этого новшества - повышение вовлеченности посетителей сайта в процесс подбора объектов коммерческой недвижимости, увеличение числа контактов при коммуникации с брокерами. И, учитывая полученный опыт при разработке, позволит в дальнейшем реализовать новые идеи с использованием интерактивных инструментов.
