El esquema JSON para el diseño de mapas basado en Cloud 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.
Para obtener información sobre cómo editar un estilo de mapa con JSON en el editor de estilo o cómo importar y exportar un estilo de mapa, consulta Cómo usar JSON con el diseño de mapas basado en Cloud.
Consulta un ejemplo de declaración de diseño JSON
En la siguiente declaración de diseño JSON, se establece un color de fondo y, luego, se definen diseños para los lugares de interés, los parques y los componentes de agua, y se ocultan 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.
- Propiedades de nivel superior (opcional): Son parámetros de configuración de diseño globales, como
backgroundColoryvariant. 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 pin del componente de mapa y las reglas de diseño que se aplicarán (p.ej.,textStrokeColor).
Propiedades de nivel superior
Las propiedades de la siguiente tabla se aplican a todo el diseño de mapa.
| Propiedad | Tipo | Descripción | Ejemplo |
|---|---|---|---|
|
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" |
|
"light"|"dark" | Especifica el modo claro u oscuro. Si no se especifica, el valor predeterminado es "light". | "light" |
|
booleano | Para habilitar el modo monocromático, usa true para obtener una versión en gris del mapa. |
|
|
objeto | Son datos arbitrarios de par clave-valor incluidos en la definición de diseño. Puedes usar este campo para incluir contenido no relacionado con el diseño sobre el diseño. Estos datos no se envían a clientes de Maps, como el SDK de Maps JavaScript. |
|
Objetos de reglas de diseño
En esta sección, se describen las propiedades que definen los objetos de reglas de diseño en el array styles para personalizar los componentes de mapa. Cada objeto de reglas de diseño debe constar de lo siguiente:
- Propiedad
id - Elemento
geometryolabelcon las propiedades de percheros asociadas definidas
id (componente de mapa)
La propiedad id especifica el componente de mapa al que se le aplicará el diseño. Los nombres de las propiedades son versiones en camel case de los nombres de los componentes de mapa en el editor de estilo.
Los componentes de 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 id disponibles
Las propiedades id disponibles son las siguientes:
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
Los elementos son subdivisiones de un componente de 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 se encuentran disponibles; sin embargo, ten en cuenta que un componente de mapa en particular 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 etiqueta (p.ej., texto, pin) del componente de mapa especificado.
Percheros
Los percheros son la forma en que defines tus reglas de diseño para cada elemento de un componente de mapa.
Por ejemplo, para la huella de un edificio, puedes diseñar cada elemento de la siguiente manera:
Ejemplo de percheros geometry para un edificio |
Ejemplo de percheros label para un edificio |
|---|---|
| Si se debe ocultar o mostrar el polígono de la huella del edificio en el mapa | Si se debe ocultar o mostrar la etiqueta del edificio |
| Color de relleno y opacidad 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.
Percheros geometry
En la siguiente tabla, se enumeran todos los percheros geométricos disponibles.
| Parámetro de diseño | Tipo | Descripción |
|---|---|---|
|
booleano | Para ocultar el polígono o la polilínea de un componente de mapa, establece false. |
|
string | Personaliza el color del polígono o la polilínea con una cadena hexadecimal RGB. |
|
float | Personaliza la opacidad del polígono o la polilínea, donde 0 es transparente y 1 es opaco. |
|
string | Personaliza el color del contorno con una cadena hexadecimal RGB. |
|
float | Personaliza la opacidad del contorno, donde 0 es transparente y 1 es opaco. |
|
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.
Percheros label
En la siguiente tabla, se enumeran todos los percheros de etiquetas disponibles.
| Parámetro de diseño | Tipo | Descripción |
|---|---|---|
|
booleano | Para ocultar la etiqueta de un componente de mapa, establece false. |
|
string | Personaliza el color de la etiqueta de texto con una cadena hexadecimal RGB. |
|
float | Personaliza la opacidad de la etiqueta de texto, donde 0 es transparente y 1 es opaco. |
|
string | Personaliza el color del contorno con una cadena hexadecimal RGB. |
|
float | Personaliza la opacidad del contorno, donde 0 es transparente y 1 es opaco. |
|
float | Personaliza el grosor del contorno en un rango de 0 a 8. |
|
string | Personaliza el color del pin con una cadena hexadecimal RGB. |
|
string | Personaliza el color del glifo (ícono) dentro de un pin con una cadena hexadecimal RGB. |
|
string | Personaliza el color del contorno 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 componente para todos los niveles de keyzoom o especificar diferentes diseños para diferentes niveles de keyzoom. 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 keyzoom, el diseño se aplicará desde ese nivel de zoom hasta el siguiente que hayas definido.
Para establecer un nivel de keyzoom para un estilo, en la propiedad del parámetro de diseño, define el nivel de keyzoom de z0 a z22 y, luego, la personalización del parámetro de diseño.
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.
Limitaciones
Puedes usar JSON para diseñar casi todo en la consola de Google Cloud, excepto las siguientes opciones del menú Configuración del mapa:
- Controla la densidad de los lugares de interés.
- Cambia la visualización (huellas versus 3D) de los edificios.
- Cambia la visualización (ilustrada versus estándar) de los lugares emblemáticos.
Estas opciones a nivel del mapa requieren una nueva recuperación de los datos de mosaicos para renderizarse correctamente, lo que puede ser indeseable para ciertos casos de uso.
Para estas opciones, debes seleccionar tu preferencia en el menú Configuración del mapa.
Como estas opciones no se incluyen en los estilos exportados, se deben volver a seleccionar en la consola de Google Cloud cuando se importa un estilo.