Cuando personalizas un diseño de mapa, es útil comprender cómo el diseño de diferentes componentes de mapa puede afectar otros diseños del mapa. Hay varias capas que se superponen:
Mapa base: Cuando comienzas a crear un diseño de mapa, la versión inicial que se muestra corresponde al diseño del mapa base, es decir, el mapa predeterminado. Los componentes del mapa que no personalizas conservan el diseño del mapa base.
Diseños de mapa: Los diseños personalizados anulan los diseños de la capa del mapa base.
En esta imagen, el diseño de mapa personalizado anula el del mapa base, y las áreas urbanas se muestran en color aguamarina, y las rutas, en azul oscuro.
Elementos de diseño: Cada componente de mapa tiene uno o más elementos de diseño que puedes personalizar. En esta imagen, el relleno de los polígonos de los componentes de mapa de áreas urbanas se muestra en color aguamarina, y el relleno de la red de rutas, en azul.
Jerarquía de los componentes del mapa
En un diseño de mapa, los componentes de mapa se organizan de manera jerárquica, con 4 componentes generales arriba y todos los demás componentes de mapa ordenados debajo de ellos en una jerarquía lógica. De forma predeterminada, un componente de mapa hereda el diseño de los elementos del componente de mapa que se encuentra por encima de él en la jerarquía (su nivel superior). Sin embargo, puedes anular el diseño del nivel superior configurando uno o varios de los elementos de diseño para los componentes de mapa que están debajo (componentes secundarios del mapa). Para obtener detalles sobre la jerarquía de los componentes del mapa, consulta el artículo ¿Qué elementos de diseño puedes personalizar en el mapa?
Cada componente del mapa tiene uno o varios elementos, o partes de él, para los que puedes aplicar ajustes de diseño. Por ejemplo, el color de relleno del polígono (la forma del componente de mapa) es un elemento, al igual que el color de trazo de la etiqueta de texto. Puedes aplicar ajustes de diseño a cada elemento por separado, y los elementos a los que no les apliques diseño conservarán el diseño predeterminado. Dado que los elementos son independientes, puedes aplicar diseño al color de relleno del texto de la etiqueta y dejar el color del trazo (contorno) predeterminado (o el heredado del diseño del nivel superior).
Estos son algunos lineamientos útiles para comprender cómo funcionan la jerarquía de diseños y la herencia.
Los diseños secundarios predeterminados heredan el diseño superior: Para que todos los componentes de mapa secundarios hereden un diseño, establece el diseño del componente de mapa superior y deja el diseño secundario como el predeterminado.
Los diseños secundarios personalizados anulan el diseño superior: Para anular el diseño superior, configura un diseño personalizado en el componente secundario.
Los elementos de diseño son independientes: Los elementos de diseño que puedes configurar en un componente de mapa (por ejemplo, el polígono, el ícono de la etiqueta y el relleno y el trazo del texto de la etiqueta) son independientes entre sí. Si configuras el color del polígono, pero no estableces nada para el ícono, el diseño del polígono anula el diseño superior, pero el ícono hereda el diseño superior o predeterminado.
Desactiva la visibilidad para ocultar los componentes de mapa: Si solo deseas ver un componente de mapa, debes desactivar la visibilidad para todos los demás.
Ejemplo de jerarquía y herencia
Este es un ejemplo de cómo funcionan la herencia y la jerarquía.
Selecciona el componente de mapa de nivel superior Natural (Natural) y establece el Color de relleno (Fill color) de Polígono (Polygon) en amarillo. De esta manera, todos los polígonos de los componentes del mapa que se encuentren en Natural se mostrarán en amarillo:
Si quieres que la opción Cobertura terrestre (Land cover), que se encuentra en Natural, también se muestre en amarillo, no le apliques ningún diseño, y heredará el de Natural.
Si quieres que los bosques se muestren en verde, en Land cover, abre Bosque (Forest) y aplica el color verde al polígono correspondiente. Este diseño secundario personalizado anula los diseños de Land cover y Natural.
Si quieres que el hielo se muestre en aguamarina pálido, en Land cover, abre Hielo (Ice), y aplica el color aguamarina pálido al polígono correspondiente.
Por último, si deseas que el agua se muestre en aguamarina, selecciona Natural > Agua (Natural > Water) y aplica el color aguamarina al polígono correspondiente. Configurar el diseño secundario Agua (Water) anula el diseño superior de Natural.
Sigue un proceso similar para destacar los componentes del mapa según tus necesidades.
[null,null,["Última actualización: 2025-08-27 (UTC)"],[],[],null,["Select platform: [Android](/maps/documentation/android-sdk/cloud-customization/map-hier \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/map-hier \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/map-hier \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/map-hier \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\nWhen you customize a map style, it helps to understand how styling different map\nfeatures may affect other styles on the map. There are several layers that\noverlap:\n\n- **The base map**: When you start creating a map style, the initial\n you see is the style of the base map; that is, the default map. Any map\n features you don't customize retain the base map styling.\n\n- **Map styles**: Custom styles override the styles on the base map layer.\n In this image, the custom map style overrides the urban areas as aqua\n and roads as dark blue.\n\n- **Style elements**: Each map feature has one or more style elements that\n you can customize. In this image, the urban areas map feature polygon\n fill color is styled as aqua, and the road network fill color\n is styled as blue.\n\nMap feature hierarchy\n\nWithin a map style, map features are organized hierarchically, with 4 broad\nmap features at the top, and all other map features arranged beneath them in\na logical hierarchy. By default, a map feature inherits the element styles\nfor the map feature above it in the hierarchy (its parent); however, you\ncan override the top level style by setting one or more of the style elements\nfor map features underneath it (child map features). For details on the map\nfeature hierarchy, see [What you can style on a map](/maps/documentation/javascript/cloud-customization/taxonomy).\n\nEach map feature has one or more elements, or parts of the map feature, that\nyou can style. For example, the fill color for the polygon (the map feature\nshape) is an element, as is the stroke color for the text label. You style\neach element separately, and any element you don't style retains the default\nstyle. Since elements are separate, you can style the fill color for label\ntext, and leave the stroke (outline) color as the default (or inheriting\nfrom a parent style).\n\nHere are some helpful guidelines in understanding how style hierarchy and\ninheritance work.\n\n- **Default child styles inherit from the parent**: To have all\n child map features inherit a style, set the style for the parent map feature,\n and leave the child style as the default.\n\n- **Custom child styles override the parent**: To override the parent style,\n set a custom style on the child feature.\n\n- **Style elements are independent**: The style elements you can set for a\n map feature (for example, the polygon, the label icon, and the label text\n fill and stroke) are independent from each other. If you set the polygon\n color, but leave the icon alone, the polygon style overrides the parent\n style, but the icon inherits the parent or default style.\n\n- **Turn off Visibility to hide map features**: If you want to see only one\n thing on your map, you have to turn off visibility for everything else.\n\n | **Note:** When you hide map features or make them semi-transparent, you may expose boundary inaccuracies. Map feature boundaries are not always precise, but are adjusted to look correct when all layers are visible. For more details, see [Manage styles that overlap](/maps/documentation/javascript/cloud-customization/overlap).\n\nHierarchy and Inheritance Example\n\nHere is an example of how inheritance and hierarchy works.\n\n1. Select the top-level map feature of **Natural** , and set the\n **Polygon Fill color** to yellow. This styles all polygons for map\n features under **Natural** to be yellow:\n\n2. You want **Land cover** , which is under **Natural** , to also be yellow,\n so you leave it unstyled, and it inherits the style from **Natural**.\n\n3. You want forests to be green, so under **Land cover** , you open **Forest** ,\n and color its polygon green. This custom child style overrides the\n styles for **Land cover** and **Natural**.\n\n4. You want ice to be shown a pale aqua, so also under **Land cover** , you\n open **Ice**, and color its polygon pale aqua.\n\n5. And last, you want water to be aqua, so you select **Natural\\\u003eWater** , and\n color its polygon aqua. Setting the child style **Water** overrides the parent\n style for **Natural**.\n\nFollow a similar process to highlight the map features for your needs."]]
