Referência de estilos

Com opções de estilo, você pode personalizar a apresentação de estilos padrão de mapas do Google, alterando o visual dos recursos, como vias, parques, empresas e outros pontos de interesse. Além de mudar o estilo dos recursos, é possível ocultá-los totalmente. Isso significa que você pode enfatizar componentes específicos do mapa ou deixá-lo combinando com a página em que ele está.

Exemplos

A declaração de estilo em JSON a seguir faz com que todos os componentes do mapa fiquem cinza e a geometria das vias arteriais seja azul, além de ocultar totalmente as etiquetas da paisagem:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

O objeto JSON

Uma declaração de estilo JSON consiste nestes elementos:

  • featureType: (opcional) os recursos a serem selecionados nessa modificação de estilo. Os recursos são características geográficas do mapa, por exemplo, vias, parques, corpos hídricos e outros. Se você não especificar um recurso, todos eles serão selecionados.
  • elementType: (opcional) a propriedade do recurso especificado a ser selecionado. Os elementos são subpartes de um recurso, como as etiquetas e a geometria. Se você não especificar um elemento, todos eles serão selecionados.
  • stylers: as regras que serão aplicadas aos recursos e aos elementos selecionados. Os estilizadores indicam a cor, a visibilidade e o peso do recurso. Você pode aplicar um ou mais estilizadores a um recurso.

Para especificar um estilo, é necessário combinar um conjunto de seletores featureType e elementType e seu stylers em uma matriz. Você pode definir qualquer combinação de recursos em uma única matriz. No entanto, há um limite para o número de estilos que podem ser aplicados de uma só vez. Se a matriz de estilo exceder o limite de caracteres, nenhum estilo será aplicado.

O restante desta página inclui mais informações sobre os recursos, elementos e estilizadores.

featureType

O snippet em JSON a seguir seleciona todas as vias do mapa:

{
  "featureType": "road"
}

Os recursos ou os tipos de recurso são características geográficas do mapa, como vias, parques, corpos hídricos, empresas e outros.

Eles formam uma árvore de categorias, com all como raiz. Se você não especificar um recurso, todos eles serão selecionados. Definir um recurso como all tem o mesmo resultado.

Alguns recursos contêm recursos secundários que você especifica usando um ponto. Por exemplo, landscape.natural ou road.local. Se você definir apenas o recurso primário, como road, os estilos estabelecidos para o primário serão aplicados a todos os filhos, como road.local e road.highway.

Os recursos primários podem conter elementos não incluídos em todos os secundários.

Os seguintes recursos estão disponíveis:

  • all (padrão) seleciona todos os recursos.
  • administrative seleciona todas as áreas político-administrativas. A aplicação de estilo afeta somente as etiquetas das áreas político-administrativas, e não das fronteiras ou de preenchimentos geográficos.
    • administrative.country seleciona países.
    • administrative.land_parcel seleciona lotes.
    • administrative.locality seleciona localidades.
    • administrative.neighborhood seleciona bairros.
    • administrative.province seleciona províncias.
  • landscape seleciona todas as paisagens.
    • landscape.man_made seleciona recursos criados pelo homem, como edifícios e outras estruturas.
    • landscape.natural seleciona atributos naturais, como montanhas, rios, desertos e geleiras.
    • landscape.natural.landcover seleciona características da cobertura do solo, o material físico que cobre a superfície terrestre, como florestas, pastagens, pântanos e terra virgem.
    • landscape.natural.terrain seleciona características do terreno de uma superfície terrestre, como elevação, inclinação e orientação.
  • poi seleciona todos os pontos de interesse.
    • poi.attraction seleciona atrações turísticas.
    • poi.business seleciona empresas.
    • poi.government seleciona edifícios públicos.
    • poi.medical seleciona serviços de emergência, incluindo hospitais, farmácias, delegacias, hospitais e outros.
    • poi.park seleciona parques.
    • poi.place_of_worship seleciona locais de cultos, incluindo igrejas, templos, mesquitas e outros.
    • poi.school seleciona escolas.
    • poi.sports_complex seleciona complexos esportivos.
  • road seleciona todas as vias.
    • road.arterial seleciona vias arteriais.
    • road.highway seleciona rodovias.
    • road.highway.controlled_access seleciona rodovias com acesso controlado.
    • road.local seleciona vias locais.
  • transit seleciona todas as estações e linhas de transporte público.
    • transit.line seleciona linhas de transporte público.
    • transit.station seleciona todas as estações de transporte público.
    • transit.station.airport seleciona aeroportos.
    • transit.station.bus seleciona pontos de ônibus.
    • transit.station.rail seleciona estações de trem.
  • water seleciona corpos hídricos.

