Leaflet es una librería libre escrita en JavaScript y fabulosa para representar mapas. El hecho de que sea libre permite poder complementarla con el desarrollo de una gran cantidad de extensiones. De ahí que al añadir plugins en Leaflet aumentemos considerablemente sus funcionalidades.
Podemos ver los plugins en su dirección web. Cada día se generar nuevas extensiones, por lo que hay que estar al día de las últimas novedades.
Pero antes de continuar con la adición de plugins en Leaflet, os dejo que descubráis qué es un web mapping, así como una introducción de Leaflet, cómo se añaden marcadores en el mapa, y cómo pueden modificarse los controles. Una base de HTML, JavaScript y CSS nunca vienen mal para poder integrar todo.
Quiero leer...
Añadir plugins en Leaflet
Vamos a añadir plugins en Leaflet. Más exactamente, vamos a descargarnos dos extensiones para mostrarlo como ejemplo:
Leaflet.MousePosition. Este plugin indica las coordenadas geográficas de la posición del ratón.Leaflet.MiniMap. Este plugin nos muestra una pequeña ventana con el mapa del mundo para ubicarnos en el planeta.
Nos descargamos los ZIP de los dos complementos de su página de GitHub y los descomprimimos dentro de una carpeta que hemos llamado Plugins en nuestro área de trabajo.
Llamar a los plugins en el <head></head>
Tenemos que añadir en el <head></head> las llamadas a los plugins, indicando la ruta de acceso a los mismos. Primero vamos a llamar al de la posición del ratón y después al del mapamundi.
<!-- Plugin Mouse Position --> <link rel="stylesheet" href = "Plugins/Leaflet.MousePosition-master/src/L.Control.MousePosition.css"/> <script type="text/javascript" src ="Plugins/Leaflet.MousePosition-master/src/L.Control.MousePosition.js"></script> <!-- Plugin Mini Map --> <link rel ="stylesheet" href= "Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.css"/> <script type="text/javascript" src = "Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.js"> </script>
Añadir los los plugins en el <body></body>
Y ahora creamos los objetos en el <body></body> y <script></script> . Vamos a activalor, comenzando por el más sencillo de los dos, que es MousePosition con solo una línea:
L.control.mousePosition().addTo(map);
Y siguiendo con MiniMap, que requiere de la creación de dos objetos, uno (capa_mp) que es un objeto L.tileLayer indicando qué mapa base va a utilizar, y otro (miniMap), con la función como tal del minimapa:
var capa_mp = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
var miniMap = new L.Control.MiniMap(capa_mp, { toggleDisplay: true }).addTo(map);
La opción toggleDisplay nos permite minimizar el minimapa.
Veamos el resultado de añadir plugins en Leaflet
Ejemplo del código completo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- Plugin Mouse Position -->
<link rel="stylesheet" href = "Plugins/Leaflet.MousePosition-master/src/L.Control.MousePosition.css"/>
<script type="text/javascript" src ="Plugins/Leaflet.MousePosition-master/src/L.Control.MousePosition.js"></script>
<!-- Plugin Mini Map -->
<link rel ="stylesheet" href= "Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.css"/>
<script type="text/javascript" src = "Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.js"> </script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{center: [40.418889, -3.691944], zoom: 6});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var capitales = new L.LayerGroup();
var Augusta_Emerita = L.marker([38.91667, -6.33333], {
title: "Augusta Emerita",
draggable:true,
opacity: 0.75
}).bindPopup("<i>Augusta Emerita</i>")
.addTo(capitales);
var Corduba = L.marker([37.8847, -4.77639], {
title: "Corduba",
draggable:false,
opacity: 1
}).bindPopup("<b>Corduba</b>")
.addTo(capitales);
var Tarraco = L.marker([41.114722, 1.259306], {
title: "Tarraco",
draggable:false,
opacity: 0.5
}).bindPopup("<h2>Tarraco</h2>")
.addTo(capitales);
var capas_base = {
"capa base OSM": osm
};
var capas_tematicas = {
"Capitales de provincia": capitales
};
L.control.layers(capas_base, capas_tematicas).addTo(map);
L.control.mousePosition().addTo(map);
var capa_mp = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
var miniMap = new L.Control.MiniMap(capa_mp, { toggleDisplay: true }).addTo(map);
</script>
</body>
</html>
