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

El esquema JSON para el diseño de mapas basado en Cloud te permite usar JSON para personalizar mapas, tal como 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.

downloadDescargar el esquema JSON

Para aprender a editar un diseño de mapa con JSON en el editor de diseño o a importar y exportar un diseño de mapa, consulta Cómo usar JSON con el diseño de mapas basado en Cloud.

{
  "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 estilo globales, 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 del 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 del 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 elemento del 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.

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 componentes del mapa. Cada objeto de regla de diseño debe constar de lo siguiente:

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

id (componente de mapa)

La propiedad id especifica el componente del mapa al que se le aplicará el estilo. Los nombres de las propiedades son versiones en mayúsculas y minúsculas de los nombres de los componentes 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 del mapa.

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 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 stylers o parámetros de diseño 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 aplicar diseño a cada elemento de la siguiente manera:

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

geometry de parámetros de estilo

En la siguiente tabla, se enumeran todos los estilos geométricos disponibles.

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

label de parámetros de estilo

En la siguiente tabla, se enumeran todos los estilos de etiquetas disponibles.

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

Keyzooms

Puedes establecer un solo estilo para un componente en todos los niveles de keyzoom o especificar diferentes estilos para los distintos niveles de keyzoom. Si solo proporcionas un estilo, se usará para todos los niveles de keyZoom a partir de z0. Si proporcionas estilos para diferentes niveles de keyzoom, el estilo 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 de diseño, define el nivel de keyzoom de z0 a z22 y, luego, la personalización del 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 del 6 al 11 y gris claro a partir del nivel 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 aplicar diseño a 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.
• Cambiar la visualización (2D o 3D) de los edificios
• Cambiar la visualización (ilustrada o estándar) de los puntos de referencia

Estas opciones a nivel del mapa requieren que se vuelvan a recuperar los datos de las tarjetas para que se rendericen correctamente, lo que puede no ser conveniente en ciertos casos de uso.

Para estas opciones, debes seleccionar tu preferencia en el menú settings Configuración del mapa.

Como estas opciones no se incluyen en los diseños exportados, se deben volver a seleccionar en la consola de Google Cloud cuando se importa un diseño.