Comenzar con Leaflet y el webmapping (I).

Comenzar con Leaflet y el webmapping (I).

Hola a todos, hacía ya mucho tiempo que no publicaba nada, el verano, los cursos, el cambio de servidor y cuestiones personales me han tenido un tanto apartado de lo que ha sido la publicación en el blog. Aunque los que me habéis estado siguiendo habéis visto que han habido algunos cambios  en la web, (que espero hayan sido de vuestro agrado) no he estado parado ni mucho menos, si no que el trabajo que he estado realizando no tiene tanta proyección pública, por decirlo de alguna manera.

Bueno, después de estas excusas, vamos a ya ponernos a trabajar. Webmapping, ¿Qué es esto? Para los que no saben qué es esto del webmapping se lo explico rápidamente, según Wikipedia webmapping es:

The process of designing, implementing, generating and delivering maps on theWorld WideWeb and its product.

(El proceso de diseño, implementación, generación y entrega de mapas en la web y su producto).

Así que el webmapping se podría decir que es crear mapas para ser vistos a través de internet. Para ello tenemos diversas herramientas a nuestro alcance, como tales pueden ser OpenLayers, Postgis, Geoserver, Mapfish, o Leaflet, ésta última es el objeto del post.

Qué hace qué os preguntaréis, pues bien, digamos que grosso modo es lo siguiente:

  • Tenemos información geográfica en una Base de Datos espacial como pueda ser Postgis por ejemplo, información que queremos que se pueda visualizar por muchas personas.
  • Con Geoserver podemos enlazar esa información de Postgis y “servirla” para que otros software puedan entenderla y mostrárnosla.
  • Este software bien podría ser cualquier SIG de escritorio o bien bibliotecas basadas en Javascript que nos puedan hacer ese trabajo, éstas bibliotecas son OpenLayers o Leaflet.

En este caso concreto vamos a ver sólo la última parte, la de visualización con Leaflet concretamente, esto no lo hago por fastidiar, si no porque el servidor en el que estoy no me permite ni instalar Geoserver ni Postgis, (si, creo que debo de mirarme mejor a qué nuevos servidores me cambio la próxima vez, jeje).

Para comenzar ya con Leaflet debo decir que para esto hay que tener ciertos conocimientos de programación web (yo no soy ningún especialista al respecto, sólo un arqueólogo inquieto por estos temas tecnológicos, pero que duda cabe que ciertos conocimientos si que tengo sobre el tema los cuales me permiten desarrollar hasta cierto punto este tema en concreto) por ello aquí dejo un par de enlaces sobre iniciaciones tanto a html, javascript  y css.

Bien, asumiendo que tenemos esos conocimientos previos vamos a comenzar a con Leaflet propiamente dicho. En primer lugar lo que tenemos que hacer es preparar nuestro archivo html donde va a ir el mapa tan estupendo que queremos crear. Para ello tenemos el siguiente código:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8" />
	<title>Pruebas con Leaflet</title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css" />
	 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
  <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
 <![endif]-->
  <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
  <script type="text/javascript" src="js/mapa.js"></script>

</head>

<body class="inicio">

	<div id="mapa" class="map"></div>

</body>
</html>

Vamos a ver ahora qué es cada parte de este pequeño código html que he insertado:

En primer lugar entre las etiquetas <head> he indicado de donde vamos a coger los script y las hojas de estilo.

  • Scripts:
    <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script type="text/javascript" src="js/mapa.js"></script>

Aquí le estamos diciendo al navegador, que es quien debe interpretar el código aquí escrito, que lea scripts de la página oficial de Leaflet (la biblioteca basada en javascript) y de un directorio que hemos creado nosotros y en el que vamos a escribir el código necesario para que se muestre el mapa, con las capas que queramos y con el estilo que vayamos a decidir.

  • Hojas de estilo (css):
    <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

Con estas dos líneas le decimos al navegador que nos “decore” nuestro mapa de acuerdo a estas hojas de estilo, una de ellas se leerá desde la página de Leaflet (al igual que el script) y la otra se leerá desde un directorio propio que es donde le diremos cómo de grande queremos nuestro mapa.

Una vez tenemos esto claro vamos a ver la etiqueta <body>:

<div id="map" class="map"></div>

Un simple div en el cual vamos a situar nuestro objeto de trabajo, el mapa. Bien identificado para que tanto el script y la css puedan saber quienes nos estamos refiriendo cuando queramos que actúen sobre este elemento.

Ahora que tenemos el fichero html claro, vamos a ver el script, donde vamos a escribir el código para representar nuestro mapa.

window.onload = function(){

 var map = L.map('mapa', {

    zoom: 13

}).setView([40.39676, -3.68042],14);

//AQUÍ VOY A PONER TODAS LAS CAPAS

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

     }

Bien, vamos a ver poco a poco qué es lo que he hecho en este pequeño script:

