Реалізація кастомних стилів карти у мобільному додатку
Сіра карта Google з зеленими парками — впізнаваний дефолт, який відразу говорить «ми не заморачувалися з дизайном». Кастомний стиль інтегрує карту в візуальну мову додатку, убирает зайві POI і виділяє те, що важливо саме вашому користувачу.
Інструменти для створення стилю
Google Maps: Google Maps Platform Styling Wizard генерує JSON-конфігурацію стилю. Більш потужний варіант — Snazzy Maps з бібліотекою готових стилів. JSON описує кожен шар карти: дороги, будівлі, водоєми, метки, POI — з налаштуванням кольору, видимості і ваги.
Mapbox: Studio з візуальним редактором і експортом стилю як URL mapbox://styles/.... Mapbox гнучкіше в плані кастомізації: можна додавати власні шари з даними поверх базової карти.
Apple Maps (MapKit): починаючи з iOS 16 з'явився MKMapConfiguration з вибором між .standard, .hybrid і .imagery. Кастомного JSON-стилю немає — тільки вибір схеми (світла/темна через colorScheme) і набору показуваних POI через pointOfInterestFilter.
Застосування JSON-стилю на iOS
let style = """
[{
"featureType": "poi",
"stylers": [{"visibility": "off"}]
},{
"featureType": "transit",
"stylers": [{"visibility": "off"}]
},{
"featureType": "road",
"elementType": "geometry",
"stylers": [{"color": "#1a1a2e"}]
}]
"""
if let mapStyle = try? GMSMapStyle(jsonString: style) {
mapView.mapStyle = mapStyle
}
JSON стилю краще зберігати як файл .json в Bundle, а не строку в коді: GMSMapStyle(contentsOfFileURL: Bundle.main.url(forResource: "map_style", withExtension: "json")!). При помилці парсингу GMSMapStyle кидає виключення — обов'язково обертати в try? і передбачити fallback на стандартний стиль.
Android
val success = map.setMapStyle(
MapStyleOptions.loadRawResourceStyle(context, R.raw.map_style)
)
if (!success) {
Log.e("MapStyle", "Style parsing failed")
}
R.raw.map_style — файл map_style.json в res/raw/. При помилці парсингу метод повертає false без виключення — не забути перевірити.
Темна тема
Для поддержки темної теми не робимо два різних стилі — використовуємо параметри в JSON зі змінними, або переключаємо між двома заранее завантаженими об'єктами GMSMapStyle / MapStyleOptions при зміні UIUserInterfaceStyle / Configuration.uiMode.
На iOS підписуємося на traitCollectionDidChange(_:) і переключаємо стиль. На Android — AppCompatDelegate.getDefaultNightMode() при ініціалізації карти.
Mapbox як альтернатива
Якщо потрібні повністю кастомні шари — власні дані поверх базової карти, анімовані лінії маршрутів, 3D-будівлі з кастомними текстурами — Mapbox GL Native (iOS/Android) або mapbox_maps_flutter. Стиль описується через Mapbox Style Specification, хоститься в Mapbox Studio або self-hosted на своєму CDN.
Різниця у вартості: Google Maps безплатен до 28 000 завантажень карти в місяць, Mapbox — до 50 000. При більших обсягах Mapbox вигідніше.
Строк: один-два дні — створення стилю, інтеграція в додаток, поддержка світлої/темної теми.