Archivo por de la categoria 'GoogleMaps'

El arte de visualizar datos: Mapas

La web sigue generando datos a un gran ritmo, algunos de estos son datos con información geográfica asociada (posición actual, altura, guardar rutas, sitios preferidos, etc.) y con la introducción de los móviles aún más.  Pero los datos en sí no son relevantes, se deben tratar y visualizar para hacerlos útiles a los ciudadanos, entidades y empresas. Aquí empieza toda una reciente tendencia de visualizar sobre un mapa la información extraída de los usuarios (ver Flickr, Foursquares, GoogleMaps,etc.) pero no todas las formas són iguales. Analizaremos la formas disponibles para crear mapas y añadir información útil en ellos.

toilets

Lavabos en SF

Empezamos con la nueva jerga surgida para entender mejor todo el elenco que nos ofrecen los mapas interactivos:

  • - SIG es el acrónimo de Sistema de Información Geográfica, software diseñado para capturar, almacenar, manipular, analizar y visualizar información geográfica referenciada.
  • - Geolocalización conocer nuestra ubicación geográfica en el mundo real  de un objeto (móbil, GPS, punto de acceso, etc.).
  • - Geocodificación es el proceso de asignar coordenadas geográficas (latitud, longitud, altura, etc.) a puntos del mapa (direcciones, puntos de interés, etc.).
  • - Geoetiquetado proceso de agregar información geográfica en los metadatos de archivos de imágenes, vídeos, sonido, sitios web, etc. que sirva para su georeferenciación.
  • - Base de datos espacial es un sistema de base de datos que maneja datos existentes en un espacio o datos espaciales.
  • - GeoRSS es un conjunto de estándares para representar información geográfica mediante el uso de capas y está construido dentro de la familia de estándares RSS.
  • - Información Geográfica Voluntaria o Participativa es crear, reunir y difundir información geográfica proporcionada voluntariamente por personas.

Representación de Datos Geográficos:

  • - GML (Geography Markup LanguageLenguaje de Marcado Geográfico). Permite el modelaje, transporte y almacenamiento de información geográfica a partir de XML.
  • - KML (Keyhole Markup Language) permite guardar información geográfica en 3 dimensiones.
  • - WMS es un servicio de creación de mapas de forma dinámica a partir de información geográfica que devuelve mapas en formato de imagen (.JPEG, .PNG, .SVG, etc.). Al ser un servicio, la propia URL de solicitud del mapa define qué información debe ser mostrada en el mapa, qué porción de la tierra debe dibujar, el sistema de coordenadas de referencia, y la anchura y la altura de la imagen de salida.
  • - Otros formatos: SVF (Simple Vector Format) , DWF (Drawing Web Format), SWF (ShockWave Flash), PGML (Precision Graphics Markup Language), VML (Vector Markup Language) y  HGML (Hyper Graphics Markup Language).

Programas SIG:

Existen muchos programas en éste ámbito (consultar tabla en Wikipedia) que se pueden instalar en un ordenador y crear mapas.

Aplicaciónes Web:

  • Google Maps: Aplicación de mapas de Google que ofrece mapas desplazables, fotos de satélite, servicios, imágenes a pie de calle.
  • Bing Maps:  plataforma de asignación de geoespaciales producida por Microsoft.
  • Via Michelin: Ofrece servicio de cartografía, itinerarios, hoteles, restaurantes, información del tráfico, turismo, etc.

Proyectos de código abierto

  • OpenLayers: biblioteca de JavaScript para mostrar mapas interactivos en los navegadores web. OpenLayers ofrece un API para acceder a diferentes fuentes de información cartográfica en la red: Web Map Services, mapas comerciales, Web Features Services, distintos formatos vectoriales, etc.
  • GeoServer: servidor sobre Java que permite compartir y editar datos geoespaciales y publicar sobre estándares abiertos.
  • OpenStreetMap: es un proyecto colaborativo para crear mapas libres y editables. Su base de datos, se distribuye bajo licencia CC.

