Estilos para Google Maps API V3 en Javascript

Hace algún tiempo salió la versión 3 del genial Google Maps API y como suele ser el caso vino cargada de interesantes funcionalidades y mejoras. Este artículo (y sin que sirva de precedente) lo vamos a dedicar a la versión Javascript de la API en lugar de nuestro querido Flash, centrándonos en las configuraciones de estilo del mapa. En esta versión de la API se ha mejorado muchísimo este apartado, y actualmente es posible customizar la vista de un Google Maps de casi cualquier manera que se nos ocurra, desde eliminando o simplificando elementos que no sean demasiado relevantes en el mapa que queremos mostrar, a cambiar los colores de la gran mayoria (por no decir todos) de los elementos del mapa.

Nuestra filosofía es que si una imagen vale más que mil palabras, en programación un ejemplo funcionando vale más que mil imágenes, así que nos sentimos orgullosos de presentaros una muestra en forma de minijuego que hemos bautizado The Great 2012 Los Tiempos Cambian City Quiz v0.1, totalmente basado en Google Maps customizados (podríamos decir que ofuscados), que se puede programar en un ratejo utilizando los modificadores de estilo que os vamos a presentar y un poquito de imaginación. ¡A ver cuántas ciudades sois capaces de reconocer! Ya os advertimos que hay algunas muy fáciles y otras que van para nota… y además hemos barrido para casa 😉

A continuación vamos a pasar a comentar un poco el código de este ejemplito, centrándonos claro en los estilos del Google map. Por supuesto, como siempre que escribimos un post explicativo, recomendamos tener como referencia siempre la documentación oficial, que podemos encontrar actualizada en inglés aquí. Existía una traducción oficial al castellano, pero era realmente confusa y además se había quedado desfasada. Además, aquí tenemos la referencia de la versión 3 de la API, de obligada consulta cuando nos pongamos a «ensuciarnos las manos» escribiendo código.

Selectores del Mapa

Los Selectores del mapa nos permiten seleccionar (y agrupar) aquellas partes del mapa sobre las que queremos definir nuestro estilo personalizado. Existen dos tipos de selectores: Features y Elements (elementos), que vamos a explicar en detalle a continuación.

Features

Un mapa de Google Maps está formado por un conjunto de features que se organizan en formato árbol (es decir, una jerarquía de nodos). Ejemplos de features serían cosas concretas como carreteras o parques, pero también elementos un tanto más abstractos como áreas administrativas o paisajes (landscapes).

Algunos de estos nodos pueden tener nodos hijo que especifican subcategorías dentro de una misma feature, por ejemplo con road seleccionaríamos todas las carreteras, y con road.local solamente las carreteras locales. Ojo por que si consultamos la documentación oficial en español, nos encontraremos con que estas features se han traducido como características o funciones (wtf?) según en qué sección miremos.

Elementos

Una feature cualquiera en el mapa está compuesto por una parte gráfica (el dibujo o símbolo que la representa) y una etiqueta que la identifica. Por ejemplo una carretera incluye no solo la línea que la representa sobre el mapa, sino también el texto que indica su nombre. La selección de los elementos de cualquier feature se puede modificar mediante un MapTypeStyleElementType, que especifica a cuáles de sus elementos nos vamos a referir. Existen los siguientes tres tipos de elementos:

• geometry: Selecciona solamente los elementos geométricos de la feature, es decir la representación gráfica.
• labels: Selecciona solo las etiquetas de texto de la feature (el nombre, en la mayor parte de los casos).
• all (valor predeterminado): Selecciona todos los elementos de la feature.

Modificadores de estilos

Los modificadores de estilos son opciones de formato de tipo MapTypeStyler que se aplican a cada uno de los selectores que hayamos especificado en el mapa. Hay que tener en cuenta que se utiliza el modelo de color Hue, Saturation, Lightness (HSL) para hacer referencia al color en estas operaciones de estilo. Si no sois diseñadores gráficos o expertos en teoría del color ésto os sonará directamente a chino, así que os vamos a intentar explicar a continuación en qué consisten cada uno de estos modificadores en la práctica. Éstos son los modificadores de estilo del tipo MapTypeStyler que se admiten actualmente y su función:

