Desarrollo web

Google Heat Maps: Añada color en sus mapas de Google

Google Heat Maps
Hacía tiempo que venía observando webs 2.0 ( pejm: http://www.trulia.com/home_prices/ ) que utilizaban Heat Maps para mostrar de una manera muy sencilla y clara información geográfica. Cuando revisé el Api de Google para ver cómo se podía conseguir este efecto, me llamó la atención que no estaba soportado de manera nativa y que era necesario realizarlo de una manera más o menos artesanal.

El código

En la siguiente página he preparado un ejemplo donde he destacado algunos países europeos con colores elegidos al azar.

Cómo se crea una silueta

Para mostrar líneas y polígonos en los mapas se utiliza VML (Vector Markup Language), recuerde incluir  el VML namespace al comienzo de su documento: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> La clase GPolygon del API de Google Maps ofrece funciones para dibujar polígonos en el mapa. Para nuestro ejemplo he creado la función createPolygon que permite dibujar una silueta vectorial en el mapa pasando tres parámetos:
  1. pts_map: Codificación de las coordenadas de los puntos que conforman el polígono.
  2. lvls_map: Codificación de los niveles que conforman el polígono.
  3. num: Valor entre 1 y 6, cada valor tiene  un color para la silueta.

Cómo obtener los valores de la silueta

A fecha de hoy no conozco ninguna herramienta que permita obtener de manera automática estos valores por lo que es necesario recurrir a un método un tanto artesanal:
  1. Acceda a la sección Mis Mapas en http://maps.google.es/ y haga click en la opción Crear un mapa nuevo.
  2. Ahora viene el trabajo más tedioso, en la zona superior del mapa encontrará un icono para dibujar formas, selecciónelo y comience a pintar los puntos que delimitan la región sobre la que quiere trabajar. Recuerde que cuanto mayor sea el zoom, mejor será la calidad del Heat Map.
  3. Cuando haya terminado haga doble click y elija un nombre para guardar el polígono.
  4. En la esquina superior derecha encontrará la opción Enlazar a esta página, copie esta url en su navegador.
  5. En la nueva página, busque dentro del código HTML el nombre que le dio a su polígono hasta encontrar una cadena similar a esta: name:"Forma 1",description:"",polylines:[{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@",levels:"BBBBB"
  6. Por tanto la codificación de las coordenadas de nuestro polígono sería: [{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@ y la codificación de los niveles: BBBBB
  7. El código javascript correspondiente sería: createPolygon("ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@","BBBBB",5)

Algunas observaciones

Debe tener en cuenta que los Heat Maps consumen bastante resursos de su sistema, un mapa con muchos polígonos o con formas muy complejas pueden sobrecargar el navagador y hacer la página inmanejable. Puede personalizar el estilo de sus Heats Maps con algunos parámetros como el color, la opacidad, el borde, el relleno, etc. Para ello utilice la función fromEncoded(color?, weight?, opacity?, points, zoomFactor, levels, numLevels) Puede descargarse el código de ejemplo y utilizarlo líbremente en sus aplicaciones. Por último recuerde que para poder utilizar el API de Google Maps en sus aplicaciones es necesario que solicite su Key en la sección sign up for an API key.
Compártelo: technorati Google Heat Maps: Añada color en sus mapas de Google delicious Google Heat Maps: Añada color en sus mapas de Google digg Google Heat Maps: Añada color en sus mapas de Google facebook Google Heat Maps: Añada color en sus mapas de Google yahoo Google Heat Maps: Añada color en sus mapas de Google google Google Heat Maps: Añada color en sus mapas de Google linkedin Google Heat Maps: Añada color en sus mapas de Google twitter Google Heat Maps: Añada color en sus mapas de Google es meneame Google Heat Maps: Añada color en sus mapas de Google es fresqui Google Heat Maps: Añada color en sus mapas de Google es blogmemes Google Heat Maps: Añada color en sus mapas de Google

Enviar a un amigo Enviar a un amigo

Artículos relacionados:

  1. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página
  2. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
  3. Un emulador de ZX Spectrum en Javascript
  4. Ajax Lightbox: Una ventana emergente 2.0 en su página web
  5. Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario

Si te ha gustado este artículo y te ha sido de utilidad, Haz una Donación y colobora en el mantenimiento de esta blog.

Cada artículo está escrito con esfuerzo y dedicación, ayúdame a seguir ayudándote.

Comentarios

10 comentarios para “Google Heat Maps: Añada color en sus mapas de Google”

  1. Muy interesante tu articulo, gracias

    Posted by Nestor | Noviembre 7, 2007, 14:11 | Citar
  2. Muy interesante tu nota

    Posted by Nestor | Noviembre 7, 2007, 14:26 | Citar
  3. muy bueno

    Posted by cesar | Enero 21, 2008, 22:11 | Citar
  4. malo super malo

    Posted by wiilli | Febrero 29, 2008, 16:21 | Citar
  5. Me parece bien, es otra forma de aplicar color al mapa , saludos amigo, y sigue adelante

    Posted by Ferzo | Abril 12, 2008, 06:50 | Citar
  6. Me parece bien, es otra forma de aplicar color al mapa , saludos amigo, y sigue adelante

    Posted by jesus vicente | Septiembre 17, 2008, 00:59 | Citar
  7. me gusta

    Posted by El liMpIaBoTas | Octubre 15, 2008, 08:24 | Citar
  8. estoy muy interazado en optener imagenes satelitales .. con fines pesqueros .. esta muy interezante

    Posted by jorge ortega orellana | Diciembre 11, 2008, 19:49 | Citar
  9. Me interesan muchisimo tus articulos, pero este en particular no lo entendi.
    Para que me sirve un mapa con colores? disculpame la ignorancia.
    Me interesaria tambien poder obtener asesoramientos de desarrollo de posicionamientos.
    saludos

    Posted by andres albert | Junio 1, 2009, 20:36 | Citar
  10. Hola, un mapa de color puede servirte para localizar geográficamente una información, por ejemplo, en mi empresa lo hemos utilizado en alguna ocasión para mostrar en qué países del mundo hay más ordenadores infectados por virus.

    Posted by Ignacio G. | Junio 2, 2009, 19:16 | Citar

Escribir un comentario

Citar el texto seleccionado

Suscríbase a HelloGoogle

Venda su teléfono móvil Viejo y Consiga Dinero

Categorías

Mis últimos Tweets...