Mapeando Datos Abiertos:

Una de las principales ventajas de los mapas es su fácil interpretación y gran valor añadido y esto se ha visto de forma evidente con la gran proliferación de aplicaciones y páginas webs que usan los datos abiertos disponibles para insertarlos sobre un mapa. En cualquier móbil inteligente existen multitud de ‘apps‘ que usan mapas cómo parte principal de la información, ejemplos muy claros són las aplicaciones y webs de ayuda a la conducción (tanto en tiempo real cómo TomTom, cómo la creación de rutas como Via Michelin) o de localización de diferentes temas de interés: sucursales de bancos, tiendas de ropa, paradas de autobus cercanas, etc.

Así ahora podemos visualizar sobre un mapa todo tipo de información y grácias a las políticas de gobierno abierto y datos abiertos que están empezando a surgir en todo el mundo, se dispone de información que antes era ‘secreta’ o exclusiva de las Administraciones Públicas lo que nos lleva a un nuevo concepto de visualización de info sobre mapas. Los proyectos innovadores en éste campo permiten hacer cosas cómo:

sf_crimespotting

Mapa San Francisco Crimespotting

ny_bike

Mapa New York Bike Sharing

wikicrimes

Mapa Wikicrimes con un 'heatmap' en Brasil

Los tres ejemplos anteriores son ejemplos reales de diferentes soluciones para mostrar información en el mapa por parte de diversos ayuntamientos cómo San Francisco y Nueva York o un gobierno cómo Brasil. No existe una tipologia de mapas estandard y cada uno debe escojer como representará los datos sobre el mapa.

Los tipos mas frequentes són:

  • Iconos georeferenciados
  • HeatMaps

Calidad de los mapas:

Uno de los aspectos más relevantes es la calidad del mapa en sí (representación fidel de la realidad, actualización, nivel de zoom disponible, número de información disponible (altitud, carreteras, edificios), etc). Los diferentes servicios anteriomente mencionados disponen de diferentes calidades y formatos.  Otro de los aspectos más relevantes es la representación de la información sobre el mapa, ésta debe ser clara y entendible, para esto veremos diferentes tipos de mapas para analizar su calidad.

Aquí unos ejemplos de mapas:

mapa solar

Mapa 1 - Buena visualización con 'heatmap': datos claros. Mala interacción: imposibilidad hacer zoom o seleccionar zonas

Seguir leyendo »

Comments Off

Empezando con GoogleMaps 3

Mapas, iconos, geolocalización, eventos, API3…

Después de ver la ‘Introducción a la nueva API 3 de GoogleMaps‘ podemos empezar ha trastear y crear funcionalidades a nuestro mapa básico. Para esto, crearemos primero un archivo .HTML donde defiremos el aspecto de la página y incluiremos los códigos necesarios para empezar:

map.html
1 <html>
2 <head>
3 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true“></script>
4 <script type=”text/javascript” src=”http://tupagina.com/map_functions.js“></script>
5 </head>
6 <body onLoad=”inicialize();”>
7 <div id=”map“></div>
8 </body>
9 </html>

Éste es el código de una página HTML muy simple que mostrará nuestro mapa. Pero incluso en los ejemplos más básicos, debemos tener en cuenta algunas partes, estas resaltadas en negrita:

  1. Debemos incluir GoogleMaps en nuestra pàgina mediante su API. Esto se realiza con con JavaScript en la línea 3. El parámetro ‘sensor=true/false’ para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario.
  2. Las funcionalidades de nuestro mapa, incluidos en un único archivo .js, línea 4 (se ha separado para facilitar la lectura).
  3. Iniciar las una función llamada ‘inicialize()’ al cargar la página. En nuestro caso esta función se encuentra especificada en ‘map_functions.js’
  4. Un contenedor para el mapa. En este caso llamado ‘map’, línea 7.

