Cómo publicar mapas web de QGIS sin servidor con qgis2web y Qgis2OnlineMap

Publicar nuestros mapas en la web, a diferencia de la creación de mapas estáticos (por ejemplo un PDF), tiene la ventaja de poder llegar más rápidamente y a un público más amplio. Basta con facilitar una dirección URL de nuestros mapas online a nuestros colegas, para que puedan verlos.

A pesar de que la creación de mapas web está estrechamente relacionada con la programación y tiene una curva de aprendizaje, existen algunas herramientas que podemos utilizar para hacer mapas interactivos de una forma sencilla.

Ya hemos visto como existe un plugin de QGIS denominado QGIS Cloud, que sirve para publicar mapas online (un servicio de alojamiento en la nube de QGIS Server).

En este caso vamos a enseñarte a crear mapas web con qgis2web, un plugin de QGIS y aprovecharnos de toda la potencia de las famosas librerías OpenLayers y Leaflet y subirlos a un servidor gratuito utilizando Qgis2OnlineMap.

¿Qué es qgis2web?

qgis2web es una herramienta que exporta los proyectos de QGIS en mapas web de OpenLayers o Leaflet (crea automáticamente los archivos HTML, JavaScript y CSS).

El origen de este plugin está en los plugins ya existentes qgis2leaf, desarrollado por Riccardo Klinger y  qgis-ol3 de Victor Olaya. Ambos plugins se han fusionado en uno único denominado qgis2web y ahora es Tom Chadwin quien mantiene este nuevo complemento.

qgis2web crea un mapa web basado en OpenLayers o Leaflet de todas las capas existentes en un proyecto de QGIS. La herramienta convierte las capas vectoriales en GeoJSON y crea una estructura de carpetas con un archivo index.html que contiene el mapa web.

Además el plugin es capaz de exportar la simbología definida en QGIS tanto de puntos, líneas y polígonos e incluir un control de visibilidad de capas y varios controles más.

Vamos a ver cómo publicar mapas web de QGIS sin servidor con qgis2web y Qgis2OnlineMap, en cuatro pasos:

1. Preparar el mapa en QGIS

En primer lugar debemos añadir las capas al proyecto de QGIS y asignar la simbología deseada a nuestras capas:

También podemos añadir capas base de OpenStreetMap, Google, Bing, etc utilizando el plugin QuickMapServices y estas capas base se exportaran en nuestros mapas en la web con qgis2web.

2. Abrir qgis2web

• Vamos al menú superior Complementos > Administrar e instalar  complementos…
• Escribimos en la caja de búsqueda “qgis2web”.
• Lo seleccionamos y hacemos clic en el botón «Instalar complemento»:

Para activar el complemento debemos ir al menú superior Web > qgis2web > Create web map

Al pinchar sobre Create web map se abre la ventana principal del plugin:

Opciones de exportación

En la sección izquierda se encuentra la lista de los parámetros que definen cómo se creará el mapa web.

• La primera pestaña, Layers and Groups, contiene la lista de capas a incluir. Es interesante la opción de cluster (un buen truco para las capas de puntos), porque mejora sustancialmente la velocidad de representación de los puntos. Todas las capas y los grupos tienen el campo Visible activado por defecto. Si esta casilla está desactivada, se agregará al mapa web, pero no será visible al abrirla. La capa puede hacerse visible en el visor web habilitándolo en el panel de lista de capas.
• La pestaña Apariencia, Appearance, contiene la configuración para ajustar el mapa web resultante, en esta pestaña podemos incluir varios controles de mapa como:
  • • Búsqueda de direcciones.
    • Control de lista de capas.
    • Herramienta de medición.
    • Barra de escala.
    • Geolocalizar al usuario.
    • Resaltado de objetos.
    • Ventana emergente (popup).
    • Resaltado de objetos geográficos al pasar el puntero del ratón sobre ellos.
  • Scale Zoom. Controla la extensión del mapa, el nivel de zoom máximo y mínimo, etc.
• Pestaña Export. Los siguientes ajustes están disponibles para configurar cómo se crea el mapa web:
  • Exporter. Aquí podemos seleccionar si queremos exportar el mapa web a una carpeta o subirlo a un servidor mediante FTP.
  • También podemos controlar cómo se crean los archivos GeoJSON a partir de nuestras capas vectoriales QGIS. Para reducir el tamaño de las capas resultados conviene marcar la casilla Minify GeoJSON files. En esta entrada tienes más pistas para reducir el tamaño de un geojson y hacer que la aplicación web sea más rápida.

Por defecto el mapa que se crea se basa en OpenLayers, por lo que si queremos crear una aplicación webmapping con QGIS que muestre un visor basado en Leaflet debemos marcar la casilla correspondiente.

Una vez configuradas todas las opciones para crear mapas en la web con qgis2web, previsualizamos el mapa en el panel de la derecha haciendo clic en el botón inferior Update preview.

3. Exportar a formato web

Para crear el mapa web pulsamos el botón Export se crea la estructura de carpetas que contiene la aplicación web (el archivo index.html y las carpetas que contienen las capas en formato GeoJSON, las librerías JavaScript utilizadas y los CSS asociados). La estructura varía en función de si elegimos la librería OpenLayers o Leaflet.

Se abrirá el mapa en el navegador:

Como vemos, este plugin proporciona una manera fácil de distribuir nuestros proyectos de QGIS como un mapa web.

Si deseamos publicar este mapa en línea, necesitaremos un servidor web y cargar el archivo index.html y las carpetas asociadas al directorio principal index.html.

Para insertar una mapa web en tu web puedes utilizar la etiqueta <iframe>. Por ejemplo:

<iframe width="1200" height="453" style="border: 0px solid #AAA; width: 1200px; height: 453px;" src="http://mappinggis.com/webmapping/_l_web_plugins.html"> </iframe>

4. Publicar el mapa en un servidor GRATIS con Qgis2OnlineMap

Qgis2OnlineMap (aquí el enlace a Github), es un complemento que nos proporciona alojamiento de mapas web con un solo clic. Nos permite compartir nuestros proyectos de QGIS, qgis2web y Qgis2threejs en línea al instante. Sin servidor ni GitHub. Podemos subir nuestros proyectos de Qgis2threejso qgis2web, exportar el mapa y obtener un enlace permanente para compartir en segundos.

Funciona como un puente entre el espacio de trabajo de QGIS y la plataforma en la nube Qgis2OnlineMap. Solo es necesario crear una cuenta gratuita.

Instalamos el plugin:

Un vez instalado abrimos el complemtno y vamos a la pestaña Settings para iniciar sesión a través del navegador web. Esta es la forma más segura de conectar nuestra instancia de QGIS a nuestra cuenta:

Se abrirá una ventana del navegador donde te autenticas; una vez completado el proceso, se envía automáticamente una clave de acceso segura al plugin:

Login successful!

You can now close this window and return to QGIS.

Ahora ya podemos arrastrar y soltar la carpeta resultante de qgis2web directamente, tal cual, o la versión comprimida. No debemos arrastrar los archivos individuales:

Podemos publicar mapas 2D y 3D de forma segura en la nube y administrarlos mediante un panel de control profesional.

Y es compatible con QGIS 3.x y 4.0.

Una vez subida la carpeta, obtendremos una URL activa al instante. ¿Quieres mantenerla privado? Activa la opción de protección con contraseña en la configuración del mapa para restringir el acceso a tus clientes o equipo.

Aquí os dejamos un vídeo con el proceso completo:

Conclusión

Si quieres compartir online tus proyectos de QGIS, esta es una gran alternativa a QGIS Cloud.