elementType

O snippet em JSON a seguir seleciona as etiquetas de todas as vias locais:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Elementos são subdivisões de um recurso. Uma via, por exemplo, é composta pela linha gráfica (a geometria) no mapa, e pelo texto que indica o nome dela (uma etiqueta).

Os elementos a seguir estão disponíveis, mas um recurso específico pode oferecer suporte a todos, alguns ou nenhum dos elementos:

  • all (padrão) seleciona todos os elementos do recurso especificado.
  • geometry seleciona todos os elementos geométricos do recurso especificado.
    • geometry.fill seleciona apenas o preenchimento da geometria do recurso.
    • geometry.stroke seleciona apenas o traço da geometria do recurso.
  • labels seleciona as etiquetas textuais associadas ao recurso especificado.
    • labels.icon seleciona apenas o ícone exibido na etiqueta do recurso.
    • labels.text seleciona apenas o texto da etiqueta.
    • labels.text.fill seleciona apenas o preenchimento da etiqueta. Normalmente, o preenchimento de uma etiqueta é renderizado como um contorno colorido que rodeia o texto dela.
    • labels.text.stroke seleciona apenas o traço do texto da etiqueta.

stylers

Estilizadores são opções de formatação aplicáveis a recursos e elementos de um mapa.

O snippet em JSON a seguir exibe um recurso em verde brilhante, usando um valor RGB:

"stylers": [
  { "color": "#99FF33" }
]

Esse snippet remove toda a intensidade da cor do recurso, independentemente da cor inicial. O efeito é renderizar a escala de cinza do recurso:

"stylers": [
  { "saturation": -100 }
]

Este snippet esconde o recurso totalmente:

    "stylers": [
      { "visibility": "off" }
    ]