Con esto nos falta definir las funcionalidades de nuestro mapa, que guardaremos en el archivo ‘map_functions.js‘. Empezaremos por crear un mapa e insertarlo en nuestro contenedor ‘map‘:

map_function.js
1 function initialize() {
2 geocoder = new google.maps.Geocoder();
3 var latlng = new google.maps.LatLng(-35.397, 150.644);
4 var myOptions = {
5 zoom: 14,
6 center: latlng,
7 mapTypeId: google.maps.MapTypeId.ROADMAP,
8 mapTypeControl: false
9 };
10 map = new google.maps.Map(document.getElementById(“map”), myOptions);
11 }

En éste fichero se crea el objeto del mapa (línea 11) en el elemento con ‘id‘ especificado y las opciones definidas en la variable ‘myOptions’. En este caso hemos definido el zoom (1 és el menor zoom y 21 el máximo) a nivel de ciudad, centrado en la latitud y longitud especificada en la variable ‘latlng’. Esta variable se crea con un objeto LatLng, definiendo un punto en el mapa.

Además se puede definir el tipo de mapa y muchas otras opciones (consultar el tutorial oficial de Google):

  • RoadMap, capa que muestra las calles.
  • Satellite, capa que muestra imagen por satelite.
  • Hybrid, capa entre Roadmap y Satellite.
  • Terrain, capa que muestra un mapa físico.

Éste seria el resultado del código:

google maps 3 tutorial - 1

Ahora añadiremos funcionalidades extras a nuestro mapa. GoogleMaps permite añadir eventos en los objetos del mapa (por ejemplo, al pulsar sobre el mapa, sobre un icono del mapa, etc.). Vamos pues a añadir iconos al pulsar sobre el mapa añadiendo las siguientes líneas en nuestra función ‘inicialize()‘:

inicialize()
1 google.maps.event.addListener(map, “click”, function(event) {
2 marker = new google.maps.Marker({
3 position: event.latLng,
4 map: map
5 });
6 });

Con este codigo se crea una respuesta siempre que el evento ‘click‘ sea activado sobre el objeto ‘map‘. En este caso se crea un icono (marker) en el punto especificado por el click que recoge el código ‘event.latLng‘.

En este momento tenemos un mapa geoposicionado en un sitio estático, con un zoom establecido y con la posibilidad de crear iconos al pulsar sobre el mapa. Però seguramente querramos que cada usuario pueda ver su própio mapa dependiendo de donde se encuentren, es decir, geoposicionar el mapa segun la ubicación del usuario. Para hacer esto no hace falta que reinventamos la rueda, ya hay soluciones creadas. Primero comprobaremos si el navegador usado por el usuario soporta la geolocalización (empezando con el método estándard de W3C, sinó con GoogleGears). Si es así, necesitaremos la confirmación del usuario para compartir su ubicación con la aplicación (imagen inferior).

compartir ubicacion googlemaps 3

Mensaje de confirmación por parte del usuario para compartir la ubicacion googleMaps 3 en Firefox.

Si su navegador no lo soporta, lo mostraremos por pantalla avisando al usuario y lo dirigiremos a un sitio predefinido. Lo haremos con el siguiente código:

inicialize()
1 // Probar Geoposicionamiento
2 if(navigator.geolocation) {
3 browserSupportFlag = true;
4 navigator.geolocation.getCurrentPosition(function(position) {
5 initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
6 map.setCenter(initialLocation);
7 }, function() {
8 handleNoGeolocation(browserSupportFlag);
9 });
10 // Try Google Gears Geolocation
11 } else if (google.gears) {
12 browserSupportFlag = true;
13 var geo = google.gears.factory.create(‘beta.geolocation’);
14 geo.getCurrentPosition(function(position) {
15 initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
16 map.setCenter(initialLocation);
17

}, function() {

18 });
19 // Browser doesn’t support Geolocation
20 } else {
21 browserSupportFlag = false;
22 handleNoGeolocation(browserSupportFlag);
23 }
24
25 function handleNoGeolocation(errorFlag) {
26 if (errorFlag == true) {
27 alert(“Geolocation service failed.”);
28 initialLocation = newyork;
29 } else {
30 alert(“Your browser doesn’t support geolocation. We’ve placed you in Siberia.”);
31 initialLocation = siberia;
32 }
33 map.setCenter(initialLocation);
34 }}

