Referência JSON para a Estilização de mapas baseada na nuvem

Selecione a plataforma: Android iOS JavaScript Web Service

O esquema JSON para estilização de mapas baseada na nuvem permite usar JSON para personalizar mapas da mesma forma que você faria na interface do editor de estilo. Este documento descreve o esquema JSON e como fazer declarações de estilo JSON.

Faça o download do esquema JSON

Para saber como editar um estilo de mapa usando JSON no editor de estilo ou para importar e exportar um estilo de mapa, consulte Usar JSON com estilização de mapas baseada na nuvem.

Confira um exemplo de declaração de estilo JSON

A declaração de estilo JSON a seguir define uma cor de plano de fundo e, em seguida, define estilos para pontos de interesse, parques, recursos hídricos e oculta rótulos de locais de comida e bebida.


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

O objeto JSON

Uma declaração de estilo JSON consiste em um objeto de nível superior e uma matriz de regras de estilo.

Configurações de nível superior (opcional): configurações de estilo global, como backgroundColor e variant.
styles : uma matriz de objetos de regra de estilo, que podem consistir no seguinte:
- id : o elemento do mapa a ser selecionado para essa modificação de estilo (por exemplo, pointOfInterest.recreation.park).
- geometry (opcional): os elementos geométricos do elemento do mapa e as regras de estilo a serem aplicadas (por exemplo, fillColor).
- label (opcional): o rótulo de texto ou alfinete do elemento do mapa e as regras de estilo a serem aplicadas (por exemplo, textStrokeColor).

Configurações de nível superior

As propriedades na tabela a seguir se aplicam a todo o estilo de mapa.

Propriedade	Tipo	Descrição	Exemplo
`backgroundColor`	String	Personalize a cor de plano de fundo do app de mapas usando uma string hexadecimal #RRGGBB. Essa configuração não oferece suporte a mudanças na opacidade.	"#002211"
`variant`	"light"\|"dark"	Especifique o modo claro ou escuro. Se não for especificado, o padrão será "light".	"light"
`monochrome`	booleano	Para ativar o modo monocromático, use `true` para uma versão em tons de cinza do mapa.	`true`

Objetos de regra de estilo

Esta seção descreve as propriedades que definem os objetos de regra de estilo na matriz styles para personalizar elementos do mapa. Cada objeto de regra de estilo precisa consistir no seguinte:

Propriedade id.
Elemento geometry ou label com as propriedades de estilizador associadas definidas.

`id` (elemento do mapa)

A propriedade id especifica o elemento do mapa a ser estilizado. Os nomes das propriedades são versões em camel case dos nomes dos elementos do mapa no editor de estilo.

Os elementos do mapa formam uma árvore de categorias. Se você especificar um tipo de elemento pai, como pointOfInterest, os estilos especificados para o pai serão aplicados a todos os filhos, como pointOfInterest.retail e pointOfInterest.lodging. Para mais detalhes, consulte Hierarquia de elementos do mapa.

Lista de propriedades `id` disponíveis

As propriedades id disponíveis são as seguintes:

pointOfInterest
pointOfInterest.emergency
pointOfInterest.emergency.fire
pointOfInterest.emergency.hospital
pointOfInterest.emergency.pharmacy
pointOfInterest.emergency.police
pointOfInterest.entertainment
pointOfInterest.entertainment.arts
pointOfInterest.entertainment.casino
pointOfInterest.entertainment.cinema
pointOfInterest.entertainment.historic
pointOfInterest.entertainment.museum
pointOfInterest.entertainment.themePark
pointOfInterest.entertainment.touristAttraction
pointOfInterest.foodAndDrink
pointOfInterest.foodAndDrink.bar
pointOfInterest.foodAndDrink.cafe
pointOfInterest.foodAndDrink.restaurant
pointOfInterest.foodAndDrink.winery
pointOfInterest.landmark
pointOfInterest.lodging
pointOfInterest.recreation
pointOfInterest.recreation.beach
pointOfInterest.recreation.boating
pointOfInterest.recreation.fishing
pointOfInterest.recreation.golfCourse
pointOfInterest.recreation.hotSpring
pointOfInterest.recreation.natureReserve
pointOfInterest.recreation.park
pointOfInterest.recreation.peak
pointOfInterest.recreation.sportsComplex
pointOfInterest.recreation.sportsField
pointOfInterest.recreation.trailhead
pointOfInterest.recreation.zoo
pointOfInterest.retail
pointOfInterest.retail.grocery
pointOfInterest.retail.shopping
pointOfInterest.service
pointOfInterest.service.atm
pointOfInterest.service.bank
pointOfInterest.service.carRental
pointOfInterest.service.evCharging
pointOfInterest.service.gasStation
pointOfInterest.service.parkingLot
pointOfInterest.service.postOffice
pointOfInterest.service.restStop
pointOfInterest.service.restroom
pointOfInterest.transit
pointOfInterest.transit.airport
pointOfInterest.other
pointOfInterest.other.bridge
pointOfInterest.other.cemetery
pointOfInterest.other.government
pointOfInterest.other.library
pointOfInterest.other.military
pointOfInterest.other.placeOfWorship
pointOfInterest.other.school
pointOfInterest.other.townSquare
political
political.countryOrRegion
political.border
political.reservation
political.stateOrProvince
political.city
political.sublocality
political.neighborhood
political.landParcel
infrastructure
infrastructure.building
infrastructure.building.commercial
infrastructure.businessCorridor
infrastructure.roadNetwork
infrastructure.roadNetwork.noTraffic
infrastructure.roadNetwork.noTraffic.pedestrianMall
infrastructure.roadNetwork.noTraffic.trail
infrastructure.roadNetwork.noTraffic.trail.paved
infrastructure.roadNetwork.noTraffic.trail.unpaved
infrastructure.roadNetwork.parkingAisle
infrastructure.roadNetwork.ramp
infrastructure.roadNetwork.road
infrastructure.roadNetwork.road.arterial
infrastructure.roadNetwork.road.highway
infrastructure.roadNetwork.road.local
infrastructure.roadNetwork.road.noOutlet
infrastructure.roadNetwork.roadShield
infrastructure.roadNetwork.roadSign
infrastructure.roadNetwork.roadDetail
infrastructure.roadNetwork.roadDetail.surface
infrastructure.roadNetwork.roadDetail.crosswalk
infrastructure.roadNetwork.roadDetail.sidewalk
infrastructure.roadNetwork.roadDetail.intersection
infrastructure.railwayTrack
infrastructure.railwayTrack.commercial
infrastructure.railwayTrack.commuter
infrastructure.transitStation
infrastructure.transitStation.bicycleShare
infrastructure.transitStation.busStation
infrastructure.transitStation.ferryTerminal
infrastructure.transitStation.funicularStation
infrastructure.transitStation.gondolaStation
infrastructure.transitStation.monorail
infrastructure.transitStation.railStation
infrastructure.transitStation.railStation.subwayStation
infrastructure.transitStation.railStation.tramStation
infrastructure.urbanArea
natural
natural.continent
natural.archipelago
natural.island
natural.land
natural.land.landCover
natural.land.landCover.crops
natural.land.landCover.dryCrops
natural.land.landCover.forest
natural.land.landCover.ice
natural.land.landCover.sand
natural.land.landCover.shrub
natural.land.landCover.tundra
natural.water
natural.water.ocean
natural.water.lake
natural.water.river
natural.water.other
natural.base

