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

Вы можете настроить внешний вид стандартной карты Google, применив собственные стили в Maps Static 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

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

Чтобы создать карту с собственным стилем, добавьте в URL запроса один или несколько параметров style.

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

• feature (необязательный) – указывает, к каким объектам на карте нужно применить это изменение стиля. Объекты – это элементы карты, например дороги, парки и другие достопримечательности. Если аргумент feature отсутствует, указанный стиль применяется ко всем объектам.
• element (необязательный). Указывает, какие элементы указанного объекта нужно выбрать для изменения стиля. Элементы – это характеристики объекта, например геометрические формы или метки. Если аргумент element не указан, стиль применяется ко всем элементам заданного объекта.
• Набор правил стиля (обязательный), которые применяются к указанным объектам и элементам. API применяет правила в том порядке, в котором они указаны в декларации style. Вы можете добавить любое количество правил, не превышая ограничение на длину URL в Maps Static 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 (шестнадцатеричная строка в формате #RRGGBB) указывает значение RGB основного цвета.

  Примечание. Этот параметр задает оттенок, сохраняя при этом насыщенность и яркость, указанные в стиле 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 (целое неотрицательное значение) – указывает вес объекта в пикселях. Слишком высокое значение веса может привести к обрезке объекта возле границ фрагмента карты.

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

Примечание. Порядок операций важен, потому что некоторые операции не коммутативны. Объекты и элементы, которые изменяются с помощью операций применения стиля, обычно уже имеют собственный стиль. Если это так, операции выполняются на основе этих имеющихся стилей.

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

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

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

Хотя в параметре "hue" для обозначения цвета используется шестнадцатеричный код HTML, это значение определяет только базовый цвет (т. е. ориентацию в цветовом круге). Насыщенность и яркость указываются как отдельные процентные величины.

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

Цветовой круг RGB

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

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