¿Cómo imprimir mapas web de Leaflet?

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.

imprimir mapas web con Leaflet easyPrint

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:

A continuación crearemos el control de impresión utilizando L.easyPrint como se muestra en el siguiente ejemplo:

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.

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:

imprimir mapas web con Leaflet easyPrint

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

4 comentarios en “¿Cómo imprimir mapas web de Leaflet?”

  1. 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.

  2. 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.

Los comentarios están cerrados.