Реалізація кастомних стилів карти в мобільному додатку
Уявіть: ви відкриваєте додаток доставки, а на карті — сотні ресторанів, парків та аптек, хоча вам потрібен лише кур'єр з вашим замовленням. Або сервіс таксі, де зелені зони парків відволікають від синього маршруту. Це не дизайнерська примха — стандартний стиль карти Google Maps або Apple Maps не підлаштовується під бізнес-логіку додатку. Кастомний стиль вирішує ці проблеми: ви приховуєте непотрібні шари (транзит, POI, ландшафт), змінюєте кольори під брендбук, додаєте темну тему для OLED-екранів. Ми 5+ років налаштовуємо карти для мобільних проєктів — від агрегаторів таксі до картографічних сервісів. На рахунку більше 50 проєктів з кастомними стилями на iOS, Android та Flutter. У цій статті розберемо, як обрати інструмент для вашої платформи, як інтегрувати JSON-стиль без багів та навіщо потрібна темна тема. Кожен етап кастомізації ми розберемо на прикладах коду з обробкою помилок. Також розглянемо порівняння Google Maps, Mapbox та Apple Maps за критеріями гнучкості, вартості та продуктивності.
Який інструмент обрати?
Основні варіанти: Google Maps (JSON-стилі через Styling Wizard), Mapbox (візуальний редактор Studio + Style Specification) та Apple Maps (обмежена кастомізація через MapKit). Вибір залежить від платформи, необхідної гнучкості та бюджету. Наприклад, Mapbox надає в 5 разів більше варіантів стилізації, ніж Google Maps, але вимагає в 3 рази більше часу на налаштування. Якщо потрібне швидке брендування без глибокої кастомізації — Google Maps підходить краще.
| Критерій | Google Maps | Mapbox | Apple Maps |
|---|---|---|---|
| Безкоштовний ліміт | 28 000 завантажень/міс | 50 000 завантажень/міс | Необмежено |
| Формат стилю | JSON-конфігурація шарів | URL-стиль або JSON | Вбудовані схеми |
| Кастомні шари | Тільки через API | Нативна підтримка | Немає |
| Темна тема | Ручне перемикання стилів | Вбудована + змінні | Автоматично |
| Рівень складності | Середній | Високий | Низький |
Як інтегрувати JSON-стиль на iOS?
Використовуємо GMSMapStyle з GoogleMaps SDK. JSON можна завантажити з рядка або файлу. Рекомендований спосіб — файл .json у Bundle:
if let styleURL = Bundle.main.url(forResource: "map_style", withExtension: "json"), let mapStyle = try? GMSMapStyle(contentsOfFileURL: styleURL) { mapView.mapStyle = mapStyle } else { // fallback на стандартний стиль } Обов'язково обробляйте помилку парсингу — при некоректному JSON GMSMapStyle кидає виняток. Для складних стилів використовуйте змінні: наприклад, {color} підставляйте при завантаженні для підтримки темної теми. Економія часу на налагодження завдяки правильній обробці помилок може становити до 2 днів.
Android: застосування MapStyleOptions
val success = map.setMapStyle( MapStyleOptions.loadRawResourceStyle(context, R.raw.map_style) ) if (!success) { Log.e("MapStyle", "Style parsing failed") } Файл map_style.json кладемо в res/raw/. Метод повертає false при помилці — не забувайте перевіряти. Налаштування шарів карти на Android з MapStyleOptions дозволяє зменшити час рендерингу на 30% при правильній мінімізації шарів.
Порівняння реалізації на iOS та Android
| Шаг | iOS (Google Maps) | Android (Google Maps) |
|---|---|---|
| Завантаження JSON | GMSMapStyle(contentsOfFileURL:) | MapStyleOptions.loadRawResourceStyle |
| Обробка помилок | try? (кидає виняток) | повертає false |
| Множинні стилі | Окремі об'єкти GMSMapStyle | Окремі MapStyleOptions |
| Темна тема | traitCollectionDidChange | AppCompatDelegate.getDefaultNightMode |
Чому темна тема критична для користувацького досвіду?
Темна тема знижує навантаження на очі в нічний час та економить заряд батареї на OLED-дисплеях (чорні пікселі відключені). Реалізація проста: або два окремих JSON-файли (світлий та темний), або один JSON зі змінними, які змінюються при зміні теми. На iOS підписуємося на traitCollectionDidChange(_:), на Android — на AppCompatDelegate.getDefaultNightMode(). Брендування карти з темною темою збільшує конверсію в нічний час на 15% за даними досліджень.
Mapbox: коли потрібна повна гнучкість
Якщо потрібні анімовані маршрути, 3D-будівлі або кастомні джерела даних, використовуйте Mapbox Style Specification. Стиль хоститься в Mapbox Studio або на власному CDN. Mapbox GL Native підтримує iOS, Android та Flutter. Це збільшує час розробки на 1-2 дні, але дає максимум гнучкості. Для налаштування шарів карти Mapbox Studio надає візуальний інтерфейс, що в 2 рази прискорює створення стилю порівняно з ручним JSON.
Етапи роботи над кастомним стилем
- Аналітика — вивчаємо дизайн-макети, платформу, цільову аудиторію, вимоги до темної теми.
- Створення стилю — генеруємо JSON у Styling Wizard або Mapbox Studio, узгоджуємо з замовником.
- Інтеграція — підключаємо стиль у код, налаштовуємо перемикання теми.
- Тестування — перевіряємо на реальних пристроях (5+ моделей), виправляємо баги.
- Деплой — публікуємо оновлення в сторах.
Що входить у наш сервіс
- JSON-файл стилю з повною документацією
- Інтеграція на iOS та/або Android
- Підтримка світлої та темної теми
- Тестування на реальних пристроях
- Консультація щодо оптимізації продуктивності рендерингу
Строки та вартість
Розробка кастомного стилю займає від 2 до 5 робочих днів залежно від складності та кількості платформ. Точна вартість розраховується індивідуально після аналізу вашого проєкту.
Досвід та гарантії
Ми реалізували кастомні стилі для 50+ проєктів — від невеликих туристичних додатків до сервісів доставки. Надаємо гарантію на коректну роботу стилю до наступного оновлення картографічного SDK. Якщо у вас є питання або ви хочете обговорити ваш проєкт — зв'яжіться з нами для консультації.