Карта без наложенийA map without overlapping pins

ЦельGoal

Инвестор с первого экрана видит, где находятся предложения и от какой цены, и одним нажатием переходит к проекту. Это первая часть цели сайта: сразу видеть предложения на карте и в списке.From the first screen an investor sees where the offers are and what they start from, and gets to a project in one tap. This is the first part of the site's goal: see the offers on the map and in the list right away.

ЗадачаProblem

Ценники на пинах накладывались друг на друга. На общем виде карты 27 меток давали 58 пересечений на компьютере и 66 на телефоне: в Бодруме, Анталье и Стамбуле подписи нельзя было прочитать, а нужный пин — нажать.Pin price labels piled on top of each other. On the overview 27 labels made 58 overlaps on a computer and 66 on a phone: in Bodrum, Antalya and Istanbul the labels could not be read and the right pin could not be tapped.

Как решилиHow it was solved

• Метки, которые на экране пересеклись бы, объединяются в одну — «25 проектов · от 52 тыс. $». Так ведут себя карты Airbnb, Booking и Zillow.Labels that would overlap on screen merge into one — «25 projects · from $52k». Airbnb, Booking and Zillow maps behave the same way.
• Нажатие на такую метку приближает карту к её проектам; если проекты стоят в одной точке, открывается их список.Tapping it zooms the map to its projects; if they stand at one spot, their list opens.
• Метки пересчитываются при каждом изменении масштаба и фильтров; наведение на карточку проекта подсвечивает метку, в которой он находится.Labels are recalculated on every zoom and filter change; hovering a project card highlights the label that holds it.
• Итог: на общем виде — 6 меток и ни одного пересечения (было 27 меток и 58 пересечений). Автотест карты теперь проверяет, что пересечений нет.Result: the overview shows 6 labels and no overlaps (it was 27 labels and 58 overlaps). The map's automated test now checks that there are none.

До и послеBefore and after