• hue: (string hexadecimal) Color básico, en formato RGB
• lightness: (float entre -100 y 100) Cambio porcentual en luminosidad del color. Los valores negativos «oscurecen» (-100 convierte a negro), mientras que los positivos «iluminan» (+100 convierte a blanco puro).
• saturation: (float entre -100 y 100) Cambio porcentual en la intensidad del color básico.
• gamma: (floatentre 0.01 and 10.0) Indica la corrección gamma que se aplicará al elemento. Sin meternos en historias complicadas, basta saber que valores por debajo de uno (<1) incrementan el contraste, mientras que valores por encima (>1) lo incrementan, y 1.0 (valor default) no hace nada.
• inverse_lightness: (booleano) Como su nombre indica, si es true invierte el valor actual de lightness.
• visibility: (String) admite los valores «on«, «off» o «simplifed«. Los valores «on» y «off» marcan si el elemento será visible o no (como es lógico), mientras que «simplified» lo que hará será mostrar una representación simplificada del elemento (por ejemplo, mostrará menos elementos de ese tipo, o eliminará los labels, etc.).

Una vez hemos visto la teoría, vamos a ver ahora cómo se aplica esto en código Javascript, y a comprobar cómo es mucho más sencillo e intuitivo de lo que parece. Primero, nos definimos un objeto Javascript que almacene el estilo que queremos aplicar:

var my_styles = 
 [ 
	{ stylers: [ { visibility: "off" } ] },

	{ featureType: "water", elementType: "geometry", 
	stylers: 
	  [ 
  	  	{ visibility: "on" },
  	  	{ saturation: 55 }, 
  	  	{ hue: "#0000ff" }, 
  	  	{ lightness: -60 } 
  	   ] 
  	},

	{ featureType: "poi.park", elementType: "geometry", 
	stylers: 
	  [ 
		{ visibility: "on" }, 
		{ saturation: 99 },
		{ lightness: -50 }, 
		{ hue: "#00ff00" }
	   ] 
	},

	{ featureType: "road", elementType: "geometry", 
	stylers: 
	  [ 
		{ hue: "#000000" },
		{ visibility: "on" }, 
		{ saturation: 99 },
		{ lightness: -99 } 
	  ] 
	} 
];

En nuestro minijuego de ejemplo queríamos ocultar la mayor parte de las features visibles en el mapa para aumentar la dificultad de reconocer la ciudad, así que nuestro primer selector es directamente un all (el valor por defecto si no especificamos nada) y un visibility:»off», que hace invisible la totalidad del mapa (un poco extremista). A continuación vamos seleccionando las (pocas) features que sí vamos a mostrar y sólamente a sus elementos geometry (no queremos labels ya que supondrían demasiada pista para este desafío) les vamos asignando unos valores de color, luminosidad e intensidad para que destaquen adecuadamente. En este ejemplo, estas features eran masas de agua (el selector water), parques (que son una subcategoría de points of interest, de ahí el selector poi.parks) y carreteras (el selector road, en el caso de que quisiéramos mostrar solamente las calles de una ciudad serían road.local).

Y en este fragmento de código, aplicamos el estilo a nuestro mapa:

    
 
var styledMapOptions = 
{
name: "¿Reconoces la ciudad?"
};

 var myMapType = 
 new google.maps.StyledMapType(my_styles, styledMapOptions);
  	
map.mapTypes.set(map_id, myMapType);

Y ya hemos customizado el estilo de nuestro primer Google Map! 🙂

Además, no podemos terminar este post sin hablar de este utilísimo Wizard de configuración de estilos (Google Maps API Styled Map Wizard) que los amables ingenieros de Google nos han proporcionado, donde podemos hacer todas las pruebecillas de estilos que nos apetezcan, y cuando estemos satisfechos con el look de nuestro mapa llevarnos los selectores y las opciones en un JSON listo para copy&paste en el código javascript de nuestro mapa! 😛

Etiquetas: google, googlemaps, javascript, json, maps, mashups