Як згрупувати відмітки на картах Google

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

У цьому дописі ми продемонструємо, як за допомогою JavaScript-бібліотеки групування маркерів Google Maps структурувати дані, уникаючи накладання елементів. Ми також розберемо принципи роботи цього інструменту, щоб ви могли ефективно виконувати кастомізацію груп маркерів у власних проєктах.

Навіщо потрібне групування маркерів: Стратегічні переваги

Для порівняння розглянемо цю карту Нової Зеландії та Австралії, де застосовано кластеризацію Google Maps для розсіяних об’єктів:

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

Якщо Ваша карта виглядає приблизно так, це заважає Вашим клієнтам зручно і коректно сприймати інформацію, яку Ви намагаєтесь представити. Але рішення є, це – кластеризація маркерів. За допомогою простої бібліотеки з відкритим кодом та невеликою зміною коду Вашої карти можна додати групування маркерів, що значно покращить user experience для клієнтів.

Кластеризація маркерів зручний інструмент для візуальної консолідації маркерів, що полегшує клієнтам читання карти в цілому. Він групує маркери, що знаходяться поруч на карті, у кластер, який відображається як єдиний значок.

Активація кластеризації маркерів на вашій карті: Технічна реалізація

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

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:

<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>

Далі інтегруйте карту та маркери в бібліотеку кластеризації Google Maps, додавши ці рядки під змінними маркерів:

// створюємо масив усіх ваших маркерів const markers = [marker1, marker2];

// Шлях до іконок кластерів, що будуть додані (1.png, 2.png тощо) const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;

// Активація кластеризації для цієї карти та цих маркерів const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});

Знову ж таки, для комерційного використання ви маєте хостити зображення кластерів на власних серверах. У цьому прикладі завантажиться m1.png, оскільки обсяг даних потребує лише мінімального розміру кластера.

Під час створення екземпляра MarkerClusterer ви передаєте змінну карти, масив маркерів та шлях до зображень. Бібліотека, отримавши ці дані, відображає іконку кластера з кількістю точок, наявних у групі:

При кліку на піктограму кластера межі карта масштабується до рівня, коли видно обидва маркера:

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

В цьому гайді з кластеризації маркерів є розгорнути інформація та приклади  з більшою кількістю точок

Як працює кластеризація маркерів

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

Для початку алгоритм ділить карту на сітку, при цьому кожен розділ сітки за замовчуванням до 60×60 пікселів. Використовуючи приклад з перекриттям  маркерів вище, це можна візуалізувати так:

Насправді сітка не буде ідентичною наведеній вище, оскільки вона формується на основі самих маркерів. Перший маркер стає центром першого сектора. Наступні маркери, що потрапляють у цей сектор, додаються до кластера, після чого центр кластера оновлюється на основі середнього значення координат усіх його елементів. Якщо маркер потенційно може належати до кількох груп, він буде доданий до найближчої за дистанцією між координатами.

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

Кастомізація вашого кластеризатора Google Maps: Гнучкість налаштувань

Існує безліч способів адаптувати зовнішній вигляд та поведінку ваших кластерів. Багато з них навіть не потребують модифікації самої бібліотеки. Натомість низку параметрів можна задати безпосередньо під час створення груп.

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

За замовчуванням для створення кластера достатньо лише двох маркерів. Ви можете змінити це налаштування за допомогою опції minimumClusterSize. Збільшення цього числа може призвести до накладання маркерів, проте ви також можете встановити поріг перекриття.

Ось ще кілька опцій для роботи з бібліотекою:

gridSize: кількість пікселів у сітці кластера.

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

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 на картах з великою кількістю маркерів. Ви можете знайти ще більше способів кастомізувати бібліотеку кластеризації маркерів, читаючи її код.

Для впровадження цих та інших функцій зверніться до нашої команди фахівців за консультацією або технічною експертизою. Окрім цього, компанія Cloudfresh – офіційний партнер Google Maps в Україні та надає можливість оплати по безготівковому рахунку для підприємств з підготовкою усіх необхідних бухгалтерських та юридичних документів.

Що ми пропонуємо?

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

Співпрацюючи з нами, ви отримаєте наступне:

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