Карты со стилями

Настройте отображение стандартной карты Google, применив собственные стили при использовании API статических карт. Вы можете изменить визуальное отображение таких объектов, как дороги, парки, застроенные территории и другие достопримечательности. Измените их цвет или стиль, чтобы выделить определенный контент, дополнить окружающий контент на странице или даже полностью скрыть объекты.

Примеры

В следующем примере отображается карта Бруклина, США, где местные дороги окрашены в ярко-зеленый цвет, а жилые районы — в черный. Также изменена яркость подписей, чтобы они лучше выделялись на темном фоне. Обратите внимание, что в этом рабочем примере используется URL-кодирование:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
Стилизованная карта Бруклина.

В следующем примере используются операции стилизации и упрощения для приближения к внешнему виду дорожного атласа США:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
Карта дорожного атласа США в стиле карты.

Стиль синтаксиса

Для создания карты с индивидуальным стилем укажите один или несколько параметров style в URL-адресе запроса.

Каждое объявление style может содержать следующие аргументы, разделённые символом вертикальной черты (" | ):

  • feature (необязательный) указывает, какие объекты следует выбрать для изменения стиля. К объектам относятся элементы на карте, такие как дороги, парки или другие достопримечательности. Если аргумент feature отсутствует, указанный стиль применяется ко всем объектам.
  • element (необязательный) указывает элемент(ы) указанного объекта, которые следует выбрать для изменения стиля. Элементы — это характеристики объекта, такие как геометрия или метки. Если аргумент element отсутствует, стиль применяется ко всем элементам указанного объекта.
  • Набор правил стиля (обязательный), применяемых к указанным функциям и элементам. API применяет правила в том порядке, в котором они указаны в объявлении style . Вы можете включить любое количество правил в рамках обычных ограничений по длине URL-адреса, установленных API статических карт.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Функции

Следующее объявление style раскрашивает все дороги на карте:

style=feature:road|color:0xffffff

Вот некоторые распространенные варианты выбора функций:

  • feature:all (по умолчанию) выделяет все объекты на карте.
  • feature:road выделяет все дороги на карте.
  • feature:road.local выбирает все местные дороги.

Объекты, или типы объектов, — это географические характеристики на карте, включая дороги, парки, водоемы, предприятия и многое другое.

Объекты образуют дерево категорий, корнем которого является all ". Если вы не указываете объект, выбираются все объекты. Указание объекта " all имеет тот же эффект.

Некоторые объекты содержат дочерние объекты, которые вы указываете с помощью точечной нотации. Например, landscape.natural или road.local . Если вы указываете только родительский объект, например road , то стили, указанные для родительского объекта, применяются ко всем его дочерним объектам, таким как road.local и road.highway .

Обратите внимание, что родительские элементы могут включать в себя некоторые компоненты, которые отсутствуют во всех дочерних элементах.

Доступны следующие функции:

  • all (по умолчанию) выбирает все объекты.
  • administrative выделяет все административные районы. Стилизация затрагивает только названия административных районов, а не географические границы или заливку.
    • administrative.country выбирает страны.
    • administrative.land_parcel выбирает земельные участки.
    • administrative.locality выбирает населенные пункты.
    • administrative.neighborhood выбирает районы.
    • administrative.province выбирает провинции.
  • landscape выбирает все ландшафты.
    • landscape.man_made выбирает искусственные объекты, такие как здания и другие сооружения.
    • landscape.natural выбирает природные объекты, такие как горы, реки, пустыни и ледники.
    • landscape.natural.landcover выбирает характеристики растительного покрова — физический материал, покрывающий поверхность Земли, такой как леса, луга, болота и голая земля.
    • landscape.natural.terrain выбирает характеристики рельефа местности, такие как высота, уклон и ориентация.
  • Функция poi выбирает все точки интереса.
    • poi.attraction выбирает туристические достопримечательности.
    • poi.business отбирает компании.
    • poi.government выбирает правительственные здания.
    • poi.medical отбирает службы экстренной помощи, включая больницы, аптеки, полицию, врачей и другие.
    • poi.park выбирает парки.
    • poi.place_of_worship выбирает места отправления культа, включая церкви, храмы, мечети и другие.
    • poi.school выбирает школы.
    • poi.sports_complex выбирает спортивные комплексы.
  • road выбирает все дороги.
    • road.arterial выбирает магистральные дороги.
    • road.highway выбирает автомагистрали.
    • road.highway.controlled_access выбирает автомагистрали с контролируемым доступом.
    • road.local выбирает местные дороги.
  • transit выбирает все транспортные станции и линии.
    • transit.line выбирает маршруты общественного транспорта.
    • transit.station выбирает все транзитные станции.
    • transit.station.airport выбирает аэропорты.
    • transit.station.bus выбирает автобусные остановки.
    • transit.station.rail выбирает железнодорожные станции.
  • water выбирает водоемы.

Элементы

Следующее объявление style раскрашивает подписи для всех местных дорог:

style=feature:road.local|element:labels|color:0xffffff

Элементы — это подразделения объекта. Например, дорога состоит из графической линии (геометрии) на карте, а также текста, обозначающего её название (метки).

Доступны следующие элементы, однако следует отметить, что конкретная функция может поддерживать ни один, некоторые или все из этих элементов:

Цвета fill и stroke текста в подписи меняются в зависимости от уровня масштабирования. Для обеспечения единообразия отображения на разных уровнях масштабирования всегда задавайте параметры fill и stroke .

  • all (по умолчанию) выбирает все элементы указанного объекта.
  • geometry выбирает все геометрические элементы указанного объекта.
    • geometry.fill выбирает только заливку геометрии объекта.
    • geometry.stroke выбирает только обводку геометрии объекта.
  • labels выбирает текстовые метки, связанные с указанным элементом.
    • labels.icon выбирает только тот значок, который отображается внутри метки объекта.
    • labels.text выделяет только текст метки.
    • labels.text.fill выбирает только заливку метки. Заливка метки обычно отображается в виде цветной обводки, окружающей текст метки.
    • labels.text.stroke выделяет только обводку текста метки.

Правила стиля

Правила стиля — это параметры форматирования, которые применяются к функциям и элементам, указанным в каждом объявлении style .

Приведенное ниже объявление style применяет два правила стиля к дорогам на карте. Первое правило задает цвет дорогам. Второе правило упрощает отображение дорог, делая их более тонкими линиями без контуров:

style=feature:road|color:0xffffff|visibility:simplified

Каждое объявление style должно содержать одну или несколько операций, разделенных символом вертикальной черты (" | ). Каждая операция указывает значение своего аргумента с помощью символа двоеточия (" : ), и все операции применяются к выделенной области в том порядке, в котором вы их указываете.

Поддерживаются следующие параметры стиля:

  • hue (шестнадцатеричная строка RGB в формате #RRGGBB ) обозначает основной цвет.

    Примечание: Этот параметр задает оттенок, сохраняя при этом насыщенность и яркость, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Полученный цвет определяется относительно стиля базовой карты. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на объекты вашей карты, оформленные с помощью hue . По возможности лучше использовать абсолютный стиль color .

  • lightness (значение с плавающей запятой от -100 до 100 ) указывает на процентное изменение яркости элемента. Отрицательные значения увеличивают темноту (где -100 соответствует черному цвету), а положительные значения увеличивают яркость (где +100 соответствует белому цвету).

    Примечание: Этот параметр задает яркость, сохраняя при этом насыщенность и оттенок, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Полученный цвет определяется относительно стиля базовой карты. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на объекты вашей карты, оформленные с использованием параметра lightness . По возможности лучше использовать абсолютный стиль color .

  • saturation (значение с плавающей запятой от -100 до 100 ) указывает процентное изменение интенсивности основного цвета, применяемое к элементу.

    Примечание: Этот параметр задает насыщенность, сохраняя при этом оттенок и яркость, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Полученный цвет определяется относительно стиля базовой карты. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на объекты вашей карты, оформленные с использованием saturation . По возможности лучше использовать абсолютный стиль color .

  • gamma (значение с плавающей запятой от 0.01 до 10.0 , где 1.0 не применяет коррекцию) указывает величину гамма-коррекции, применяемой к элементу. Гамма-коррекция изменяет яркость цветов нелинейным образом, не влияя при этом на значения белого или черного цвета. Гамма-коррекция обычно используется для изменения контраста нескольких элементов. Например, вы можете изменить гамму, чтобы увеличить или уменьшить контраст между краями и внутренними частями элементов.

    Примечание: Этот параметр регулирует яркость относительно стандартного стиля Google, используя гамма-кривую. Если Google внесет какие-либо изменения в базовый стиль карты, эти изменения повлияют на объекты вашей карты, оформленные с помощью gamma . По возможности лучше использовать абсолютный color стилизатор.

  • invert_lightness (если true ) инвертирует существующую яркость. Это полезно, например, для быстрого переключения на более темную карту с белым текстом.

    Примечание: Этот параметр просто инвертирует стиль Google по умолчанию. Если Google внесет какие-либо изменения в базовый стиль карты, эти изменения повлияют на объекты вашей карты, оформленные с помощью invert_lightness . По возможности лучше использовать абсолютный стиль color .

  • visibility ( on ., off . или simplified ) указывает, отображается ли элемент на карте и каким образом. simplified видимость удаляет некоторые элементы стиля у соответствующих объектов; например, дороги упрощаются до более тонких линий без контуров, а парки теряют текст подписи, но сохраняют значок подписи.
  • color (шестнадцатеричная строка RGB в формате #RRGGBB ) задает цвет объекта.
  • weight (целочисленное значение, большее или равное нулю) задает вес объекта в пикселях. Установка высокого значения weight может привести к обрезке вблизи границ тайлов.

Правила стиля применяются в указанном вами порядке. Не объединяйте несколько операций в одну операцию стиля. Вместо этого определите каждую операцию как отдельную запись в массиве стилей.

Примечание: порядок операций важен, поскольку некоторые операции не коммутативны. Функции и/или элементы, которые изменяются с помощью операций со стилями, (обычно) уже имеют существующие стили. Операции применяются к этим существующим стилям, если они присутствуют.

Модель оттенка, насыщенности и яркости

В стилизованных картах для обозначения цвета в операциях стилизации используется модель оттенка, насыщенности и яркости (HSL) . Оттенок обозначает основной цвет, насыщенность — интенсивность этого цвета, а яркость — относительное количество белого или черного в составляющем цвете.

Гамма-коррекция изменяет яркость в цветовом пространстве, как правило, для увеличения или уменьшения контраста. Кроме того, модель HSL определяет цвет в координатном пространстве, где hue указывает на ориентацию на цветовом круге, а насыщенность и яркость указывают на амплитуды вдоль различных осей. Оттенки измеряются в цветовом пространстве RGB, которое похоже на большинство цветовых пространств RGB, за исключением того, что в нем отсутствуют оттенки белого и черного.

Модель оттенка, насыщенности и яркости

Хотя hue принимает шестнадцатеричное значение цвета в формате HTML, он использует это значение только для определения основного цвета — то есть его положения на цветовом круге, а не насыщенности или яркости, которые указываются отдельно в виде процентных изменений.

Например, оттенок чистого зеленого можно задать как hue:0x00ff00 или hue:0x000100 . Оба оттенка идентичны. В цветовой модели HSL оба значения указывают на чистый зеленый цвет.

Цветовое колесо RGB

Значения hue RGB, состоящие из равных частей красного, зеленого и синего, не указывают на оттенок, поскольку ни одно из этих значений не указывает на ориентацию в координатном пространстве HSL. Примерами являются "#000000" (черный), "#FFFFFF" (белый) и все чистые оттенки серого. Чтобы обозначить черный, белый или серый цвет, необходимо удалить всю saturation (установить значение -100 ) и вместо этого отрегулировать lightness .

Кроме того, при изменении существующих элементов, уже имеющих цветовую схему, изменение таких значений, как hue не влияет на их существующую saturation или lightness .