Referencia de JSON para el diseño de mapas basado en Cloud

Selecciona la plataforma: Android iOS JavaScript Servicio web

El esquema JSON para el diseño de mapas basado en la nube te permite usar JSON para personalizar mapas de la misma manera que lo harías a través de la interfaz del editor de diseño. En este documento, se describe el esquema JSON y cómo realizar declaraciones de diseño JSON.

Descarga el esquema JSON

Para obtener información sobre cómo editar un diseño de mapa con JSON en el editor de diseño o cómo importar y exportar un diseño de mapa, consulta Usa JSON con el diseño de mapas basado en la nube.

Consulta un ejemplo de declaración de diseño JSON

La siguiente declaración de diseño JSON establece un color de fondo y, luego, define diseños para los lugares de interés, los parques y los cuerpos de agua, y oculta las etiquetas de las ubicaciones de comida y 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"       }     }   ] }

El objeto JSON

Una declaración de diseño JSON consta de un objeto de nivel superior y un array de reglas de diseño.

  • Configuración de nivel superior (opcional): Es la configuración de estilo global, como backgroundColor y variant.
  • styles: Es un array de objetos de reglas de diseño que puede constar de lo siguiente:
    • id: Es el componente de mapa que se seleccionará para esta modificación de diseño (p.ej., pointOfInterest.recreation.park).
    • geometry (opcional): Son los elementos geométricos del componente de mapa y las reglas de diseño que se aplicarán (p.ej., fillColor).
    • label (opcional): Es la etiqueta de texto o de marcador del componente de mapa y las reglas de diseño que se aplicarán (p.ej., textStrokeColor).

Configuración de nivel superior

Las propiedades de la siguiente tabla se aplican a todo el diseño del mapa.

Propiedad Tipo Descripción Ejemplo

backgroundColor

 String Personaliza el color de fondo de la app de mapas con una cadena hexadecimal #RRGGBB. Este parámetro de configuración no admite cambios en la opacidad. "#002211"

variant

"light"|"dark" Especifica el modo oscuro o claro. Si no se especifica, el valor predeterminado es "light". "light"

monochrome

booleano Para habilitar el modo monocromático, usa true para obtener una versión en gris del mapa.

true

Objetos de reglas de diseño

En esta sección, se describen las propiedades que definen los objetos de regla de diseño en el array styles para personalizar los elementos del mapa. Cada objeto de regla de estilo debe constar de lo siguiente:

  • Propiedad id.
  • Elemento geometry o label con las propiedades del diseñador asociadas definidas.

id (atributo del mapa)

La propiedad id especifica el elemento del mapa al que se le aplicará el diseño. Los nombres de las propiedades son versiones en camelcase de los nombres de los elementos del mapa en el editor de diseño.

Los componentes del mapa forman un árbol de categorías. Si especificas un tipo de componente superior, como pointOfInterest, los diseños que especifiques para este se aplicarán a todos sus componentes secundarios, como pointOfInterest.retail y pointOfInterest.lodging. Para obtener más información, consulta Jerarquía de los componentes de mapa.

Lista de propiedades de id disponibles

Las propiedades de id disponibles son las siguientes:

  • 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

Los elementos son subdivisiones de un componente del mapa. Por ejemplo, una ruta consta de la línea gráfica (la geometry) en el mapa y el texto que describe su nombre (la label).

Los siguientes elementos están disponibles, pero ten en cuenta que un componente de mapa específico puede admitir todos los elementos, algunos de ellos o ninguno:

  • geometry: Selecciona todos los elementos geométricos (p.ej., polígono, polilínea) del componente de mapa especificado.
  • label: Selecciona todos los elementos de la etiqueta (p.ej., texto, marcador) del componente de mapa especificado.

Percheros

Los stylers son la forma en que defines tus reglas de diseño para cada elemento de un componente de mapa.

Por ejemplo, para el contorno de un edificio, puedes aplicar el siguiente diseño a cada elemento:

Ejemplo de diseñadores de geometry para un edificio Ejemplo de diseñadores de label para un edificio
Indica si se debe ocultar o mostrar el polígono de la huella del edificio en el mapa. Indica si se debe ocultar o mostrar la etiqueta del edificio.
Color y opacidad del relleno del polígono Color y opacidad del relleno del texto
Color, opacidad y ancho del borde Color y opacidad del trazo del texto

En esta sección, se describen las diferentes opciones de diseño disponibles para los elementos geometry y label.

geometry stylers

En la siguiente tabla, se enumeran todos los diseñadores geométricos disponibles.

Styler Tipo Descripción

visible

booleano Para ocultar el polígono o la polilínea de un componente del mapa, establece el valor en false.

fillColor

string Personaliza el color del polígono o la polilínea con una cadena hexadecimal RGB.

fillOpacity

float Personaliza la opacidad del polígono o la polilínea, donde 0 es transparente y 1 es opaco.

strokeColor

string Personaliza el color del contorno con una cadena hexadecimal RGB.

strokeOpacity

float Personaliza la opacidad del contorno, donde 0 es transparente y 1 es opaco.

strokeWeight

float Personaliza el grosor del contorno en un rango de 0 a 8.

Para obtener más información, consulta Polígonos y polilíneas.

label stylers

En la siguiente tabla, se enumeran todos los diseñadores de etiquetas disponibles.

Styler Tipo Descripción

visible

booleano Para ocultar la etiqueta de un elemento del mapa, establece el valor en false.

textFillColor

string Personaliza el color de la etiqueta de texto con una cadena hexadecimal RGB.

textFillOpacity

float Personaliza la opacidad de la etiqueta de texto, donde 0 es transparente y 1 es opaco.

textStrokeColor

string Personaliza el color del contorno con una cadena hexadecimal RGB.

textStrokeOpacity

float Personaliza la opacidad del contorno, donde 0 es transparente y 1 es opaco.

textStrokeWeight

float Personaliza el grosor del contorno en un rango de 0 a 8.

pinFillColor

string Personaliza el color del pin con una cadena hexadecimal RGB.

Para obtener más información, consulta Íconos y etiquetas de texto.

Keyzooms

Puedes establecer un solo diseño para un elemento en todos los niveles de Keyzoom o especificar diseños diferentes para cada nivel. Si solo proporcionas un diseño, se usará para todos los niveles de keyzoom a partir de z0. Si proporcionas diseños para diferentes niveles de acercamiento clave, el diseño se aplicará desde ese nivel de acercamiento hasta el siguiente que hayas definido.

Para establecer un nivel de acercamiento clave para un diseño, en la propiedad del diseñador, define el nivel de acercamiento clave de z0 a z22 y, luego, la personalización del diseñador.

En el siguiente ejemplo, el color del agua es negro en los niveles de keyzoom del 0 al 5, gris oscuro en los niveles de keyzoom del 6 al 11 y gris claro a partir del nivel de keyzoom 12.

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

Para obtener más información, consulta Niveles de zoom de los diseños.