Leaflet es una librería JavaScript que se caracteriza por ser ligera y muy fácil de aprender y usar. La filosofía de esta popular herramienta para la publicación de mapas en la web, es centrarse en un conjunto básico de características y ampliar su funcionalidad mediante plugins desarrollados por terceros.
Gracias a la comunidad que hay detrás de leaflet disponemos de cientos de plugins que nos permitirán hacer casi todo lo que imaginemos. En este mismo blog hemos repasado en otras ocasiones los mejores plugins para leaflet.
Vamos a poner en esta ocasión la mirada sobre unos de esos “mejores plugins”, que por su sencillez puede servirnos de ejemplo para ver el funcionamiento de un plugin. Pero además es tan útil que se puede utilizar en casi todos los proyectos independientemente de su nivel de complejidad. Se trata de un plugin para imprimir mapas web: Leaflet easyPrint.
Para utilizar el plugin en primer lugar será necesario descargarlo. Para ello acudimos a la página del plugin: https://github.com/rowanwins/leaflet-easyPrint.
Una vez descargado veremos que el plugin se compone de varios archivos y carpetas pero realmente el único que necesitamos es: leaflet.easyPrint.js, que está dentro de la carpeta /dist. Lo utilizamos añadiéndolo al script de nuestro código de la siguiente forma:
<script src="leaflet.easyPrint.js"></script>
A continuación crearemos el control de impresión utilizando L.easyPrint como se muestra en el siguiente ejemplo:
L.easyPrint({
title: 'Mi botón para imprimir',
position: 'bottomright',
elementsToHide: 'p, h2, .leaflet-control-zoom'
}).addTo(map);
De esta forma estamos añadiendo un nuevo control al mapa, que nos permitirá imprimir nuestra página. Como se puede ver en el código anterior hemos definido unas opciones que explicaremos un poco más adelante. De momento vamos a escribir el código completo de un mapa creado con leaflet en el que incluimos el plugin Leaflet easy-print para que nos sirva de ejemplo.
Este código contiene además varias etiquetas html, como h2, h3, p que utilizaremos después para explicar una de las opciones del plugin.
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Imprimiendo con Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<style>
#map {
width: 700px;
height: 600px; }
</style>
</head>
<body>
<h2>Bienvenido a la demo de easyPrint</h2>
<h3>Podemos controlar los elementos que se imprimen</h3>
<p>Con la opción elementsToHide.</p>
<p>Por ejemplo este texto no se imprime porque ocultamos las etiqueta html de párrafo</p>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="leaflet.easyPrint.js"></script>
<div id ="map"> </div>
<script>
var map = L.map('map', {center: [40.965, -5.664],zoom: 16});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
L.easyPrint({
title: 'Mi botón para imprimir',
position: 'bottomright',
elementsToHide: 'p, h2, .leaflet-control-zoom'
}).addTo(map);
</script>
</body>
</html>
Opciones del plugin easyPrint
Las opciones de las dispone este plugin son tres:
1.- Title: permite definir un texto que será visible al pasar el cursor sobre el control de impresión.
2.- Position: nos permite elegir el lugar del mapa en que queremos que nos inserte el control de impresión. Podemos elegir una de las cuatro posibilidades que nos ofrece el control de posición de leaflet; es decir:
- topleft
- toprigth
- bottomleft
- bottomrigth
3.- elementsToHide: nos permite ocultar aquellos elementos html de nuestra página que no queremos que muestren en el documento impreso. En el ejemplo que hemos escrito ocultamos las etiquetas html <p> y <h2>. Pero además, del mismo modo, podemos acceder a los elementos html de la librería de leaflet. En aplicación de esto podemos hacer que el control de zoom no aparezca en la impresión ocultando la clase que lo controla: .leaflet-control-zoom.
El resultado es que al hacer clic sobre el control de impresión nos imprimirá un mapa como este:
Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.
Tutor del curso online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.
Hola solo una duda, entre a la carpeta dist, y no se encuentra el archivo leaflet.easyPrint.js,
que puedo hacer? de ante mano gracias
Hola Perez:
Hay una nueva versión de este plugin que supone una revisión completa del mismo. El archivo que debes utilizar ahora es bundle.js, que también se encuentra en la carpeta dist. También se han actualizado las opciones disponibles, añadiéndose algunas nuevas y despareciendo otras, por lo que tendrás que revisar la documentación del plugin para actualizar el código a la nueva versión.
Hola, buenas gran tutorial… una pregunta te agradecería mucho si me la pudieras resolver. En caso de tener ya la interfaz web creada, existe un function o plugin que permitan al cliente subir archivos scv o layer desde la misma interfaz, además de que esta se almacene? gracias.
Hola Eilys.
Muchas gracias por tu amable comentario. Leaflet permite la utilización de diferentes formatos, como csv, geoJSON, shp… Sin embargo, subir y almacenar archivos en una aplicación web, requiere de otras herramientas adicionales.