window.onload = function(){

Con esta orden de javascript le estamos diciendo al navegador que cuando cargue la página ejecute la siguiente función:

var map = L.map('mapa', {
     center:[40.39676, -3.68042], 
     zoom: 13
})

Vamos a ver qué estamos diciendo en esta primera parte de la función que vamos a ejecutar:

En primer lugar estamos declarando una variable que le vamos a llamar “map” y le vamos a decir que esa variable map sea un objeto de la librería de Leaflet, en este caso la siguiente clase, la cual nos sirve para crear un mapa en una página y manipularlo. EL primer entrecomillado que encontramos es ‘mapa’, que es donde le decimos a Leaflet que nos ponga el mapa. Luego dentro de los corchetes estarían las opciones y en la documentación encontramos todas las opciones que podemos pasarle a este mapa. En este caso he elegido tan solo dos y es el nivel de zoom que le vamos a dar y el punto central donde se va a situar la vista del mapa.

Ahora vamos a ocuparnos de las capas que vamos a visualizar. en este ejemplo sólo vamos a cargar una capa, la de Open Street Maps (OSM). Vamos a ver cómo se realiza esto:

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

Declaramos una variable llamada osm y le vamos a decir al navegador será una clase d nuestra librería de Leaflet llamada L.tileLayer.  Y que va a “llamar” a la siguiente capa:

http://{s}.tile.osm.org/{z}/{x}/{y}.png

Lo que se encuentra entre las llaves son las opciones que tiene esta clase y que podemos pasarle, en este caso es la opción attribution, que lo que hace es colocar un cuadrito de texto al pie del mapa aportando cierta información al mismo, (notad que soporta lenguaje html).

attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

Finalmente añadimos la capa al mapa con el Method .addTo:

.addTo(map)

Notad que entre paréntesis indico cómo he llamado a la variable que contiene el mapa y sus opciones.

Bien ahora nos queda simplemente ver las dimnesiones del mapa para ello vamos a ver el último fichero a ver, el css:

#map { 

	width: 100%;
	height: 100%;

	background-color: snow;
	position: absolute; 

	border: 1px;
	border-color: black; 

	}

Para el que sabe css este fichero debería ser suficientemente autoexplicatorio, pero para el que no, voy a explicar brevemente qué le estamos diciendo aquí al navegador para que nos muestre el mapa:

  • Las dos primeras lineas le estamos indicando el ancho y el largo del mapa. en este caso le digo que el div debe llenar el 100% de ambas medidas.
  • En las siguietes dos indico el color de fondo, y el tipo de posición a adoptar por el div.
  • En la última indico el ancho de borde que debe tener el mapa, así como su color.

Con esto ya deberíamos de poder ver nuestro mapa. Para ver una muestra podéis hacer click aquí.

Espero que os haya servido de utilidad, si es así compartidlo. Próximamente continuaremos con más cositas sobre Leaflet.

Comentarios

  • Oscar Zuluaga | Oct 8,2013

    Hola, como estas.

    Muy interesante pero en realidad me interesa mucho el tema, con el pequeño inconveniente de que no entiendo nada.

    Tienes algo que me pueda ayudar a comenzar con estos conceptos pero para alguien que aunque manejo los SIG, no se nada de programación y ni de webmapping.

    También estoy incurisonando en el tema de fotogrametría digital para construir MDT a partir de fotografías aéreas. TEngo el software Insight3D pero no cuento con un manual específico para esta temática, de casualidad cuentas con alguno que me puedas compartir?

    Muchas gracias por tu ayuda.

    Saludos.

    • Luis Miguel Royo Pérez | Oct 17,2013

      Pues la verdad Oscar es que hay que saber programación y lenguajes web, al menos unas nociones, ya que está todo construido con ese lenguaje, con lo cual tendremos que aprenderlo. En el post ya he dejado unos enlaces a los que podrías echarles un vistazo. 😀

      Y luego en el tema de construir MDT a partir de fotografías aéreas es muy interesante. La verdad es que no conocía esa rama. Resulta muy interesante, la verdad. No sé de qué rama vienes a esto de los SIG, pero siempre viene bien conocer los MDT, por eso te recomendaría que estudiases cosas al respecto, para entender mejor los pros y los contras de la técnica que usas, ya que hoy día los centros de información geográfica están facilitando MDT muy precisos. Ni hablar ya de los LIDAR y la precisión que pueden llegar a alcanzar, jejeje. Aquí te dejo un enlace para conocer un poco mejor los MDT.

      http://www6.uniovi.es/~feli/CursoMDT/Tema_2.pdf

      Un saludo!

      • Oscar Zuluaga | Oct 24,2013

        Luis Miguel, muchas gracias.

        Seguiré en contacto, pendiente de tu blog.

        Mil saludos.

  • Jose | Oct 27,2013

    Buenas tardes,

    Me gustaría saber que se necesitaría para poder realizar un sitio web en el que poder mostrar en internet todo eso que has desarrollado en tu artículo, y si es posible de forma gratuita. Es decir, si existen servicios gratuitos de hosting que admitan geoserver, postgis…Yo se algo de postgis, geoserver, html, javascript y openlayers, y como tú hasta ahora he trabajado sólo con mi pc, con el localhost.

    Un saludo

  • Deja un comentario