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

Selecione a plataforma: Android iOS JavaScript Web Service

O esquema JSON para estilo de mapa baseado 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.

Baixar o esquema JSON

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

Veja 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 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 elemento do mapa e as regras de estilo a serem aplicadas (por exemplo, fillColor).
    • label (opcional): o texto ou o rótulo 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 fundo do app de mapa usando uma string hexadecimal #RRGGBB. Essa configuração não permite 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 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 recursos do mapa. Cada objeto de regra de estilo precisa consistir no seguinte:

  • id.
  • Elemento geometry ou label com as propriedades de estilização associadas definidas.

id (recurso de mapa)

A propriedade id especifica o recurso do mapa a ser estilizado. Os nomes das propriedades são versões em camel case dos nomes dos recursos 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 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 recurso de 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 recurso 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 de mapa especificado.
  • label: seleciona todos os elementos de rótulo (por exemplo, texto, marcador) do recurso de mapa especificado.

Estilizadores

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

Por exemplo, para uma área construída, você pode estilizar cada elemento da seguinte maneira:

Exemplo de estilistas geometry para um edifício Exemplo de estilistas label para um edifício
Se o polígono da área construída deve 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.

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 estilistas geométricos disponíveis.

Styler 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 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 estilistas de rótulos disponíveis.

Styler Tipo Descrição

visible

booleano Para ocultar o rótulo de um recurso 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 em um intervalo de 0 a 8.

pinFillColor

string Personalize a cor 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 zoom 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 keyzoom, o estilo será aplicado desse nível de zoom até o próximo que você definiu.

Para definir um nível de zoom principal para um estilo, na propriedade do estilista, defina o nível de zoom principal de z0 a z22 e depois a personalização do estilista.

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.