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

Настройте представление стандартной карты 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

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

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

  • 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 . Если есть возможность, лучше использовать стайлер Absolute color .

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

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

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

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

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

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

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

    Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, стилизованные с помощью invert_lightness . Если есть возможность, лучше использовать стайлер Absolute 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 .