O esquema JSON para estilização de mapas baseada na nuvem permite usar JSON para personalizar mapas, assim como você faria na interface do editor de estilo. Este documento descreve o esquema JSON e como fazer declarações de estilo JSON.
Fazer o download do esquema JSON
Para saber como editar um estilo de mapa usando JSON no editor de estilo ou como importar e exportar um estilo de mapa, consulte Usar JSON com a 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.
- Propriedades de nível superior (opcional): configurações de estilo global, como
backgroundColorevariant. styles: uma matriz de objetos de regra de estilo, que pode 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 recurso do mapa e as regras de estilo a serem aplicadas (por exemplo,fillColor).label(opcional): o texto ou rótulo do alfinete do elemento do mapa e as regras de estilo a serem aplicadas (por exemplo,textStrokeColor).
Propriedades de nível superior
As propriedades na tabela a seguir se aplicam a todo o estilo de mapa.
| Propriedade | Tipo | Descrição | Exemplo |
|---|---|---|---|
|
String | Personalize a cor do plano de fundo do app de mapas usando uma string hexadecimal #RRGGBB. Essa configuração não permite mudanças na opacidade. | "#002211" |
|
"light"|"dark" | Especifique o modo claro ou escuro. Se não for especificado, o padrão será "light". | "light" |
|
booleano | Para ativar o monocromático, use true para uma versão cinza do mapa. |
|
|
objeto | Dados arbitrários de chave-valor incluídos na definição de estilo. Você pode usar esse campo para incluir conteúdo não relacionado ao estilo. Esses dados não são enviados a clientes do Maps, como o SDK para JavaScript do Maps. |
|
Objetos de regra de estilo
Esta seção descreve as propriedades que definem os objetos de regra de estilo na matriz styles para personalizar recursos do mapa. Cada objeto de regra de estilo precisa consistir
no seguinte:
- Propriedade
id. - Elemento
geometryoulabelcom as propriedades de estilização 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 recurso pai, como pointOfInterest, os estilos definidos 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 disponíveis de id
As propriedades id disponíveis são as seguintes:
pointOfInterestpointOfInterest.emergencypointOfInterest.emergency.firepointOfInterest.emergency.hospitalpointOfInterest.emergency.pharmacypointOfInterest.emergency.policepointOfInterest.entertainmentpointOfInterest.entertainment.artspointOfInterest.entertainment.casinopointOfInterest.entertainment.cinemapointOfInterest.entertainment.historicpointOfInterest.entertainment.museumpointOfInterest.entertainment.themeParkpointOfInterest.entertainment.touristAttractionpointOfInterest.foodAndDrinkpointOfInterest.foodAndDrink.barpointOfInterest.foodAndDrink.cafepointOfInterest.foodAndDrink.restaurantpointOfInterest.foodAndDrink.winerypointOfInterest.landmarkpointOfInterest.lodgingpointOfInterest.recreationpointOfInterest.recreation.beachpointOfInterest.recreation.boatingpointOfInterest.recreation.fishingpointOfInterest.recreation.golfCoursepointOfInterest.recreation.hotSpringpointOfInterest.recreation.natureReservepointOfInterest.recreation.parkpointOfInterest.recreation.peakpointOfInterest.recreation.sportsComplexpointOfInterest.recreation.sportsFieldpointOfInterest.recreation.trailheadpointOfInterest.recreation.zoopointOfInterest.retailpointOfInterest.retail.grocerypointOfInterest.retail.shoppingpointOfInterest.servicepointOfInterest.service.atmpointOfInterest.service.bankpointOfInterest.service.carRentalpointOfInterest.service.evChargingpointOfInterest.service.gasStationpointOfInterest.service.parkingLotpointOfInterest.service.postOfficepointOfInterest.service.restStoppointOfInterest.service.restroompointOfInterest.transitpointOfInterest.transit.airportpointOfInterest.otherpointOfInterest.other.bridgepointOfInterest.other.cemeterypointOfInterest.other.governmentpointOfInterest.other.librarypointOfInterest.other.militarypointOfInterest.other.placeOfWorshippointOfInterest.other.schoolpointOfInterest.other.townSquarepoliticalpolitical.countryOrRegionpolitical.borderpolitical.reservationpolitical.stateOrProvincepolitical.citypolitical.sublocalitypolitical.neighborhoodpolitical.landParcelinfrastructureinfrastructure.buildinginfrastructure.building.commercialinfrastructure.businessCorridorinfrastructure.roadNetworkinfrastructure.roadNetwork.noTrafficinfrastructure.roadNetwork.noTraffic.pedestrianMallinfrastructure.roadNetwork.noTraffic.trailinfrastructure.roadNetwork.noTraffic.trail.pavedinfrastructure.roadNetwork.noTraffic.trail.unpavedinfrastructure.roadNetwork.parkingAisleinfrastructure.roadNetwork.rampinfrastructure.roadNetwork.roadinfrastructure.roadNetwork.road.arterialinfrastructure.roadNetwork.road.highwayinfrastructure.roadNetwork.road.localinfrastructure.roadNetwork.road.noOutletinfrastructure.roadNetwork.roadShieldinfrastructure.roadNetwork.roadSigninfrastructure.roadNetwork.roadDetailinfrastructure.roadNetwork.roadDetail.surfaceinfrastructure.roadNetwork.roadDetail.crosswalkinfrastructure.roadNetwork.roadDetail.sidewalkinfrastructure.roadNetwork.roadDetail.intersectioninfrastructure.railwayTrackinfrastructure.railwayTrack.commercialinfrastructure.railwayTrack.commuterinfrastructure.transitStationinfrastructure.transitStation.bicycleShareinfrastructure.transitStation.busStationinfrastructure.transitStation.ferryTerminalinfrastructure.transitStation.funicularStationinfrastructure.transitStation.gondolaStationinfrastructure.transitStation.monorailinfrastructure.transitStation.railStationinfrastructure.transitStation.railStation.subwayStationinfrastructure.transitStation.railStation.tramStationinfrastructure.urbanAreanaturalnatural.continentnatural.archipelagonatural.islandnatural.landnatural.land.landCovernatural.land.landCover.cropsnatural.land.landCover.dryCropsnatural.land.landCover.forestnatural.land.landCover.icenatural.land.landCover.sandnatural.land.landCover.shrubnatural.land.landCover.tundranatural.waternatural.water.oceannatural.water.lakenatural.water.rivernatural.water.othernatural.base
Elementos
Elementos são subdivisões de um elemento do mapa. Por exemplo, uma via é composta pela linha gráfica (o 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 stylers são usados para definir as regras de estilo de cada elemento de um recurso do mapa.
Por exemplo, para uma planta de edifício, é possível estilizar cada elemento da seguinte maneira:
Exemplo de estilistas geometry para um edifício |
Exemplo de estilização de label para um edifício |
|---|---|
| Se o polígono da planta do edifício vai ser ocultado ou mostrado no mapa. | Se o rótulo do edifício deve ser ocultado ou mostrado. |
| Cor e opacidade de preenchimento do polígono. | Cor e opacidade de preenchimento do texto. |
| Cor, opacidade e largura da borda. | Cor e opacidade do traço do texto. |
Nesta seção, descrevemos as diferentes opções de estilo disponíveis para os elementos
geometry e label.
Estilizadores geometry
A tabela a seguir lista todos os estilistas geométricos disponíveis.
| Styler | Tipo | Descrição |
|---|---|---|
|
booleano | Para ocultar o polígono ou a polilinha de um elemento do mapa, defina como false. |
|
string | Personalize a cor do polígono ou da polilinha com uma string hexadecimal RGB. |
|
float | Personalize a opacidade do polígono ou da polilinha, em que 0 é transparente e 1 é opaco. |
|
string | Personalize a cor do contorno com uma string hexadecimal RGB. |
|
float | Personalize a opacidade do contorno, em que 0 é transparente e 1 é opaco. |
|
float | Personalize a espessura do contorno em um intervalo de 0 a 8. |
Para mais informações, consulte Polígonos e polilinhas.
Estilizadores label
A tabela a seguir lista todos os estilos de rótulo disponíveis.
| Styler | Tipo | Descrição |
|---|---|---|
|
booleano | Para ocultar o rótulo de um elemento do mapa, defina como false. |
|
string | Personalize a cor do rótulo de texto com uma string hexadecimal RGB. |
|
float | Personalize a opacidade do rótulo de texto, em que 0 é transparente e 1 é opaco. |
|
string | Personalize a cor do contorno com uma string hexadecimal RGB. |
|
float | Personalize a opacidade do contorno, em que 0 é transparente e 1 é opaco. |
|
float | Personalize a espessura do contorno em um intervalo de 0 a 8. |
|
string | Personalize a cor do alfinete com uma string hexadecimal RGB. |
|
string | Personalize a cor do glifo (ícone) em um alfinete com uma string hexadecimal RGB. |
|
string | Personalize a cor do contorno do alfinete 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 recurso em todos os níveis de keyzoom ou especificar estilos diferentes para cada nível. 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 zoom, o estilo será aplicado desse nível até o próximo que você definir.
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 depois a personalização do estilizador.
No exemplo a seguir, a cor da água é preta nos níveis de keyzoom 0 a 5, cinza-escuro nos níveis 6 a 11 e cinza-claro a partir do 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 as seguintes opções do menu Configurações do mapa:
- Controlar a densidade dos pontos de interesse.
- Mude a exibição (planta baixa ou 3D) dos edifícios.
- Mudar a exibição (ilustrada ou padrão) dos pontos de referência.
Essas opções no nível do mapa exigem uma nova busca dos dados de bloco para serem renderizadas corretamente, o que pode ser indesejável para determinados casos de uso.
Para essas opções, selecione sua preferência no menu Configurações do mapa.
Como essas opções não estão incluídas nos estilos exportados, elas precisam ser selecionadas novamente no console do Google Cloud ao importar um estilo.