Estamos experimentando la edad de oro de los sitios web basados en mapas, si por aquél lejano 2005 Google Maps nos deslumbró con la socialización de los mapas. Hoy las aplicaciones y las páginas web que hacen uso de los mapas son innumerables.
Aunque el decano a nivel de código en javascript es OpenLayers, vamos a decantarnos por una librería que está causando sensación. Se trata de leaflet, la cual ha experimentado un gran desarrollo en los últimos tiempos, y que en mi opinión, es algo más sencilla de programar. De hecho es una librería versátil, ya que podemos crear mapas con tres líneas de código o complicados mapas interactivos con cientos de líneas que pueden dejar a más de uno con la boca abierta.
Intentaremos decantarnos por la primera ... bueno el futuro es incierto, digamos que empezaremos por la primera opción, un mapa con tres o más líneas, y luego ya veremos a donde llegamos...
Para poder realizar nuestro mapa, necesitaremos un editor texto o un programa especial para escritura de código como puede ser notepad++ , Atom o si nos va la marcha, sublime Text.
Lo primero que debemos hacer es incluir dos referencias en nuestro código. Una referencia a la librería Leaflet-"versión".js y otra al fichero de estilos en cascada CSS de la misma versión que el anterior. Estos dos archivos uno con extensión js y otro con extensión css son el ingrediente básico necesario para poder empezar nuestro mapa, estas referencias se pueden encontrar en la página de leaflet, donde podemos comprobar cuál es la última versión así como ejemplos y plugins con los que ensalzar nuestro mapa.
Para que todo funcione podemos utilizar referencias que ya están alojadas en Internet, o si queremos trabajar a nivel local, descargarnos los archivos y establecemos los enlaces en nuestro ordenador local. Nos vamos a decantar por la primera opción por motivos de sencillez.
Paso 1.- Establecemos las referencias a la librería javascript de Leaflet y al fichero de estilos CSS:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Mi primer mapa Leaflet</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body></body> </html>
Paso 2.- Creamos un contenedor para nuestro mapa:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>MAP</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <div id="map" style="width: 900px; height: 600px;"> </div> </body> </html> |
Paso 3.- El objeto mapa:
El siguiente paso consiste en crear un objeto mapa que asociamos al Div creado en el paso 2. A este objeto se le asigna el id del DIV que contendrá el mapa, en nuestro caso, será el id="map". Después se pueden configurar una serie de opciones, la más importante es decirle al objeto donde va a residir su centro y el nivel de zoom que va tener nuestro mapa. Para ello utilizamos la opción SetView que recibe dos parámetros:- Las coordenadas del centro de la vista, mediante un array con dos coordenadas: Latitud y longitud en el sistema de referencia WGS84 PseudoMercator, para nuestro caso optaremos por las coordenadas de la puerta del Sol [40.4168,-3.7035]
- El nivel de zoom que deseamos en este caso un nivel de zoom de 10.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Mi primer mapa Leaflet</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <h1>Ejemplo de mapa con la librería javascript Leaflet</h1> <div id="map" style="width: 900px; height: 600px;"> </div> <script> var map = new L.map('map'); map.setView([40.4168,-3.7035],10); </script> </body> </html> |
En estos momentos si intentamos visualizar nuestra página web, el espacio reservado para nuestro mapa aparecerá de la siguiente forma:
Evidentemente no se ve ningún mapa, esto es así, porque falta un paso, el más importante. Hasta ahora hemos configurado el espacio y las características necesarias para mostrar nuestro mapa. Pero no hemos indicado que tipo de capa base vamos a utilizar. Para poder visualizar un mapa necesitamos agregar como último paso una capa de cartografía. En términos anglosajones un Tile Layer o capa de teselas.
Paso 4.- La capa de mapas:
Los servicios de mapas en su mayoría sirven imágenes teseladas, es decir, dividen las imágenes en una cuadrícula de imágenes de tamaño menor, lo que permite optimizar los rendimientos y agilizar la visualización del mapa. A parte de utilizar técnicas de precarga de zonas adyacentes, que mejoran la experiencia del usuario.
Normalmente los servidores de imágenes teseladas ofrecen teselas de 256 píxeles x 256 píxeles, para poder utilizar un servicio de este tipo y ver nuestro mapa, se debe configurar una URL de petición del tipo: ... {z}/{x}/{y}.png. De esta forma le decimos al servidor que nos devuelva la imagen de nuestra posición actual. Leaflet incluye por defecto controles de zoom y desplazamiento ya configurados, por lo que, una vez establecida la URL , la librería se encargará automáticamente de pedir las imágenes necesarias cuando nos movamos por el mapa o cambiemos de zoom.
Para nuestro primer ejemplo vamos añadir una capa de OpenStreetMap, el mapa libre del mundo. Para ello debemos utilizar la siguiente URL: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'. Como véis, para añadir la capa de mapas necesitamos crearla y luego añadirla al objeto map creado en la paso 3.
La creación de la capa de mapas se hace con la función TileLayer de la factoría de funciones L de leaflet. La cual ya utilizamos en el paso 3 para crear el objeto mapa, en el paso 3, creamos un objeto mapa de la forma L.map("id del div"), ahora crearemos la capa de mapas con L.TileLayer. A esta función debemos pasar un primer parámetro con la URL del servicio de mapas, alternativamente se le pueden añadir opciones. Nosotros vamos a añadir la opción de la atribución, para indicar que el servicio que estamos utilizando de mapas es OpenStreetMap.
El código quedarías así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Mi primer mapa Leaflet</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <h1>Ejemplo de mapa con la librería javascript Leaflet</h1> <div id="map" style="width: 900px; height: 600px;"> </div> <script> var map = new L.map('map'); map.setView([40.4168,-3.7035],10); // Añadimos una capa de mapas OpenStreetMap L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </body> </html> |
La última parte del código añade la capa de mapas al objeto mapa. Se puede ver más claramente desglosado en el siguiente detalle del código:
1 2 3 4 5 6 7 8 | <script> L.tileLayer ( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //URL de OpemStreetMap {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'} //Atribución a OpenStreetMap ) .addTo(map); //añádimos la capa de mapas al objeto mapa </script> |
Con esto tendríamos terminado nuestro fichero html, que podríamos ver en cualquier navegador web. Aparecerá nuestro mapa, centrado en Madrid y por el cual podemos movernos y cambiar de Zoom.
 |
| Imagen de mi primer mapa Leaflet |
Esta ha sido la primera aproximación, espero que sencilla, en la siguiente entrega veremos como añadir más capas de mapas de otros proveedores de mapas y servicios. En el siguiente enlace podéis ver el ejemplo que hemos descrito en este artículo.
No hay comentarios:
Publicar un comentario
Comenta lo que quieras