Привет, это Анна, Team Lead Flutter-команды Friflex

Это пятый пост из серии о том, как интегрировать карты в мобильные приложения. В прошлый раз я рассказывала про кластеризацию объектов. Сегодня рассмотрим, как управлять стилизацией карты.

Библиотека yandex_mapkit предлагает такую возможность при помощи метода setMapStyle у контроллера карты YandexMapController. Метод принимает строку json-массива с заданными параметрами стилей карты.

Каждый вложенный json в массиве должен формироваться по ключам:
🔸 tags — набор тегов объектов
🔸 types — типы объектов, к которым должны применяться стили, например, линии, точки, зоны
🔸 elements — составляющие объекта, например, подпись объекта, иконка или текст, и его область
🔸 stylers — параметры стиля объекта, например, видимость, цвет, размер

Чтобы получить нужный стиль, комбинируйте параметры объектов. Например, можно скрыть все объекты торговли и общественного питания и подсветить названия дорог красным цветом.

await mapController.setMapStyle('''
          [
            {
              "tags": {
                "any": ["shopping", "food_and_drink"]
              },
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "tags": {
                "all": ["road"]
              },
              "elements": ["label.text"],
              "stylers": {
                "color": "0xFF5757"
              }
            }
          ]
        ''');

Больше параметров стилизации описано в документации.

В следующий раз разберем, как построить пешеходный маршрут от точки А до точки Б и отобразить его на карте.

#howtoflutter