Este artículo se centra en el uso de qgis2web: un excelente plugin de QGIS para crear visores de mapas web interactivos.
Los visores web generados están basados en las librerías para webmapping Leaflet y Openlayers. Se trata de dos librerías JavaScript de tipo Open Source que permiten desarrollar visores web cartográficos avanzados.
En este otro artículo puedes conocer más acerca de las distintas librerías y APIs para webmapping más utilizadas en el sector GIS.
¿Qué es qgis2web?
El plugin qgis2web es una herramienta específicamente diseñada para QGIS con la que se pueden generar visores de mapas web interactivos de manera rápida y sencilla, sin necesidad de tener conocimientos de programación.
El origen de qgis2web es reciente, ya que proviene de la fusión de otros dos plugins anteriores orientados a la exportación de mapas para la web basados en librerías para webmapping distintas.
Por un lado, encontrábamos qgis-ol3 desarrollado por Víctor Olaya, orientado a la publicación de mapas basados en OpenLayers. Por otro lado, el plugin qgis2leaf de Tom Chadwin hacía lo respectivo basándose en Leaflet.
Ambos plugins se encuentran ahora integrados en qgis2web para QGIS, convirtiéndolo en un plugin más potente, versátil y completo.
Podemos encontrar el plugin qgis2web en el repositorio oficial de plugins de QGIS. Asimismo, por supuesto es descargable e instalable desde el gestor de complementos del propio GIS de escritorio.
Desde el propio QGIS puedes instalarlo accediendo desde Complementos > Administrar e instalar complementos > búsqueda: qgis2web > Instalar complemento.
¿Cómo funciona y qué permite hacer el plugin qgis2web?
El plugin qgis2web es capaz de adaptar el contenido de nuestro proyecto de QGIS y transformarlo para ser legible por navegadores web. Además, permite realizar una serie de configuraciones y personalizaciones del visor.
Con qgis2web, el usuario puede configurar múltiples características de visualización, interactividad y organización de las capas, así como otros detalles del aspecto final del visor.
A grandes rasgos, qgis2web lee las capas de nuestro proyecto de QGIS, las interpreta, convierte su formato y las añade a una “plantilla” básica de visor de mapas web. En este proceso se generan una serie de archivos con código HTML, CSS y JavaScript.
Los archivos de código generados, ordenados en carpetas, contienen la estructura básica para que cualquier navegador web moderno sea capaz de mostrar un visor de mapas web interactivo para explorar las capas que contiene.
Como veremos más adelante, los mapas web generados con qgis2web pueden basarse en las librerías para webmapping Leaflet u OpenLayers, según decida y requiera el usuario. Cada librería tendrá sus opciones de personalización.
Lógicamente, se tratará de un visor web básico, aunque funcional. Sin embargo, qgis2web puede resultar útil para generar una visualización rápida y sencilla de nuestra cartografía en caso de requerir mostrarla y compartirla vía web en un visor dedicado.
El resultado obtenido por medio de qgis2web contiene la estructura elemental de un visor web cartográfico. Si se desea, posteriormente podrán editarse los archivos de código HTML, CSS y JavaScript para dotar ese primer prototipo de mayores funcionalidades.
A continuación, vamos a mostrar cómo crear un visor de mapas web desde un proyecto de QGIS mediante qgis2web. Posteriormente, trataremos de añadir alguna funcionalidad extra a ese visor inicial, editando los archivos de código generados.
El conjunto de datos que utilizaremos será el de puntos de recarga para vehículos eléctricos en la ciudad de Barcelona, descargable desde la web del Ayuntamiento de la ciudad.
Cómo configurar un visor web básico con qgis2web
Abriendo el plugin qgis2web lo primero que nos encontraremos será un cuadro de diálogo con distintas pestañas de configuración y un espacio a la derecha reservado para previsualizar el resultado de los cambios.
A pesar de que las opciones de personalización son limitadas, tanto si deseamos trabajar con OpenLayers como con Leaflet, lo cierto es que qgis2web pone a disposición de los usuarios diversos ajustes interesantes para mejorar la apariencia e interactividad.
Lo primero que deberíamos hacer es escoger si nuestro webmap se basará en la librería de JavaScript OpenLayers o bien en Leaflet. Es importante porque de esta elección dependerán las configuraciones posteriores.En nuestro caso optaremos por realizarlo con Leaflet.
La primera pestaña permite escoger la capa o capas a incluir en nuestro visor de mapas web. Asimismo, además de las capas que deseamos incluir en el visor y su visibilidad, también permite escoger los atributos que se mostrarán de cada elemento.
Podremos escoger el atributo de cabecera (header label) y los campos descriptores del elemento en cuestión (inline label). Los campos clasificados como “no label” no serán mostrados en el visor.
Otra opción interesante tanto en Leaflet como en Openlayer, a pesar de que la visualización es distinta, se trata de la agrupación (cluster) de elementos.
Activando esta opción, los elementos de nuestro visor se mostrarán agrupados hasta cierto nivel de zoom para mejorar su visualización y se desplegarán a medida que nos aproximemos a ellos.
Se trata de una opción a valorar especialmente si contamos con conjuntos de datos con registros numerosos que pueden entorpecer la navegación o desmejorar el aspecto del visor cartográfico.
Desde la pestaña de apariencia (appearance) podremos añadir distintas funcionalidades disponibles como:
- Buscador de direcciones / geocodificador
- Listado de capas desplegable
- Opción de geoocalización de usuarios
- Búsqueda de capas del visor
- Herramientas de medición
- Destacar información y abrir ventanas al pasar por encima
- Tamaño de la ventana del visor
- Colores de fondo y de elementos de las ventanas
- Niveles y restricciones de zoom
Una vez configurado podemos cargar una vista previa en el panel derecho de qgis2web para realizar los cambios necesarios antes de ejecutar la herramienta y exportar el proyecto de visor web.
Exportar y visualizar el mapa web creado con qgis2web
Una vez todos los ajustes sean correctos, podremos exportar la configuración para que qgis2web genere los archivos necesarios para poder abrir el visor de mapas en cualquier navegador web.
Por supuesto, el mapa que visualizaremos en nuestro navegador será un archivo local y la URL pertenecerá a una ruta de nuestro disco duro. En cualquier caso, no apuntará a ningún servidor web y por lo tanto tan sólo podremos visualizarlo en nuestro ordenador.
Para poder compartir nuestro visor webmapping y que éste sea visible desde cualquier ordenador conectado a Internet, deberemos configurar un servidor de mapas web que sirva ese contenido.
Desde la pestaña export de qgis2web podremos especificar la ruta donde almacenar los archivos de código y las carpetas que se van a generar entorno al visor.
Como vemos durante el proceso, qgis2web realiza una serie de procesos como la creación de estilos CSS, la conversión de las capas implicadas (en este caso shapefile) a JSON para ser leídos y mostrados por Leaflet o la configuración del archivo index.html.
Este archivo index.html albergará el cuerpo del visor y las llamadas a los archivos de código CSS y JavaScript encargados de la maquetación y las funciones de interacción del visor.
Una vez termine el proceso de exportación, si abrimos index.html con cualquier navegador web deberíamos poder ver el resultado e interaccionar con el visor y sus elementos.
Cómo añadir un mapa base al visor web Leaflet
Ahora que ya tenemos una versión inicial y básica de nuestro visor web con Leaflet deberemos añadir un mapa base sobre el que se sitúe nuestra capa (o capas) y tener una referencia espacial válida.
Existen múltiples proveedores de mapas base de teselas para incluir en nuestro visores web cartográficos.
Para poder añadir un mapa base deberemos editar nuestro archivo index.html con cualquier editor de código y añadir, por ejemplo, las siguientes líneas de código entre las etiquetas <body> y </body> del script html.
var BaseMapCarto = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png', {
attribution: '©
<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ©
<a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 15}).addTo(map);
Con estas líneas de código añadimos una nueva variable (var BaseMapCarto) que almacena el objeto de capa de teselas, en este caso proveído por CARTO a través del enlace especificado.
Se hace uso de la función L.tileLayer() para añadir este mapa base y sus referencias.
Estas líneas también incluyen la atribución a CARTO y OpenStreetMap la cartografía base, que aparece en la esquina inferior derecha del visor.
A continuación, pedimos que este elemento definido se añada al mapa generado (map) con el método .addTo().
Al guardar los cambios y refrescar la pestaña del navegador donde tenemos abierto nuestro index.html deberíamos ser capaces de visualizar el mapa base añadido anteriormente.
Cómo modificar la apariencia de los popup del visor Leaflet
Todos los elementos, iconos, fuentes, tipografias, ventanas, etcétera de nuestro visor web de mapas con Leaflet son fácilmente editables y personalizables.
La personalización de la apariencia del visor y sus elementos pasa por la edición de los archivos de estilos CSS generados.
El código perteneciente a los estilos CSS usualmente se separa del index.html y se enlaza a él mediante links situados entre las etiquetas <head> y </head> del archivo html que leerá el navegador.
En este caso, trataremos de modificar el ancho de las ventanas popup del visor, así como los colores del fondo y las letras de las mismas.
Para modificar el ancho de la ventana popup de Leaflet deberemos acceder al archivo CSS denominado por defecto “qgis2web.css”.
Dentro de este archivo, la clase encargada de definir el ancho de la ventana es «.leaflet-popup-content{ }». Podemos definir un ancho (width) de ventana de 250px por ejemplo. Guardaremos el archivo CSS editado y refrescaremos el visor. El ancho debería haber variado.
Para modificar el fondo y el color de letra deberemos editar el archivo denominado “leaflet.css” y dirigirnos a la clase encargada de control el estilo de las ventanas: “.leaflet-popup-tip{ }”.
Cambiaremos el color del fondo (background) y el de las letras (color) reemplazando los colores especificados con el deseado, mediante su codificación hexadecimal. Por ejemplo: #505050 para un color grisáceo de fondo y el color #ffffff correspondiente al blanco para las letras.
Al guardar los cambios realizados en este archivo CSS y refrescar la vista del visor en el navegador web deberían aplicarse los cambios introducidos.
Tan sólo es cuestión de familiarizarse con los lenguajes de programación web implicados y experimentar conociendo más plugins y funcionalidades disponibles tanto en Leaflet como en OpenLayers.
Muy interesante.
Gracias Manu.
Un saludo!
Gracias por la publicación. Tengo una duda, tengo una capa de puntos la cual he categorizado por fecha, pero al exportar y visualizar sólo me aparece la capa como símbolo único perdiéndose la simbología trabajada previamente en qgis. Se puede corregir esto?
Ya lo pude solucionar, descargué la nueva versión de Qgis 3.6.2, y sí me categoriza la capa de puntos. Ahora, tengo la duda al colgar el mapa en la web, se puede ir actualizando, agregando o desagregando capas?
Saludos
En un principio el plugin debería permitir categorizar y guardar cierta similitud de simbología con la configuración de QGIS. Me alegro que lo hayas solucionado.
En cuanto a la actualización de capas en el mapa y la información de las propias capas, para evitar tener que configurar el proyecto nuevamente cada vez que debas renovar esa información o las capas del visor, lo más lógico pasaría por exportar a Leaflet u OpenLayers el proyecto con todas las capas desde un inicio y tú mismo activar/desactivar manualmente editando el archivo que las define con tal de hacerlas visibles u ocultarlas. Para actualizar el contenido de las capas, con subir el nuevo archivo y eventualmente su posible alteración de nombre y ruta relativa sería suficiente.
Hola Raul, gracias por la respuesta. Tengo otra duda con respecto a la visualización de mi capa de puntos. Como te habia comentado, la capa está categorizada por fecha y en mi proyecto de Qgis yo puedo seleccionar y dejar de seleccionar la capa por día, en cambio en el mapa web generado sólo puedo seleccionar y dejar de seleccionar la capa completa
Hola de nuevo,
el plugin no permite actualizaciones «en vivo» de las capas. Si quieres modificar las capas del mapa tienes dos opciones: o bien rehacer el proyecto en base a las modificaciones realizadas en tus capas o bien modificar los archivos de código HTML y JavaScript para conseguir los cambios en tu visor o aplicación web.
Para visualizar los items de la forma que comentas sin complicarse puede que lo mejor y más rápido sea generar una capa por cada día. Puedes hacerlo desde QGIS mediante una selección por atributo y posteriormente exportar la selección creando una nueva capa. De esta forma, cuando generes el visor web de nuevo con QGIS2WEB e incluyas todas las capas generadas, podrás activar/desactivar los elementos filtrados por día. Luego, editando tu código, podrías llegar a mostrar en el visor los botones de activación de cada capa dentro de un menú desplegable a modo de campos de capa, simulando lo que permite hacer QGIS al categorizar una capa.
Es una propuesta, espero haber respondido a lo que planteas.
Un saludo!
En las versiones 2.18 y 3.8 no se cumple el siguiente párrafo del artículo:
«Podremos escoger el atributo de cabecera (header label) y los campos descriptores del elemento en cuestión (inline label). Los campos clasificados como “no label” no serán mostrados en el visor.»
Solo se decide el comportamiento del título de cada atributo, pero salen todos los definidos en la capa.
Hola Pepe,
gracias por tu comentario. Habiendo actualizado a la versión 3.8 del plugin y realizando una pequeña prueba con Leaflet, todo parece funcionar como indicamos en el artículo. Seleccionando la opción «no label» desde la configuración de qgis2web para los campos deseados, dichos campos no serán visibles en las etiquetas pop-up al hacer hover sobre los elementos. Seleccionando la opción «inline label» permite que el campo y su valor sí se incluyan y sean visibles en la etiqueta. La opción «header label» permite que el campo indicado aparezca como cabecera de la etiqueta.
En cualquier caso, evidentemente los plugins de QGIS están sujetos a cambios continuos en sus respectivas versiones así como en sus adaptaciones a las distintas actualizaciones del propio QGIS. Así pues, es probable que a medida que se vayan introduciendo cambios o mejoras en los plugins algunos detalles del funcionamiento descritos en nuestros artículos varíen ligeramente, tratándose de revisiones o tutoriales de versiones anteriores o escritos en fechas anteriores a la publicación de actualizaciones.
Para el mismo plugin qgis2web pueden seguirse los cambios introducidos en el repositorio de GitHub del plugin que mantiene el autor Tom Chadwin: https://github.com/tomchadwin/qgis2web/releases
Por supuesto, agradecemos apuntes de estas características para informar y mejorar la información de cara a otros lectores.
Un cordial saludo!