Mapas con estilos

  1. Información general
  2. Sintaxis de estilos
    1. Funciones de mapas
    2. Parámetros de estilo
    3. Ejemplo de arreglo de estilo
  3. Cómo cambiar el estilo de mapa predeterminado
  4. Cómo crear un elemento StyledMapType
  5. El asistente de mapas con estilos

Información general

Los mapas con estilos te permiten personalizar la presentación de mapas básicos estándares de Google. Podrás cambiar la visualización de elementos como carreteras, parques y áreas con edificaciones.

Existen dos maneras de aplicar estilos a un mapa:

  • Configurar la propiedad .styles del objeto MapOptions. Este enfoque cambia el estilo de los tipos de mapas estándares (las imágenes básicas en vistas terrestres y satelitales no se ven afectadas, pero las carreteras y etiquetas, entre otras, respetan las reglas de estilo). Consulta Cómo cambiar el estilo de mapa predeterminado.

  • Crear y definir un elemento StyledMapType y aplicarlo al mapa. Con esto se crea un nuevo tipo de mapa que puede seleccionarse en el control de tipos de mapa. Consulta Cómo crear un elemento StyledMapType.

En ambos enfoques se toma un arreglo de elementos MapTypeStyle, cada uno de los cuales consta de selectores y parámetros de estilo. Los selectores especifican los componentes de mapas que deben seleccionarse para aplicar ajustes de estilo, mientras que los parámetros de estilo especifican la modificación visual de dichos elementos.

Sintaxis de estilos

En los mapas con estilos se usan dos conceptos para aplicar colores y cambios a un mapa:

  • Las funciones de mapas son los elementos geográficos que pueden incluirse en el mapa. Entre ellos se incluyen carreteras, parques y masas de agua, entre otros, además de sus etiquetas.
  • Los parámetros de estilo son propiedades de color y visibilidad que pueden aplicarse a funciones de mapas. Definen el color de visualización a través de una combinación de valores de matiz, color y luminosidad o gama.

Las funciones y los parámetros de estilo de los mapas se combinan en un arreglo de estilos que se pasa al objeto MapOptions del mapa predeterminado o al constructor de StyledMapType. El arreglo adopta la siguiente forma:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

A continuación se describen las partes que lo componen.

Funciones de mapas

Un mapa consiste en un conjunto de funciones, como carreteras y parques, que se especifican a través de un elemento MapTypeStyleFeatureType. Los tipos de funciones forman un árbol de categorías cuya raíz es all. En la referencia de Google Maps JavaScript API se proporciona la lista completa de funciones para seleccionar dentro de un mapa. Al especificar la función como all se seleccionarán todos los elementos del mapa.

Las funciones se especifican con la sintaxis featureType: 'feature'.

Por ejemplo:

{
  featureType: "road"
}

Algunas categorías de tipos de características contienen subcategorías que se especifican en notación estándar (landscape.natural o road.local, por ejemplo). Si se especifica la función principal (road, ejemplo), los estilos aplicados a esa selección se aplicarán a sus categorías hijas.

Además, algunas funciones de un mapa constan de diferentes elementos. Una carretera, por ejemplo, comprende no solo en la línea gráfica (geometría) del mapa, sino también el texto que define su nombre (etiquetas). Los elementos dentro de las funciones se seleccionan especificando una categoría del tipo MapTypeStyleElementType. Se admiten los siguientes tipos de elementos:

  • all (predeterminado) selecciona todos los elementos de la función.
  • geometry selecciona todos los elementos geométricos de la función.
    • geometry.fill selecciona únicamente el relleno de la geometría de la función.
    • geometry.stroke selecciona únicamente el trazo de la geometría de la función.
  • labels selecciona únicamente las etiquetas textuales asociadas con la función.
    • labels.icon selecciona únicamente el icono que se muestra dentro de la etiqueta de la función.
    • labels.text selecciona únicamente el texto de la etiqueta.
    • labels.text.fill selecciona únicamente el relleno de la etiqueta. El relleno de una etiqueta normalmente se representa como un contorno coloreado que rodea al texto de la etiqueta.
    • labels.text. stroke selecciona únicamente el trazo del texto de la etiqueta.

