Mapbox

комерційне джерело мапних плиток і стилів

Що це таке

Mapbox — це компанія і платформа для розробників, яку вона продає: вона надає складники інтерактивної карти як сервіси, тобто базові дані, стилі, код, що малює карту, і API навколо нього. У коді назва часто з’являється як Mapbox GL, за бібліотекою малювання. Посібник компанії для початку роботи називає її платформою локації, що дає розробникам будівельні блоки для карт, навігації та пошуку.

Картографічні дані зберігаються в наборах плиток (tilesets), зазвичай нарізаних на векторні плитки, щоб клієнт завантажував лише ту ділянку й той рівень масштабу, які видно на екрані. Mapbox підтримує глобальні базові набори даних, а власні дані команди потрапляють у набір плиток через Mapbox Tiling Service (MTS) або Uploads API. Вигляд визначає стиль. Це документ JSON, написаний за Mapbox Style Specification, який називає свої джерела й перелічує шари; кожен шар вибирає об’єкти з одного джерела й описує, як їх малювати. Стилі адресуються URL-адресою, наприклад mapbox://styles/mapbox/streets-v12, і створюються в консолі облікового запису за допомогою Mapbox Studio, інструмента дизайну.

Mapbox GL JS малює результат у браузері, а Maps SDK для iOS і Android роблять це в мобільних застосунках. Посібник GL JS, на момент написання у версії 3.33.0, каже, що бібліотека відтворює карти у 2D і 3D за допомогою OpenGL, поєднуючи векторні плитки з правилами стилю в браузері, а не на сервері; саме тому карта може змінити стиль або дані, поки нею хтось користується. Static Images API повертає зображення карти, а Static Tiles API віддає растрові плитки, створені зі стилів Studio, для бібліотек на кшталт Leaflet. Кожна карта створюється з токеном доступу, і токен прив’язує її до облікового запису Mapbox.

Сам формат плиток, специфікація Mapbox Vector Tile, відкрито опублікований на GitHub і кодує кожну плитку як повідомлення Protocol Buffers.

Чому це важливо

Вебкарті потрібні код, який її малює, і дані, які малювати, від одного постачальника або від кількох. Mapbox — це відповідь з одним постачальником: дані, стилі, відтворення й хостинг під одним обліковим записом і в одному рахунку, тож вибір Mapbox — це вибір того, яку частину картографічного стека орендувати.

Переваги реальні. Підтримувати базові дані в актуальному стані — чужа робота. Вигляд карти живе в документі стилю з власним інструментом дизайну, окремо від коду застосунку. Оскільки малювання відбувається в браузері, один набір плиток можна показати в кількох стилях, шар можна відфільтрувати або перефарбувати за одним клацанням, а та сама карта може показати рельєф у 3D. Для продукту, чий головний екран — це карта, постачальник бере на себе дуже багато роботи.

Витрати приходять з тим самим обліковим записом. GL JS тарифікується за завантаженнями карти, і посібник з цін рахує одне щоразу, коли на сторінці ініціалізується об’єкт Map. Панорамування, масштабування, перемикання шарів і зміна стилю всередині цієї карти нічого не додають, а одне завантаження карти триває щонайбільше 12 годин. Токен, на який записується карта, лежить у браузері кожного відвідувача. А починаючи з версії 2.0.0, випущеної в грудні 2020 року, сам рендерер підпадає під комерційні умови: журнал змін цього випуску каже, що GL JS більше не поширюється за 3-Clause BSD license і що оновлення означає згоду з умовами обслуговування Mapbox.

Тож питання перенесення варто ставити на початку. Формат плиток відкритий. MapLibre GL JS почалася як форк mapbox-gl-js з відкритим кодом, зроблений до зміни ліцензії. Її гілка 1.x задумувалася як пряма заміна відкритої версії Mapbox 1.x, а її README каже, що відтоді вона дуже змінилася. Піти з Mapbox можна, але це переїзд, і зважити його дешевше до того, як продукт збудують навколо стилів і наборів плиток одного постачальника.

Як це виглядає на практиці

Mapbox відповідав за малювання карти, а завдання полягало в тому, щоб подавати йому правильні дані на правильних рівнях масштабування, а не все одразу. Так одним рядком підсумовує роль Mapbox сторінка про те, як на посаді «Керівник команди розробки GIS‑програмного забезпечення» з 2022 до 2024 року довелося керувати повностековою розробкою GIS-карти, яка розросталася фрагментарно: просторові дані в PostgreSQL, ReactJS спереду, NodeJS позаду й Mapbox поверх усього. Результатом став єдиний інтегрований картографічний застосунок, який став ключовою частиною платформи й приймав нові шари без поломок.

