Mi primer mapa con Leaflet

En primer lugar, entro en la web de descarga de Leaflet:

http://leafletjs.com/download.html

Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).

Si no queremos hacer esto, podemos directamente:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>

Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).

Por lo tanto, en nuestro head tendremos que poner:

 
 

En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:

 

Asegúrate que le pones altura en los CSS a este DIV:

     #mimapaleaflet{
           height:180px;
     }

Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:

var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

Añadimos un control de escala:

     L.control.scale().addTo(mymap);

Y un marcador (un POI), que se podrá mover al establecerlo como draggable.

     L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);

El resultado es algo así:

Añadir un popup:

Es simple, únicamente hay que añadir a la sentencia de creación del marcador:

     .bindPopup(«<b>Hello world!</b><br>I am a popup.»);

Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.

.