Con la siguiente especificación se seleccionan las etiquetas para todas las carreteras locales:

{
  featureType: "road.local",
  elementType: "labels"
}

Parámetros de estilo

Los parámetros de estilo son opciones de formato de tipo MapTypeStyler que se aplican a funciones de mapas. Se admiten las siguientes opciones de MapTypeStyler:

  • hue (cadena RGB hexadecimal) indica el color básico.
  • lightness (un valor de punto flotante entre -100 y 100) indica el cambio en el porcentaje de brillo del elemento. Los valores negativos aumentan la oscuridad (donde -100 especifica negro) mientras los valores positivos aumentan el brillo (donde +100 especifica blanco).
  • saturation (un valor de punto flotante entre -100 y 100) indica el cambio en el porcentaje de la intensidad del color básico que se aplicará al elemento.
  • gamma (un valor de punto flotante entre 0.01 y 10.0, donde 1.0 no aplica corrección) indica la cantidad de corrección gamma que se aplicará al elemento. Los valores “gamma” modifican el brillo de los matices de forma no lineal, sin afectar los valores de blanco o negro. Los valores gamma generalmente se usan para modificar el contraste de múltiples elementos. Por ejemplo, podrías modificar un valor gamma para aumentar o reducir el contraste entre los bordes y el interior de los elementos. Los valores gamma bajos (< 1) aumentan el contraste y los valores gamma altos (> 1) disminuyen el contraste.
  • inverse_lightness:true (si el valor es true) simplemente invierte el brillo actual. Esto resulta útil, por ejemplo, para realizar un cambio rápido a un mapa más oscuro con texto blanco.
  • visibility (on, off o simplified) indica si el elemento aparece en el mapa y la manera en que esto sucede. Con un elemento de visibilidad simplified se eliminan algunas de las funciones de estilo de las funciones afectadas. En el caso de las carreteras, por ejemplo, se aplica una simplificación con líneas más finas y sin contornos, y en el de los parques se elimina el texto de etiquetas, pero se conserva el icono de estas.
  • color (cadena RGB hexadecimal) configura el color de la función.
  • weight (valor entero, igual o superior a cero) configura el peso de la función en píxeles. Si se fija en un valor alto, como resultado puede aplicarse un recorte cerca de los bordes de los mosaicos.

El color puede configurarse con un solo valor color, o bien modificarse combinando hue, saturation y lightness. Estas propiedades ofrecen dos métodos diferentes para representar color, pero es posible combinar los dos métodos. Por ejemplo, podrías configurar un valor y luego modificar la saturación y luminosidad de modo que se desvanezca el mapa cuando se muestre un cuadro de diálogo. Para obtener más información sobre los modelos de colores, consulta la documentación sobre el modelo de matices, saturación y luminosidad.

Las reglas de parámetros de estilo se aplican en el orden en que aparecen en el arreglo de MapTypeStyler. No combines varias operaciones en una única operación de parámetros de estilo. En lugar de ello, define cada operación como una entrada separada en el arreglo de parámetros de estilo. El orden es importante, ya que algunas operaciones no son conmutativas. Las funciones o los elementos que se modifican mediante operaciones de parámetros de estilo (generalmente) ya tienen estilos; las operaciones actúan sobre esos estilos existentes, si están presentes.

El modelo de matices, saturación y luminosidad

En los mapas con estilos se usa el modelo de matices, saturación y luminosidad (HSL) para indicar color dentro de las operaciones de parámetros de estilo. Esas operaciones para definir color son comunes en diseño gráfico. Hue indica el color básico, saturation indica la intensidad de ese color, y lightness indica la cantidad relativa de blanco o negro en el color constituyente.

Si bien hue admite un valor de color hexadecimal HTML, solo usa ese valor para determinar el color básico, no su saturación ni su luminosidad, que se indican por separado.

