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.
- Propriedades de nível superior (opcional): configurações de estilo global, como
backgroundColorevariant. 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 texto ou o rótulo do pino 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 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" |
|
"light"|"dark" | Especifique o modo claro ou escuro. Se não for especificado, o padrão será "light". | "light" |
|
booleano | Para ativar o modo 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. É possível usar esse campo para incluir conteúdo não relacionado ao estilo. Esses dados não são enviados para clientes de mapas, 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 elementos do mapa. Cada objeto de regra de estilo precisa consistir no seguinte:
- Propriedade
id. - Elemento
geometryoulabelcom as propriedades do 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:
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 (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, pino) 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 baixa de um edifício, é possível 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 baixa do edifício será ocultado ou mostrado no mapa. | Se o rótulo do edifício será ocultado ou mostrado. |
| 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 |
|---|---|---|
|
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 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 |
|---|---|---|
|
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 de um intervalo de 0 a 8. |
|
string | Personalize a cor do pino com uma string hexadecimal RGB. |
|
string | Personalize a cor do glifo (ícone) em um pino com uma string hexadecimal RGB. |
|
string | Personalize a cor do contorno do pino 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 em 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 as seguintes opções no menu Configurações do mapa:
- Controlar a densidade dos pontos de interesse.
- Mudar a exibição (plantas baixas versus 3D) de edifícios.
- Mudar a exibição (ilustrada versus padrão) de pontos de referência.
Essas opções no nível do mapa exigem uma nova busca de dados de blocos 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.