Publica tus mapas en la web con qgis2web

webmapping con QGIS

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.

¿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 qgis2leafdesarrollado 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.

qgis2 web utiliza las siguientes librerías:

  • ol3-layerswitcher
  • Autolinker.js
  • requestAnimationFrame polyfill
  • Function.prototype.bind polyfill
  • Leaflet.draw
  • Leaflet.label
  • Leaflet.markercluster
  • Leaflet.MeasureControl
  • leaflet-hash
  • Proj4js
  • Proj4Leaflet
  • OSMBuildings

¿Cómo funciona qgis2web?

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.

¿Cómo se instala?

1. Abrimos QGIS.

2. Vamos al menú superior ComplementosAdministrar e instalar  complementos…

3. Escribimos en la caja de búsqueda “qgis2web”.

4. Lo seleccionamos y hacemos clic en el botón «Instalar complemento»

¿Cómo se usa el plugin qgis2web?

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

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

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

activar plugin qgis2web

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

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

Creando la aplicación web mapping

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.

qgis2web estructura

Se abrirá el mapa en el navegador:

qgis2web resultado

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:

Limitaciones actuales

QGIS, OpenLayers y Leaflet utilizan diferentes tecnologías web mapping. Esto significa que sus respectivas  funcionalidades difieren.

qgis2web hace todo lo posible para interpretar un proyecto de QGIS y exportar el HTML, JavaScript y CSS para crear un mapa web, de tal forma que el resultado final sea lo más fiel posible al proyecto original de QGIS.

Sin embargo, puede ser que algunos elementos de un proyecto de QGIS no sean reproducidos. En el caso de pérdida de funcionalidades podemos editar manualmente el código para lograr lo que qgis2web no consigue.

Limitaciones del plugin:

  • En los mapas de OpenLayers solo se representa un estilo de puntos sencillo, no por categorías o graduados.
  • El estilo de línea (de trazos / puntos) no aparece en la vista previa de OpenLayers, pero funciona cuando exportamos el mapa.
  • Solo se renderiza una sola capa 2.5d por mapa.

Reporte de incidencias

La estabilidad de qgis2web se basa en el reporte de errores, así que las incidencias serán bienvenidas en la sección de incidencias.

14 comentarios en “Publica tus mapas en la web con qgis2web”

  1. Muchas gracias por la aportación, me ha parecido muy útil. Lo he probado también con capasde bases de datos en PostGIS, pero esas capas no las reonoce, ¿Sabrías de alguna aplciación similar que permita incorporar este tipo de capas?

    • Hola Arancha, Gracias a ti por seguirnos!
      Si quieres utilizar PostGIS se me ocurren 3 opciones (seguro que hay alguna más): a) utilizar Node.js + PostGIS. Node.js no se ejecuta en un navegador, sino en el servidor. Es una opción complicada. b) Utilizar TileMill o Mapbox Studio Classic y publicar en Mapbox. c) Utilizar PostGIS + GeoServer + OpenLayers/Leaflet, esta es la arquitectura clásica más completa para crear una aplicación webmapping.
      Si prescindes de PostGIS y trabajas con archivos como geojson el abanico se abre porque puedes utilizar cualquiera de las librerías JavaScript de mapas. Quizá este artículo también te ayude. Saludos!

  2. Muchas gracias por compartir esta información y contribuir al desarrollo de habilidades que fortalecen nuestra vida profesional. Soy nuevo en el manejo de estas tecnologías por lo que mis dudas son bastas. De antemano te agradecería me pudieras decir como agregar una consulta (query) a este tipo de webmapping.
    Muchas Gracias.

  3. Muchas gracias por la información, me parece muy interesante lo que podemos conseguir desde este complemento. Saludos

  4. HOla, muchas gracias por el dato y felicitaciones por este blog.
    Respecto a esta publicación «http://mappinggis.com/2016/03/crea-aplicaciones-webmapping-con-qgis/» se puede agregar google maps como mapa base? que has averiguado del tema? serpia ideal agregarle StreetView.
    Muchas gracias, Paul Constancio

  5. Saludos, me parece una herramienta sumamente valiosas para el diseño de mapas web, ya nos corresponde personalizar cada detalle que se desee agregar o modificar según nuestros requerimientos

  6. Fantástico. Entiendo que nos crea toda la estructura del html y lo que no consiga el plugin lo iremos añadiendo manualmente. Con lo que, en vez de dejarnos los cuernos con tanto código podemos ir al grano?
    Fantástico.

    • Hola Enrique, Gracias por el comentario. Efectivamente, el trabajo inicial de añadir las capas, dar estilo, agregar controles propios de la librería o importando los externos ya los tenemos implementados, por lo que podemos ir directamente a modificar lo que no ha conseguido el plugin. Saludos!

Los comentarios están cerrados.