As seguintes opções de estilo são compatíveis:

  • hue (uma string hexadecimal RGB do formato #RRGGBB) indica a cor básica.

    Essa opção define o matiz ao mesmo tempo que mantém a saturação e o brilho especificados no estilo padrão do Google (ou outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa básico. Se o Google fizer alguma alteração no estilo do mapa básico, os recursos do seu mapa serão afetados e estilizados com hue. Se você puder, use o estilizador color absoluto.

  • lightness (um valor de ponto flutuante entre -100 e 100) indica a variação percentual no brilho do elemento. Valores negativos reduzem o brilho (-100 especifica a cor preta), e valores positivos aumentam o brilho (+100 especifica a cor branca).

    Essa opção define o brilho ao mesmo tempo que mantém a saturação e o matiz especificados no estilo padrão do Google (ou outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa básico. Se o Google fizer alguma alteração no estilo do mapa básico, os recursos do seu mapa serão afetados e estilizados com lightness. Se você puder, use o estilizador color absoluto.

  • saturation (um valor de ponto flutuante entre -100 e 100) indica a variação percentual na intensidade da cor básica a ser aplicada ao elemento.

    Essa opção define a saturação ao mesmo tempo que mantém o matiz e o brilho especificados no estilo padrão do Google (ou outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa básico. Se o Google fizer alguma alteração no estilo do mapa básico, os recursos do seu mapa serão afetados e estilizados com saturation. Se você puder, use o estilizador color absoluto.

  • gamma (um valor de ponto flutuante entre 0.01 e 10.0, em que 1.0 não faz correções) indica a quantidade de correção de gamma a ser aplicada ao elemento. As correções de gamma modificam o brilho das cores de maneira não linear, mas não afetam os valores de branco e preto. Esse recurso é geralmente usado para modificar o contraste de vários elementos. Por exemplo, é possível alterar a gamma para aumentar ou diminuir o contraste entre as margens e o interior dos elementos.

    Essa opção ajusta o brilho relacionado ao estilo padrão Google usando uma curva de gamma. Se o Google fizer alguma alteração no estilo do mapa básico, os recursos do seu mapa serão afetados e estilizados com gamma. Se você puder, use o estilizador color absoluto.

  • invert_lightness (se true) inverte o brilho atual. Isso é útil, por exemplo, para alternar rapidamente a um mapa mais escuro com texto em branco.

    Essa opção simplesmente inverte o estilo padrão do Google. Se o Google fizer alguma alteração no estilo do mapa básico, os recursos do seu mapa serão afetados e estilizados com invert_lightness. Se você puder, use o estilizador color absoluto.

  • visibility (on, off ou simplified) indica se o elemento aparece no mapa e como ele é exibido. Uma visibilidade simplified remove alguns recursos de estilo dos elementos afetados. As vias, por exemplo, são simplificadas para linhas mais finas sem contornos, enquanto os parques perdem o texto da etiqueta, mas mantêm o ícone da etiqueta.
  • color (uma string hexadecimal RGB do formato #RRGGBB) define a cor do recurso.
  • weight (um valor inteiro, maior ou igual a zero) define a espessura do recurso, em pixels. Um valor de espessura alta pode resultar em truncamento perto das margens da borda.

As regras de estilo se aplicam na ordem em que forem especificadas. Não combine várias operações em uma única operação de estilo. Em vez disso, defina cada operação como uma entrada separada na matriz de estilo.

A ordem é importante, porque algumas operações não são comutativas. Os recursos e/ou elementos modificados com operações de estilo normalmente já têm estilos. Caso haja estilos, as operações os modificam.

O modelo matiz, saturação e brilho

Os mapas estilizados usam o modelo matiz, saturação e brilho (HSL) para denotar cores nas operações do estilizador. Hue indica a cor básica, saturation indica a intensidade dessa cor, lightness indica o valor referente à quantidade de branco ou preto na cor integrante.

A correção de gamma modifica o brilho no espaço da cor, geralmente aumentando ou reduzindo o contraste. Além disso, o modelo HSL define a cor em um espaço de coordenadas, em que hue indica a orientação em um disco de cores, enquanto a saturação e a luminosidade mostram as amplitudes ao longo de diferentes eixos. Os matizes são medidos dentro de um espaço de cor RGB, que é similar à maioria dos espaços de cor RGB, mas sem os tons de preto e branco.

Modelo matiz, saturação e brilho

Embora hue assuma um valor de cor hexadecimal HTML, ele só usa esse valor para determinar a cor básica, ou seja, a orientação no disco de cores, não definindo a saturação ou o brilho, que são indicados em separado como mudanças percentuais.

Por exemplo, você pode definir o matiz de verde puro como hue:0x00ff00 ou hue:0x000100. Os dois são idênticos. Ambos os valores apontam para o verde puro no modelo de cor HSL.

Uma roda de cores RGB

Os valores em RGB de hue, que consiste em frações ideais de vermelho, verde e azul não indicam um matiz, porque nenhum desses valores mostra uma orientação no espaço de coordenadas HSL. Alguns exemplos são "#000000" (preto), "#FFFFFF" (branco), e todos os tons puros de cinza. Para indicar preto, branco ou cinza, remova todos os valores de saturation (defina como -100) e ajuste lightness.

Além disso, ao modificar os recursos existentes que já têm um esquema de cores, alterar um valor como hue não muda a saturation ou o lightness existentes.