Los valores hue en RGB que consisten en partes iguales de rojo, verde y azul, como “#000000 (negro) y “#FFFFFF” (blanco) y todos los tonos puros de gris, no indican un matiz, ya que ninguno de esos valores indican una orientación en el espacio de coordenadas de HSL. Para indicar negro, blanco o gris, debes eliminar por completo saturation (agrega el valor -100) y ajustar lightness.

Además, al modificar características existentes que ya tienen un esquema de color, cambiar un valor como hue no cambia su saturation o lightness existentes.

Ejemplos de parámetros de estilo

Para mostrar una función con azul brillante:

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

Para mostrar una función con verde brillante usando un único valor RGB:

stylers: [
  { color: "#99FF33" }
]

Para eliminar todo el color de una función independientemente del color de inicio:

stylers: [
  { saturation: -100 }
]

Para ocultar una función por completo:

stylers: [
  { visibility: "off" }
]

Ejemplo de arreglo de estilo

Los selectores de funciones de mapas y las reglas de parámetros de estilo se combinan en un arreglo de estilo. Puedes incluir cualquier combinación de funciones en un único arreglo. Sin embargo, el número de estilos que puedes aplicar a la vez es limitado. Si tu arreglo de estilo excede el número máximo de caracteres, no se aplicarán estilos.

Con el ejemplo siguiente se aplica color gris a todas las funciones del mapa y azul a la geometría de carreteras principales, y se ocultan por completo etiquetas comerciales:

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Cómo cambiar el estilo de mapa predeterminado

Para modificar los estilos del tipo de mapa predeterminado (los cambios a etiquetas y caminos también tendrán efecto sobre los mapas terrestres y satelitales), configura el arreglo de estilos a través del objeto MapOptions del mapa en el momento de la construcción o llamando a setOptions.

En el ejemplo siguiente se reduce la saturación de todas las funciones y se deshabilitan las etiquetas de las carreteras.

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

Para obtener información sobre los elementos del mapa a los que se pueden aplicar ajustes de estilo, consulta Funciones de mapas. Para conocer los colores y efectos que pueden aplicarse, consulta Parámetros de estilo.

Cómo crear un elemento StyledMapType

Puedes crear un nuevo tipo de mapa al cual se apliquen estilos. Para ello, debes crear un elemento StyledMapType, y pasar la función e información sobre parámetros de estilo al constructor. Este enfoque no afecta el estilo de los tipos de mapas predeterminados.

Para crear un nuevo tipo de mapa:

  1. Crea tu arreglo de estilos. Para hallar instrucciones, consulta “Funciones de mapas” y “Parámetros de estilo”.
  2. Crea un nuevo objeto google.maps.StyledMapType y pásale el arreglo de estilos además de un nombre para el nuevo tipo de mapa.
  3. Crea tu objeto de mapa y, en las opciones de mapa, incluye un identificador para el nuevo tipo de mapa en el arreglo mapTypeIds (una propiedad del objeto mapTypeControlOptions).
  4. Asocia el identificador del último paso y el nuevo mapa con estilos.
  5. Configura el mapa para que en él se use el nuevo tipo de mapa.
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

El mapa resultante se muestra debajo. Observa el control de tipo de mapa de la parte inferior izquierda del mapa. Se trata del nuevo tipo de mapa creado en el ejemplo de código.

Para obtener información sobre los elementos del mapa a los que se pueden aplicar ajustes de estilo, consulta Funciones de mapas. Para conocer los colores y efectos que pueden aplicarse, consulta Parámetros de estilo.

El asistente de mapas con estilos

Crear estilos manualmente y probar tu código para ver su aspecto puede llevar tiempo. En lugar de ello, puedes recurrir al Asistente de mapas con estilos a fin de configurar el JSON para los estilos de tu mapa. El asistente te permite seleccionar funciones y sus elementos, aplicar operaciones a estas y guardar los estilos en JSON, que puedes copiar y pegar en tu aplicación.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.