Leaflet – Crea mapas de manera sencilla

Varias son las opciones a la hora de insertar un mapa en nuestras aplicaciones web. Podríamos optar por incluir un mapa de Google Maps o Bing Maps (una buena opción si el mapa es estático o con funcionalidades básicas) o bien podríamos utilizar librerías especializadas en la creación de mapas dinámicos por ejemplo OpenLayers o Leaflet.

Esta última se trata de una librería Javascript desarrollada por Vladimir Agafonkin. Leaflet tiene varias virtudes que la convierten en una opción recomendable a la hora de crear mapas dinámicos para nuestras aplicaciones web:

Sencillez: Con poquitas líneas de código podremos tener nuestro mapa ya funcionando.

Escalabilidad: Gracias a su modularidad podremos empezar un proyecto con unas funcionalidades básicas que podrán ir aumentando a la par que tu proyecto vaya creciendo. Una librería inicial de poco más de 30KB a la iremos añadiendo tantos plugins como necesitemos.

Versatilidad: Pensada para utilizarse indistintamente en aplicaciones web ejecutadas en ordenadores comunes y dispositivos móviles.

Vamos a crear un mapa de ejemplo con la librería:

1º Importar la librería y sus estilos (dentro de las etiquetas <head> de nuestro HTML):

<script src=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js”></script>

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css”  />

2º Entre las etiquetas <body> vamos a insertar el código javascript necesario para crear el mapa:


