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

¡Cuidado! – Geotagging

Ago 11 2011 Autor: J.P Aulet under Fotografía,General,Geolocalización

Geotagging en Flickr

Geotagging en Flickr

¿Qué es el geotagging o etiquetaje geolocalizado?

Geotagging es el proceso de adición de identificación geográfica de las fotografías, vídeos, mensajes SMS y por extensión cualquier dato en Internet. Es el equivalente a añadir coordenadas de 10 dígitos a todo lo que se publica. La mayor parte de servicios y plataformas empiezan a usar este servicio para posicionar sus usuarios sobre un mapa y dar valor añadido a sus publicaciones (por ejemplo Twitter permite geoposicionar tus ‘tweets’, Flickr las fotografías  y Foursquare geoposiciona los usuarios sobre un mapa). Esta nueva tendéncia está creciendo muy rapido grácias a los avances en la tecnología y sobre todo con la integración de sensores GPS en cámaras digitales de consumo y móbiles de última generación. Así, estos productos incrustan automáticamente en las imágenes tomadas (y por extensión vídeos, artículos…), muchas veces sin el consentimiento / conocimiento del usuario que desconoce que las  imagenes capturadas y colgadas en Internet han sido georeferenciadas.

Usos y buenas prácticas

Cómo siempre las tecnologías en sí NO son malvadas, pero sí que pueden usarse para éstos fines. Para evitarlo, lo mejor es el conocimiento, y para empezar lo haremos con un ejemplo. El siguiente artículo fue publicado en la revista ‘Wired‘ en el año 2009 (para consultarlo clica aquí):

“Hice un pequeño experimento. En un soleado sábado, vi a una mujer en el Golden Gate Park de SF tomar una foto con un iPhone 3G. Como iPhone añade datos geolocalizados a las fotos cuando los usuarios los suben a servicios cómo Flickr o Picasa, éstas fotos pueden situarse automáticamente en el mapa. Una vez en casa busqué en el Flickr las fotos hechas en ése punto según el horario. Pronto encontré la foto de la chica y configurando la aplicación para mostrar sólo sus fotos en el mapa, aparecieron muchas centradas en el mismo lugar. Al hacer clic en ellas, reveló fotos del interior de un apartamento, un dormitorio, una cocina y una sala de estar. Ya sabía dónde vivia.”

Esto es sólo un ejemplo / experimento, pero se observa el peligro potencial que supone. Solo hace falta repasar los consejos básicos de la policía (y de sentido común) que recomiendan no publicitar en redes sociales, por ejemplo, los periodos de vacaciones o la dirección de tu casa. Éstas afirmaciones que para la mayoría son obvias y cumplen a rajatabla pueden verse afectados por el geotagging. Puede que no digas que vas de vacaciones, pero, ¿que pasa si subes una foto geoposicionada con Fecha / Lugar en Flickr? o una foto de tu mascota en tu hogar?. El resultado es el mismo, pero mucha gente no se habrá dado ni cuenta que está mostrando igual o más información que al decirlo en una red social. Pero existen más peligros y más graves, uno de ellos se le planteo al ejército de EEUU que por motivos obvios de seguridad, prohibió a sus soldados desplazados en misiones en el extrangero (Afganistan y Irak principalmente) subir sus fotos en las diferentes redes sociales para evitar revelar su posición y evitar ataques.

Camara con GPS
Camara con GPS integrado para geotagging

Como las historias anteriores indican, la intimidad y la seguridad han cambiado mucho con los avances en la tecnología. Pero por si ésto fuera poco, me quedé helado al descubrir la siguiente noticia (también de la revista Wired):

“Así es cómo los espías de EE.UU. te encuentran a través de tus fotos”

Si amigos, el ejercito de EUA, mediante su agencia de intelgencia IARPA desarrolló en secreto un sistema llamado ‘FINDER‘ para geolocalizar personas sólo con el fondo de las fotografias dónde aparecen. Así una fotografía podía ser geoposicionada sin más datos que su própio contenido visual.  Ésto les podía servir de ayuda para localizar talibanes con las fotos / vídeos que disponían, però cómo el lector se habrá dado cuenta, el potencial es mucho mayor.

Con esta tecnología se podría averiguar donde se encuentra una persona mediante sus fotos, y se le añadimos a ésto toda la información que se puede obtener de redes sociales (hoy se ha hecho publico que Google dio información de usuarios a organismos oficiales estadounidense), perfiles públicos, datos móviles, de tarjetas de crédito, etc. da una idea de el control que pueden tener éstos organismos. No es una novedad esta relación entre el Estado y las empresas de servicios de Internet (recordemos Francia y EEUU y sus campañas antipiratería ‘promocionadas’ por compañías de acceso a Internet, ISP) o la más reciente de los disturbios en Londres y la consiguiente actuación de la policía sobre redes sociales.

Veamos un ejemplo de éste sistema extraído del anterior artículo que ilustra perfectamente esta tecnología:

Afghans of Day

Con todo esto, debemos vigilar lo que publicamos a Internet, ya sea un comentario, información o una simple fotografía. Podemos tomar precauciones como desactivar las opciones de geolocalización de nuestros dispositivos si no queremos dar dicha información y dar sólo la información básica que daríamos a un desconocido ya que uno de los problemas de Internet es la ‘imortalidad’ de los datos publicados, la llamada ‘memoria digital’.

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