Как сгруппировать отметки на картах

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

В этом материале мы продемонстрируем, как использовать JavaScript-библиотеку для группировки маркеров Google Maps. Это позволит представить информацию структурированно, исключив наложение объектов друг на друга. Мы также разберем механику работы этого инструмента, чтобы вы могли эффективно кастомизировать группы маркеров в своих проектах.

Зачем вообще нужна группировка маркеров?

Для наглядности рассмотрим карту Новой Зеландии и Австралии, где объекты распределены с использованием кластеризации Google Maps:

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

Если Ваша карта выглядит примерно так, это мешает Вашим клиентам удобно и корректно воспринимать информацию, которую Вы предоставляете. Но решение есть, это – кластеризация маркеров. С помощью простой библиотеки с открытым кодом и небольшим изменением кода Вашей карты можно добавить группировку маркеров, что значительно улучшит user experience для клиентов.

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

Активируйте кластеризацию маркеров на вашей карте

Вы можете внедрить кластеризацию маркеров, добавив всего несколько строк JavaScript. Данный кейс демонстрирует реализацию для веб-карт, однако аналогичные инструменты доступны в рамках Android Maps и Google Maps Platform SDK. Прежде чем создавать кластер, рассмотрим процесс разработки стандартных маркеров. При нативном добавлении маркеров на карту код будет выглядеть следующим образом:

const pos1 = {lat: -33.727111, lng: 150.371124};

const marker1 = new google.maps.Marker({position: pos1, map: map});

const pos2 = {lat: -33.718234, lng: 150.363181};

const marker2 = new google.maps.Marker({position: pos2, map: map});

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

Для активации функционала внесите два изменения в код. Во-первых, загрузите библиотеку кластеризации. Для продакшн-решений рекомендуем скачать её с GitHub и разместить JavaScript-файл на вашем сервере. В рамках данного демо мы используем библиотеку с сайта документации Google Maps Platform:

При клике на значок кластера пределы карта масштабируется до уровня, когда видно оба маркера:

Когда Вы уменьшите масштаб на несколько уровней, пиктограмма кластера вернется вместо двух маркеров, как только карта будет на уровне, когда они могут пересекаться.

В этом гайде по кластеризации маркеров есть полная информация и примеры с большим количеством точек

Как работает кластеризация маркеров

Библиотека кластеризации маркеров это часть open source map utilities on GitHub. Вы можете получить доступ ко всему коду и даже вносить собственные изменения по мере необходимости. Давайте рассмотрим работу алгоритма в целом.

Для начала алгоритм делит карту на сетку, при этом каждый раздел сетки по умолчанию 60×60 пикселей. Используя пример с перекрытием маркеров выше, это можно визуализировать так:

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

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

Кастомизируйте ваш Google Maps кластеризатор: Подходы и параметры

Существует множество способов настроить визуализацию и поведение ваших кластеров. Многие из них не требуют модификации базовой библиотеки — достаточно задать ряд параметров при инициализации.

Самый простой способ кастомизировать кластеры в Google Maps — использовать собственные иконки. В базовом примере мы передавали параметр imagePath. Библиотека автоматически добавляет число (от 1 до 5) в конец пути, за которым следует расширение файла (по умолчанию .png). Вы можете определить другой формат через параметр imageExtension. Учитывайте, что использование иконок с прозрачностью обеспечивает более профессиональный вид интерфейса.

По умолчанию для формирования кластера достаточно двух маркеров. С помощью опции minimumClusterSize вы можете изменить этот порог. Увеличение этого значения может привести к наложению маркеров друг на друга, однако вы также можете настроить порог перекрытия.

Ниже приведены другие ключевые параметры для управления воркфлоу библиотеки:

gridSize: количество пикселей в сетке кластеризации.

zoomOnClick: автоматическое масштабирование (зум) при клике на кластер.

maxZoom: максимальный уровень масштабирования, после которого всегда отображаются стандартные маркеры.

styles: массив объектов для каждого типа кластера, включая textColor, textSize и другие атрибуты визуализации.

Пример совместного использования вышеперечисленных опций:

// Опции для передачи в кластеризатор маркеров const clusterOptions = { imagePath: «https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m», gridSize: 30, zoomOnClick: false, maxZoom: 10 };

// Добавление кластеризатора для управления маркерами const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);

// Изменение стилей после создания кластера const styles = markerClusterer.getStyles(); for (let i=0; i<styles.length; i++) { styles[i].textColor = «red»; styles[i].textSize = 18; }

Например, вы можете комбинировать все эти параметры следующим образом:

Как Вы уже заметили есть 2 отличия: больше кластеров (через меньший размер сетки), цифры красные и немного больше.

При клике на кластер масштаб не изменится, зато его можно увеличить вручную. Отдельные маркеры появятся быстрее, размер сетки обеспечивает меньший шанс наложения маркеров. Как только Вы достигнете уровня масштаба 10 (карта начинается с уровня 3), все маркеры будут отражены независимо от того, насколько они близки.

На данный момент Вы перешли от переспамленной маркерами карты к элегантно кластеризованной. Используйте эти новые знания, чтобы обеспечить Вашим пользователям лучший user experience на картах с большим количеством маркеров. Вы можете найти еще больше способов кастомизировать библиотеку кластеризации маркеров, читая ее код.

Для внедрения этих и других функций – обращайтесь к нашей команде специалистов Google Maps Platform за консультацией или технической экспертизой. Кроме этого, компания Cloudfresh – официальный партнер Google Maps в Центральной Азии. Мы предоставляем возможность оплаты по безналичному расчету для предприятий с подготовкой всех необходимых бухгалтерских и юридических документов.

Что мы предлагаем?

• Консультации и интеграция API;
• Сервисы на основе платформы Google Maps;
• Техническое обучение ваших команд;
• Техническую поддержку.

Сотрудничая с нами, вы получите следующее:

• Доступ к 7-уровневой системе скидок, которая возможна только с партнером Google Maps;
• Оплата по счету юридическому лицу в евро, долларах США, чешских кронах, злотых, гривнах или любой другой валюте;
• Профессиональная поддержка на протяжении всего процесса использования услуг.