- Informática

Introducción a Leaflet: fundamentos y creación de un marcador

El documento HTML

Para crear nuestro primer mapa con Leaflet necesitaremos crear un documento HTML y debe tener una estructura mínima, similar a la que reproducimos a continuación:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa con un marcador</title>
</head>
<body>
<div id="mapa"></div>
</body>
</html>

Dentro del body, de momento sólo tenemos un elemento <div> con el atributo id y el valor “mapa”. Por si sólo, este elemento no mostrará nada, pero una vez creemos la hoja de estilo e incorporemos algo de JavaScript, el valor “mapa” nos ayudará a identificar y enlazar los tres documentos (HTML, CSS y JavaScript).

Las hojas de estilos

Para trabajar con Leaflet debemos importar su hoja de estilos. Por otro lado, tal y como hacíamos con Google Maps, también debemos establecer el tamaño del elemento <div> que contendrá el mapa. Para ello, crearemos un CSS específico y enlazaremos ambos documentos.

A continuación el CSS personalizado:

#mapa{
  height: 600px;
}

A continuación, el documento HTML con la referencia al CSS anterior y al CSS de Leaflet.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa con un marcador</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css">
<link rel="stylesheet" href="css/mapa.css">
</head>
<body>
<div id="mapa"></div>
</body>
</html>

Referencia a la biblioteca de Leaflet

Para poder cargar la biblioteca de Leaflet debemos inlcuirla en nuestro archivo HTML. La cargaremos con el elemento <script>.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa con un marcador</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css">
<link rel="stylesheet" href="css/mapa.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
</head>
<body>
<div id="mapa"></div>
</body>
</html>

Crear nuestro primer mapa

Ahora que ya tenemos nuestro fichero HTML vinculado a la biblioteca de Leaflet y a la hoja de estilos, ya podemos empezar a escribir código JavaScript para inicializar nuestro mapa. De la misma manera que con las hojas de estilo, también es una buena práctica separar el código JavaScript de nuestro HTML. Así que crearemos un fichero llamado “mapa.js” y lo guardaremos en una carpeta con nombre “js”.

Una vez creada esa estructura, debemos referenciar el fichero “mapa.js” desde nuestra página HTML. Para ello, utilizaremos de nuevo la etiqueta <script>, pero esta vez referenciando un fichero ubicado en nuestro PC o servidor. Esta etiqueta debe aparecer a continuación del <div> que mostraré el mapa.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa con un marcador</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css">
<link rel="stylesheet" href="css/mapa.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
</head>
<body>
<div id="mapa"></div>
<script src="js/mapa.js"></script>
</body>
</html>

Inicializando el mapa

Para inicializar el mapa, creamos una variable (miMapa) y utilizamos los métodos “map” y “setView” para pasarle el id de nuestro mapa y los valores de las coordenadas y nivel de zoom inicial, respectivamente.

var miMapa = L.map('mapa').setView([41.3602185,2.0954249], 15);

A continuación, vamos a utilizar el método “tileLayer” para cargar una capa con uno de los estilos de Mapbox, un servicio compatible con Leaflet. Para ello, necesitaremos un accessToken, un pequeño código alfanumérico que podemos conseguir al darnos de alta y acceder al panel de control de Mapbox. En el siguiente código se indica dónde utilizar este código.

Dentro del tileLayer también podemos indicar mediante la propiedad “atribution” el pie de mapa que queremos hacer constar (en formato HTML)

Otras propiedades con las que trabajaremos en este punto es el nivel máximo de zoom, que dejaremos en 20, el id de nuestro mapa que escogeremos de entre los disponibles (podéis consultar la documentación de la API de Mapbox). Yo utilizaré el “mapbox.comic”.

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Rubén Alcaraz. Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 20,
    id: 'mapbox.comic',
    accessToken: 'aqui_tu_accessToken'
}).addTo(miMapa);

Añadir un marcador y un popup

Para añadir un marcador al mapa crearemos una variable llamada “marker” y utilizaremos el método del mismo nombre al que le pasaremos las coordenadas del marcador y el id del mapa al que lo queremos añadir.

Nota: en este caso he utilizado las mismas coordenadas para el marcador y para el centro del mapa, pero pueden ser valores diferentes.

var marker = L.marker([41.3602185,2.0954249]).addTo(miMapa);

Para añadir un popup utilizaremos el método bindPopup sobre el objeto de hemos creado anteriormente (marker). Como parámetros le pasaremos el texto e imágenes que queremos que aparezcan dentro del popup en HTML. También le pasaremos la variable “estiloPopup”, en la que definiremos el tamaño del popup más adelante.

marker.bindPopup("<h1>La Talaia</h1><img src='img/talaia.jpeg' alt='La Talaia'><p>Torre de vigilància construïda en una època on sovintejaven els atacs corsaris a la costa catalana. Formava part de l'antic mas Modolell de la Torre, situat a la sortida del poble, cap a Cornellà. Va ser construïda el 1587 i traslladada al seu actual emplaçament, el carrer del Xipreret, el 1972, quan es va enderrocar la masia. És una torre de planta quadrada, de cinc pisos, el més alt dels quals està obert als quatre cantons mitjançant tres arcades adovellades de punt rodó. Sembla que les arcades superiors no són les originals, que eren gòtiques i que, segons fonts no contrastades, havien desaparegut temps abans.</p>.",estiloPopup).openPopup();
var popup = L.popup();

El estilo del popup lo definiremos antes de inicializarlo:

var estiloPopup =
      {
      'maxWidth': '500'
      }

Todo junto:

var miMapa = L.map('mapa').setView([41.3602185,2.0954249], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Rubén Alcaraz. Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 20,
    id: 'mapbox.comic',
    accessToken: 'pk.eyJ1IjoicmFsY2FyYXoiLCJhIjoiY2prNmRxcmh1MXNqODNya2NocWY5azEweCJ9.4Qf2Wgh-d1e_ujcRkvq0MA'
}).addTo(miMapa);
var estiloPopup =
      {
      'maxWidth': '500'
      }
var marker = L.marker([41.3602185,2.0954249]).addTo(miMapa);
marker.bindPopup("<h1>La Talaia</h1><img src='img/talaia.jpeg' alt='La Talaia'><p>Torre de vigilància construïda en una època on sovintejaven els atacs corsaris a la costa catalana. Formava part de l'antic mas Modolell de la Torre, situat a la sortida del poble, cap a Cornellà. Va ser construïda el 1587 i traslladada al seu actual emplaçament, el carrer del Xipreret, el 1972, quan es va enderrocar la masia. És una torre de planta quadrada, de cinc pisos, el més alt dels quals està obert als quatre cantons mitjançant tres arcades adovellades de punt rodó. Sembla que les arcades superiors no són les originals, que eren gòtiques i que, segons fonts no contrastades, havien desaparegut temps abans.</p>.",estiloPopup).openPopup();
var popup = L.popup();

El resultado final es este:

Mapa y marcador creado con Leaflet

Popup creado con Leaflet

Más información en la documentación de Leaflet.

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.