Реализация кастомных стилей карты в мобильном приложении
Серая карта 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 выгоднее.
Срок: один-два дня — создание стиля, интеграция в приложение, поддержка светлой/тёмной темы.