Відмітимо: коли дашборд з картою починає лагати на 10 000 точок — це провал. Стандартні маркери не справляються, браузер зависає, користувачі йдуть. Ми стикалися з цим не раз. Наш підхід — використовувати Mapbox GL JS для швидкої базової карти та Deck.gl для рендерингу великих обсягів даних через WebGL. В результаті — 60 FPS навіть на мобільних пристроях. Така архітектура дозволяє обробляти сотні тисяч точок без втрати продуктивності. Накопичено досвід більше 20 проєктів геовізуалізації, включаючи дашборди для логістики та рітейлу. Отримайте консультацію по вашому проєкту.
Проблеми, які вирішуємо
- Гальма при великій кількості маркерів. Звичайні HTML-маркери або Leaflet не вивозять >10 000 точок — браузер зависає. Deck.gl малює їх як геометрію на GPU.
- Складність кастомізації. Бізнесу потрібні не просто точки, а кольорове кодування за статусом, теплові карти активності, дуги маршрутів. Mapbox GL + Deck.gl дають гнучкі шари з кастомізованими атрибутами.
- Інтеграція з React. Використовуємо
react-map-glта@deck.gl/react— все працює в компонентній моделі, без костилів.
Чому Deck.gl кращий за Leaflet для великих даних?
Leaflet чудово підходить для простих карт з 100–500 маркерів. Але як тільки даних стає більше — починаються гальма. Deck.gl використовує WebGL, а не DOM: він рендерить геометрію на GPU. Різниця в продуктивності помітна вже на 10 000 точок — Leaflet дає ~15 FPS, Deck.gl — 60 FPS. Крім того, Deck.gl має вбудовані агрегуючі шари (HeatmapLayer, ScreenGridLayer), які автоматично проріджують дані. Якщо ваш проєкт передбачає >5 000 точок — вибирайте Deck.gl.
За даними документації Deck.gl, WebGL дозволяє виконувати рендеринг на графічному процесорі, що значно знижує навантаження на CPU. В Deck.gl це реалізовано через бібліотеку luma.gl. Для порівняння: Deck.gl офіційно підтримує до 1 млн точок при 60 FPS.
Як прискорити рендеринг сотень тисяч точок?
Ключова техніка — використання агрегації. Замість відмальовування кожної точки ми розбиваємо екран на сітку і рахуємо кількість влучень у кожну комірку. Deck.gl робить це на GPU через GPUGridLayer або HeatmapLayer. Також важливий правильний radiusPixels — занадто малий радіус створює шум, занадто великий — розмиває деталі. Ми підбираємо параметри під конкретні дані.
Як ми це робимо
Наш стек: React 18, Next.js 14, TypeScript, Mapbox GL JS (v2/v3), Deck.gl (v8/v9), Tailwind. Для бекенду — Node.js (Nest.js) або Laravel, що віддають GeoJSON через API. Зберігаємо дані в PostGIS або MongoDB. Оптимізуємо через CDN та кешування.
Приклад: дашборд доставки з тепловою картою
Одного разу до нас прийшов клієнт із задачею: на карті відображаються 50 000 замовлень у реальному часі, потрібно бачити щільність доставок. Ми зробили:
- Mapbox GL для підкладки (світла тема, свої стилі).
- Deck.gl HeatmapLayer для щільності замовлень.
- ScatterplotLayer для точок з кольором за статусом (доставлено, в дорозі, скасовано).
- ArcLayer для маршрутів між складом і точкою.
Результат: карта працює плавно на iPad. Час розробки — 2 тижні.
Порівняння підходів до візуалізації
| Стек | Продуктивність (1 млн точок) | Кастомізація | Складність |
|---|---|---|---|
| Mapbox GL JS + Deck.gl | 60 FPS | Висока (шари, шейдери) | Середня |
| Leaflet + MarkerCluster | 10 FPS | Середня | Низька |
| D3.js + SVG | 5 FPS | Висока | Висока |
| Google Maps API | 30 FPS | Низька | Середня |
Рекомендуємо Mapbox GL + Deck.gl для проєктів, де важлива швидкість та гнучкість. Leaflet підходить для простих прототипів, D3 — для статичних графіків.
Процес роботи
- Аналітика. Розбираємо дані: формат, обсяг, частота оновлення. Визначаємо, які шари потрібні (точки, теплова карта, дуги, хороплет).
- Прототип. Робимо MVP на тестових даних за 2–3 дні. Показуємо та коригуємо.
- Розробка. Інтегруємо у ваше React-застосування. Налаштовуємо взаємодію: клік по точці → попап, фільтри, анімації.
- Тестування продуктивності. Ганяємо на реальних даних (10 000–1 000 000 точок). Оптимізуємо: зменшуємо кількість шарів, додаємо LOD.
- Деплой. Загортаємо в Docker, налаштовуємо CDN для тайлів. Передаємо код та документацію.
Детальний чек-лист етапів
- Збір вимог та аналіз даних
- Вибір архітектури (шари, стек)
- Прототипування на синтетичних даних
- Інтеграція з React та налаштування взаємодій
- Оптимізація продуктивності (LOD, агрегація)
- Розгортання та передача документації
- Пост-релізна підтримка (3 місяці)
Що входить в роботу
- Вихідний код компонентів карти (React/TypeScript).
- Документація по API інтеграції та налаштуванню токенів.
- Інструкція по додаванню нових шарів.
- Гарантія 3 місяці на виправлення помилок.
- Пост-релізна підтримка: відповідаємо на питання, допомагаємо з оновленням бібліотек.
Терміни орієнтовно
| Етап | Терміни |
|---|---|
| Базова карта з маркерами та попапами | 3–5 днів |
| Heatmap / Scatterplot | 1 тиждень |
| Arc-шари (маршрути) | +3–5 днів |
| Choropleth (регіони) | +3–5 днів |
| Оптимізація продуктивності | +2–3 дні |
| Повний цикл (весь дашборд) | 2–4 тижні |
Вартість розраховується індивідуально після аналізу даних та вимог. Оцінимо проєкт протягом 1 дня.
Типові помилки
- Ігнорування проекції. Якщо дані в EPSG:4326, а карта в Web Mercator — координати зміщуються. Завжди переводимо в WGS84.
- Забагато шарів. Кожен шар — прохід WebGL. Оптимально не більше 5–7 активних шарів. Невидимі шари вимикаємо.
- Неправильний
radiusPixelsв HeatmapLayer. Занадто малий радіус дає шум, занадто великий — розмиває. Підбираємо під щільність даних. - Відсутність обробки помилок. Якщо GeoJSON битий — карта не завантажиться. Валідуємо дані на бекенді.
Зв'яжіться з нами для консультації — підберемо оптимальне рішення під ваш проєкт. Замовте попередній аналіз даних, щоб дізнатися точні терміни та вартість.