Якщо Вам потрібно показати велику кількість географічної інформації в доступній формі – Ви, скоріше за все використаєте карту. Звісно ж Ви маєте представити інформацію так, щоб користувачі легко і швидко бачили загальну картину та, за бажання, могли отримати детальнішу інформацію. Сотні точок даних, зібраних разом, можуть стати перешкодою.
У цій публікації ми розповімо про те, як використовувати JavaScript-бібліотеку для групування маркерів для передачі цієї ж інформації в згрупованому вигляді, без усіх маркерів, що перекривають один одного. Ми також розповімо трохи про те, як це працює, щоб допомогти Вам краще зрозуміти, як можна налаштувати групування маркерів у власних проектах.
Для чого нам взагалі потрібне групування маркерів?
Щоб зрозуміти давайте поглянемо на цю карту Нової Зеландії та Австралії на якій розкидано групу маркерів:
Незважаючи на те, що ми додали лейбл для кожного маркера, багато з них знаходяться настільки близько, що перекривають один одного. Локацій менше 25, але вони надто близько одна до одної, щоб їх не можна було показати на карті без перекриття.
Якщо Ваша карта виглядає приблизно так, це заважає Вашим клієнтам зручно і коректно сприймати інформацію, яку Ви намагаєтесь представити. Але рішення є, це – кластеризація маркерів. За допомогою простої бібліотеки з відкритим кодом та невеликою зміною коду Вашої карти можна додати групування маркерів, що значно покращить user experience для клієнтів.
Кластеризація маркерів зручний інструмент для візуальної консолідації маркерів, що полегшує клієнтам читання карты в цілому. Він групує маркери, що знаходяться поруч на карті, у кластер, який відображається як єдиний значок.
Увімкніть кластеризацію маркерів на своїй карті
Ви можете додати кластеризацію маркерів за допомогою декількох додаткових рядків JavaScript. Цей приклад демонструє як це зробити на на веб-картах, але є аналогічна утиліта в межах платформи Android Maps і SDK платформи Google Maps. Щоб створити маркерний кластер, спочатку розглянемо, як створити некластеризовані маркери. Додаючи звичайні маркери до карти, код може виглядати приблизно так:
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:
<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>
Далі перенесіть карту та маркери до бібліотеки кластеризації, додавши ці рядки під змінними маркера:
// create an array of all your markers
const markers = [marker1, marker2];
// Path for cluster icons to be appended (1.png, 2.png, etc.)
const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;
// Enable marker clustering for this map and these markers
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
Знову ж таки для використання на продакшені Вам потрібно буде розмістити зображення кластерів на своїх серверах. Цей приклад завантажить m1.png, оскільки йому потрібен лише мінімальний розмір кластера.
Створюючи інстанс MarkerClusterer, Ви передаєте змінну Вашої карти, масив маркерів та шлях зображення. Бібліотека, прийнявши інформацію, відображає піктограму кластера з кількістю точок, що є в кластері:
При кліку на піктограму кластера межі карта масштабується до рівня, коли видно обидва маркера:
Коли Ви зменшите масштаб на декілька рівнів, піктограма кластера повернеться замість двох маркерів, як тільки карта буде на рівні, коли вони можуть перетинатися.
В цьому гайді з кластеризації маркерів є розгорнути інформація та приклади з більшою кількістю точок
Як працює кластеризація маркерів
Бібліотека клістаризації маркерів це частина open source map utilities on GitHub. Ви можете отримати доступ до всього коду і навіть вносити власні зміни за необхідності. Давайте розглянемо роботу алгоритма загалом.
Для початку алгоритм ділить карту на сітку, при цьому кожен розділ сітки за замовчуванням до 60×60 пікселів. Використовуючи приклад з перекриттям маркерів вище, це можна візуалізувати так:
Насправді сітка не буде точно такою, як вище, тому що вона базується на самих маркерах. Перший маркер стає центром першого сектора. Наступні маркери в цьому секторі будуть додані до кластеру для цього сектору, тоді центр кластеру буде оновлений на основі середнього рівня всіх його маркерів. Якщо маркер потенційно може бути частиною декількох кластерів, він буде доданий до найближчого на основі відстані між координатами маркера.
Стандартні налаштування алгоритму охоплюватимуть більшість випадків використання, але оскільки код є повністю відкритим, Ви можете внести будь-які необхідні зміни.
Кастомізуйте свої кластери
Існує багато способів кастомізації вигляду та функцій Ваших маркерних кластерів. Багато з них навіть не вимагатимуть редагування базової бібліотеки. Натомість існує кілька опцій, які можна встановити під час створення кластерів.
Найпростіший спосіб зробити кластерну карту “під себе” – використовувати власні іконки. У простому прикладі кластеризації ми передали параметр imagePath. Бібліотека кластерів додасть число (1-5) до кінця шляху з подальшим розширенням файлу (за замовчуванням .png) Ви можете використовувати інший тип файлу за допомогою параметра imageExtension. Майте на увазі, що прозорі іконки найкраще виглядатимуть на карті.
За замовчуванням для створення кластера потрібно лише два маркери. Для зміни цього параметра можна скористатися опцією minimalClusterSize. Збільшення цієї кількості може спричинити перекриття маркерів, але також можна встановити поріг перекриття
Ось кілька інших опцій для роботи з бібліотекою:
gridSize: кількість пікселів у сітці кластера
zoomOnClick: чи збільшувати масштаб кластера при натисканні на нього
maxZoom: максимальний рівень збільшення, перш ніж завжди відображатимуться звичайні маркери
styles: масив об’єктів для кожного типу кластера, що включає textColor, textSize та інші функції кластера
Наприклад, Ви можете використовувати всі перераховані вище варіанти разом таким чином:
// Options to pass along to the marker clusterer
const clusterOptions = {
imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”,
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// Add a marker clusterer to manage the markers.
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// Change styles after cluster is created
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 та надає можливість оплати по безготівковому рахунку для підприємств з підготовкою усіх необхідних бухгалтерських та юридичних документів.
Замовити консультацію