На тій самій посаді, з 2015 до 2022 року, робота стосувалася процесу проєктування інтерфейсів проєктів, з фронтендами на React, Angular і Vue поверх карт Mapbox і Leaflet. Думка сторінки в тому, що карта — це найпростіша частина: люди губляться в елементах керування, фільтрації та потоці навколо неї, у деталях на кшталт переходу між поверхами на карті приміщення.

На посаді «Інженер даних» з 2022 до 2024 року завданням було усунути понад 1 000 проблем у географічних даних і часових рядах за допомогою GDAL, QGIS, ArcGIS, PostGIS і Bash. Очищені дані потім лягли в інтерактивні візуалізації на Mapbox, що підвищило доступність даних для кінцевих користувачів. Сторінка пов’язує роботу загалом зі скороченням часу виконання просторових запитів на 35%.

Де виникають проблеми

Більшість проблем з Mapbox починається, коли карта стикається зі справжнім трафіком, справжніми даними або великим оновленням.

Рахунок росте разом із переглядами сторінок, а не з використанням карти. Завантаження карти рахується під час ініціалізації, тож вартість залежить від того, як часто сторінка створює карту. Односторінковий застосунок, який створює Map заново на кожній зміні маршруту, платить щоразу, і так само платить карта внизу довгої сторінки, до якої більшість відвідувачів так і не доходить. Посібник Mapbox про керування витратами на вебкарти радить створювати карту лише тоді, коли її контейнер прокручується в поле зору, ховати її за кнопкою Load Map і використовувати Static Images API там, де панорамувати чи масштабувати нікому не треба. Для односторінкового випадку досить одного екземпляра карти, який живе між маршрутами.

Токен, скопійований зі сторінки, використовують деінде. Посібник про токени прямо каже, що будь-який токен на публічній вебсторінці або у вихідному коді видно кожному, хто його шукає. Токени із секретними областями доступу (scopes), типу sk, мають жити на сервері. Публічний токен pk на сторінці має бути створений саме для цього застосунку, з обмеженнями за URL, а не бути типовим публічним токеном облікового запису, до якого такі обмеження додати не можна. Посібник називає обмеження за URL заходом за принципом best effort, що спирається на заголовок referer, який надсилає браузер. Після витоку токен ротують: створюють новий, замінюють його в коді, розгортають застосунок і лише потім видаляють старий.

Карта сповільнюється, коли набір даних росте. Клієнт перетворює джерело GeoJSON на векторні плитки на льоту, тож великий файл означає, що нарізанням плиток займається браузер кожного відвідувача. Посібник про великі джерела GeoJSON перелічує засоби: завантажувати файл за URL, а не з об’єкта JavaScript, знизити maxzoom джерела нижче типового 18 (для більшості точкових даних підходить 12), підняти minzoom шару вище 0, кластеризувати щільні точки й прибрати невикористані властивості та знаки після шостого десяткового. Останній крок зменшує приклад із посібника з 19,3 MB до 3,3 MB. Понад 500 000 точок посібник радить розділити джерело або нарізати плитки на сервері через MTS чи Uploads API.

map.addSource("sites", {
    type: "geojson",
    data: "/data/sites.geojson", // a URL, not an object in memory
    maxzoom: 12, // the default is 18
    cluster: true, // group dense points at low zoom
});
map.addLayer({
    id: "sites",
    type: "circle",
    source: "sites",
    minzoom: 6, // hidden below zoom 6
});

Велике оновлення змінює ліцензію і рахунок. Перехід GL JS з 1.x на 2.0.0 перевів бібліотеку з ліцензії BSD на умови обслуговування Mapbox і змінив правило тарифікації. У 1.x завантаження карти потребувало ініціалізації плюс запиту на плитку, розміщену в Mapbox; з 2.0.0 рахується сама ініціалізація, тож карта, яка малювала лише власні плитки, починає генерувати завантаження карти. Журнал змін просить переглянути документацію з цін перед оновленням, а MapLibre GL JS — шлях для проєкту, який хоче лишитися на умовах відкритого коду.

Що почитати далі

  • Getting Started — огляд продуктів компанії для карт, пошуку й навігації.
  • Mapbox GL JS pricing — що вважається завантаженням карти, сеанс у 12 годин і старіші правила.
  • Token management — публічні й секретні токени, області доступу, обмеження за URL і ротація.
  • Working with large GeoJSON sources in Mapbox GL JS — межі масштабу, кластеризація, очищення і нарізання плиток на сервері.
  • Mapbox Vector Tile specification — відкритий формат, на якому стоять плитки.
  • MapLibre GL JS — рендерер із відкритим кодом, який почався як форк mapbox-gl-js.

Словник