var map = L.map('map').setView([43.2980 , -1.9887], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

3º Insertamos un marcador y un polígono regular al que le hemos indicado sus coordenadas:


L.marker([43.2980 , -1.9887]).addTo(map)
.bindPopup('Ejemplo de un popup. &lt;br&gt; Hola San Sebastián!')
.openPopup();

var polygon = L.polygon([
[43.30295, -1.95282],
[43.30232, -1.93068],
[43.2932, -1.93153],
[43.2937, -1.95282]
]).addTo(map)
.bindPopup('Ejemplo de un polígono');

Como vemos, el mapa base está formado por imágenes de OpenStreetMap, aunque podríamos cambiar el proveedor añadiendo nuevos plugins (por ejemplo Google Maps). Luego hemos creado un marker y un polígono en base a sus vértices.

Para seguir profundizando sobre la librería os recomiendo echar un vistazo a su API y sus plugins. Entre ellos podréis encontrar algunos tan curiosos como dbpediaLayer, un plugins que te permitirá añadir en el mapa marcadores correspondientes a artículos georreferenciados de la Wikipedia.

Tratamiento de imágenes con canvas (HTML5)

HTML5 es la quinta versión del lenguaje de etiquetado de la World Wide Web. En esta versión se incluyen novedades en cuanto al tipo de etiquetas que posee, como <audio> o <video> .

Una de las novedades es la etiquetas <canvas> con la que podremos renderizar formas 2D e imágenes de mapas de bits.

Dicho elemento Canvas manejado desde Javascript nos abre multitud de posibilidades a la hora de representar imágenes en una aplicación web.

Por ejemplo podemos probar su potencia y además aprender tres formas diferentes de pasar una imagen en color a escala de grises:



¿Qué acaba de suceder?

Dada una imagen hemos creado un “lienzo” (etiqueta <canvas>…</canvas>) en donde hemos ido volcando los diferentes resultados de tratar la imagen píxel a píxel.

Hemos utilizado tres formas diferentes para representar una imagen en escala de grises. El primer botón (Luminosity) corresponde a tratar la matriz RGB de la imagen en color con la siguiente fórmula:

 valorBN = 0.21 R + 0.71 G + 0.07 B

El segundo botón (Ligthness) corresponde a:

valorBN = (max(R, G, B) + min(R, G, B)) / 2

Y el tercer método (Average) no es más que la media aritmética del RGB de cada píxel (corresponde al tercer botón).

Por último he realizado un threshold (función umbral). Un método muy útil en los procedimientos de visión artificial.

 

¿Qué es GIS?

Las siglas GIS se refieren a Geographic Information System, o lo que es lo mismo: Sistemas de Información Geográfica (SIG) en castellano.

Se trata, como bien dice la Wikipedia,  de:

Un sistema que integra hardware, software y datos geográficos diseñado para capturar, almacenar, manipular, analizar y desplegar en todas sus formas la información geográficamente referenciada con el fin de resolver problemas complejos de planificación y gestión geográfica.

Simplificando al máximo la definición, un sistema GIS/SIG es un conjunto de herramientas que ayudan a recoger y/o procesar información georreferenciada.

OpenStreetMap

Los usos más comunes de este tipo de herramientas son para optimizar la gestión de recursos dispersos geográficamente (organizar flotas de camiones, logística, redes de agua o gas, mobiliario urbano, catastro…). Pero a día de hoy toda la información tiende a estar geolocalizada por lo que encontraremos aplicaciones tan dispares como el geomarketing (aplicado por ejemplo al estudio de ubicación de nuevos negocios) o la agricultura de precisión.

Con la revolución de los dispositivos móviles el GIS/SIG está más al alza que nunca y para muestra están nuestros navegadores GPS o los servicios de mapas tipo Google Maps u OpenStreetMap y demás aplicaciones derivadas que cada día van incrementando en funcionalidades y nos facilitan calcular tiempos y costes en nuestros desplazamientos, nos encuentran los restaurantes más cercanos o incluso lanzan avisos en situaciones de emergencia.

¡Larga vida al mapa!

¿Qué es la visión artificial?

En mi primera búsqueda de empleo, nada más terminar la carrera, comencé a echar CV en empresas de Gipuzkoa y Cantabria a la espera de conseguir alguna entrevista.

La primera de todas las entrevistas fue en INVAR (Ingeniería y Visión Artificial) donde días antes había dado mi CV en mano. Antes de asistir a la entrevista me leí algo de información acerca del campo y aun así fui con muchas dudas acerca de lo que era la visión artificial.

Esta semana se han cumplido dos años de mi primer día de trabajo en INVAR y a pesar que ahora vivo en Donosti, raro es el mes que no tengo comunicación con Javi (Director de INVAR).

Aprovecharé este aniversario para explicar brevemente en qué consiste la visión artificial:

Según la definición de la Wikipedia:

Es un subcampo de la inteligencia artificial. El propósito de la visión artificial es programar un computador para que “entienda” una escena o las características de una imagen.

Es decir,  es un campo que nos permite el análisis y proceso de imágenes para extraer información relevante de ellas.

Los usos son infinitos, pero los más comunes vienen de la mano de la industria:

– Procesos de calidad: Nos permitiría reconocer defectos en objetos a unas escalas imperceptibles para el ojo humano.

– Reconocimiento de patrones: Los usos son múltiples, desde conteo de piezas hasta determinación de coordenadas para guiados de robots.

Pero más allá de la industria también hay campos que entran en el terreno de la visión artificial. Un ejemplo claro es el el reconocimiento facial, de matrículas o de señales de tráfico o el conteo de coches para monitorizar el tráfico, aplicaciones en las que me vi metido de lleno al poco de entrar en INVAR.

Actualmente nos encontramos ejemplos de productos basados en visión artificial en casi cualquier ámbito. En nuestro día a día nos monitorizan en escaparates de centros comerciales, nuestro coche empieza a reconocer señales a su alrededor (algunos incluso detectan si te estás durmiendo!), nuestro móvil reconoce nuestras huellas dactilares, Facebook nos ayuda a etiquetar a amigos mediante reconocimiento facial o simplemente se aplican algoritmos de visión artificial cuando jugamos a la Kinect.

Es previsible que en los próximos años se sigan generando multitud de productos que apliquen dichos algoritmos a nuestro día a día ampliando cada vez más el abanico de posibilidades que nos da la visión artificial.