Elementos

Elementos são subdivisões de um elemento do mapa. Por exemplo, uma via é composta pela linha gráfica (a geometry) no mapa e pelo texto que indica o nome dela (o label).

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

geometry: seleciona todos os elementos geométricos (por exemplo, polígono, polilinha) do elemento do mapa especificado.
label: seleciona todos os elementos de rótulo (por exemplo, texto, alfinete) do elemento do mapa especificado.

Estilizadores

Os estilizadores são como você define as regras de estilo para cada elemento de um elemento do mapa.

Por exemplo, para uma planta de edifício, você pode estilizar cada elemento da seguinte maneira:

Exemplo de estilizadores `geometry` para um edifício	Exemplo de estilizadores `label` para um edifício
Se o polígono da planta do edifício será mostrado ou ocultado no mapa.	Se o rótulo do edifício será mostrado ou ocultado.
Cor de preenchimento e opacidade do polígono.	Cor de preenchimento e opacidade do texto.
Cor, opacidade e largura da borda.	Cor e opacidade do traço do texto.

Esta seção descreve as diferentes opções de estilo disponíveis para os elementos geometry e label.

Estilizadores `geometry`

A tabela a seguir lista todos os estilizadores geométricos disponíveis.

Estilizador	Tipo	Descrição
`visible`	booleano	Para ocultar o polígono ou a polilinha de um elemento do mapa, defina como `false`.
`fillColor`	string	Personalize a cor do polígono ou da polilinha com uma string hexadecimal RGB.
`fillOpacity`	float	Personalize a opacidade do polígono ou da polilinha, em que 0 é transparente e 1 é opaco.
`strokeColor`	string	Personalize a cor do contorno com uma string hexadecimal RGB.
`strokeOpacity`	float	Personalize a opacidade do contorno, em que 0 é transparente e 1 é opaco.
`strokeWeight`	float	Personalize a espessura do contorno de um intervalo de 0 a 8.

Para mais informações, consulte Polígonos e polilinhas.

Estilizadores `label`

A tabela a seguir lista todos os estilizadores de rótulo disponíveis.

Estilizador	Tipo	Descrição
`visible`	booleano	Para ocultar o rótulo de um elemento do mapa, defina como `false`.
`textFillColor`	string	Personalize a cor do rótulo de texto com uma string hexadecimal RGB.
`textFillOpacity`	float	Personalize a opacidade do rótulo de texto, em que 0 é transparente e 1 é opaco.
`textStrokeColor`	string	Personalize a cor do contorno com uma string hexadecimal RGB.
`textStrokeOpacity`	float	Personalize a opacidade do contorno, em que 0 é transparente e 1 é opaco.
`textStrokeWeight`	float	Personalize a espessura do contorno de um intervalo de 0 a 8.
`pinFillColor`	string	Personalize a cor do marcador com uma string hexadecimal RGB.

Para mais informações, consulte Ícones e rótulos de texto.

Keyzooms

É possível definir um único estilo para um elemento para todos os níveis de keyzoom ou especificar estilos diferentes para níveis diferentes. Se você fornecer apenas um estilo, ele será usado para todos os níveis de keyzoom a partir de z0. Se você fornecer estilos para diferentes níveis de keyzoom, o estilo será aplicado desse nível de zoom até o próximo que você definiu.

Para definir um nível de keyzoom para um estilo, na propriedade do estilizador, defina o nível de keyzoom de z0 a z22 e, em seguida, a personalização do estilizador.

No exemplo a seguir, a cor da água é preta dos keyzoom níveis 0 a 5, cinza-escuro dos keyzoom níveis 6 a 11 e cinza-claro a partir do keyzoom nível 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Para mais informações, consulte Estilizar níveis de zoom.

Limitações

É possível usar JSON para estilizar quase tudo no Console do Google Cloud, exceto os seguintes recursos do menu Configurações do mapa:

Para esses recursos, selecione sua preferência no menu Configurações do mapa.