Aún que el código sea largo, es senzillo de seguir. Primero probamos si el navegador soporta geoposicionamiento (línea 2), si es así extraemos la latitud y longitud con ‘getCurrentPosition‘ y centramos el mapa a ese punto con ‘setCenter‘. Sinó probamos con GoogleGears de la misma forma. Si ninguno de los dos es soportado, lanzamos la funcion ‘handleNOGeolocation()’ que se encargará de avisar al usuario y establecer el mapa dónde querramos. El resultado final es (el zoom se ha variado por motivos de privacidad):

geolocalizacion

Y hasta aquí todo, a partir de aquí podeis leer más documentación en la página oficial de Google.

En la siguiente entrega, crearemos las funciones necesarias para guardar los puntos definidos por los usuarios y cargarlos al iniciar. De esta forma, cada usuario dispondrá de un mapa geoposicionado en su ubicación actual y de sus iconos y los de otros usuarios. Para hacer esto, guardaremos cada punto en un archivo y cargamos todos los puntos del mapa al inicarlo. También mostraremos  como crear diferentes tipos de iconos para señalar diferentes tipos de puntos en el mapa (por ejemplo bares, restaurantes, hoteles…) y definir iconos para cada tipo distinto, entre otras más cosas.

Comments Off

Introducción a la API 3 de GoogleMaps

Abr 08 2011 Autor: J.P Aulet under API's,General,GoogleMaps

Con este senzillo ejemplo, podemos crear en nuestra pàgina web un mapa de GoogleMaps con la nueva versión de la API (version 3). Podemos ver la diferencia entre los dos tipos de mapa en la siguiente imagen:

google maps
La imagen de la izquierda corresponde a la API 2 y la derecha con API3. Nótese el cambio de la barra de zoom y navegación (más elegante en la version 3) y la aparición del ‘muñeco’ que permite canviar a StreetView en la nueva versión.

Para construir este mapa debemos seguir sólo 3 pasos:

Paso 1: Declaración de la nueva libreria de googleMaps:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Paso 2: Declaración del mapa y sus opciones dentro de un script ‘javascript‘ (antes de la etiqueta </header>):

<script type="text/javascript">
function initialize()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // Tipo de mapa (ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>

Paso 3: Emplazamos el mapa en la pàgina web y creamos la execución del codigo 2 al inicializar la pàgina:

<body onload="initialize()">
  <div id="map" style="width:100%; height:100%"></div>
</body>
</html>

Esto es todo.
Esperabas más? Con este senzillo codigo tendremos un mapa con la nueva versión de GoogleMaps en nuestra página. Lógicamente podemos añadir opciones, funciones y otros parámetros en el mapa, pero lo dejamos para otros artículos más especializados.

Comments Off

Novedades en Google Street View

Mar 30 2011 Autor: J.P Aulet under Google,GoogleMaps,Lugares

google street view

Google Street View incorpora nuevas vistas en sitios de interés declarados por la UNESCO de Italia. Entre ellos, podemos encontrar el Coliseo, La Basilica de Santa Maria de Florencia, el Anfiteatro de Pompeia, Monte Palatino, Vía Apia y un largo etc. Tambien incorpora el castillo de Fontainebleau (Château d’Fontainebleau) en Francia. Podeis verlos pulsando sobre los enlaces siguientes:

- ColiseoBasilica Santa MariaAnfiteatro de PompeiaMonte Palatino - Vía Apia Castillo Fontainebleu
Via: Google Lat Long

Comments Off