Leaflet - mapas

19-11-2022
Tiempo de lectura: 2 minutos

Una librería en JavaScript para mapas interactivos totalmente independiente de la capa de mapa.

Mapas

Leaflet es una librería de código abierto (open Source) en JavaScript que se utilita para crear aplicaciones de mapas web. Está estructurada para que sea extremadamente fácil empezar a utilizarla. Primero hemos de preparar la página con los siguientes pasos:

Incluimos el fichero css en la sección <head> de la página HTML.

<link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
    crossorigin=""/>

HTML

A continuación incluimos la parte de JavaScript, que podemos recuperar directmaente con la sigiente url. recuerda que el orden de estos elementos es importante.

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
    crossorigin="">
</script>

Ahora hemos de incluir un elemento en la sección <body> para ubicar el mapa en la página web, y le asignamos un ID

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

Y una cosa más, el contenedor de mapa requiere de la altura que va a tener, por lo que añadimos un estilo:

<style>
    #map { height: 250px; }
</style>

Ahora podemos crear un mapa. Por defecto vamos a tener los mapas de OpenStreetMap, pero se puede utilizar otro proveedor de mapas como Mapbox, Satmen, Thunderforest, Google

Empezamos con la parte de JavaScript:

JavaScript

Primer paso, incializar el mapa. Utilizaremos las coordenadas de Montserrat (latitud: 41.596, longitud: 1.829) y le daremos al mapa un zoom de 13

var map = L.map('map').setView([41.596, 1.829], 13);

Finalmente nos queda por añadir la capa de mapas en la que hemos de incluir la atribución, por temas de copyright, por lo demás no hay problema en hacer un uso personal.

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Ejecutamos

Enviamos el archivo HTML al servidor que estemos utilizando y abrimos la página.

Ejemplo de mapa según el código descrito

Por defecto, todo lo concerniento a eventos e interacciones están habilitadas. Podemos gestionarlas con más detalle, pero eso ya lo veremos.

La pieza de código que hemos ejecuta queda así, super límpia y concisa:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
            integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
            crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
            integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
            crossorigin="">
        </script>
        <style>
            #map { height: 250px; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map = L.map('map').setView([41.596, 1.829], 13);

            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© 
<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);
        </script>
        
    </body>
</html>

Referencias

Documentación y web
https://leafletjs.com
GitHub
http://github.com