Publica tus mapas en la web con qgis2web

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, Leaflet y Mapbox GL JS.

¿Qué es qgis2web?

qgis2web es una herramienta que exporta los proyectos de QGIS en mapas web de OpenLayers, Leaflet o Mapbox GL JS (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 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, Leaflet o Mapbox GL JS 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 Complementos > Administrar 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

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.

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.

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>

Publicar el mapa en AWS

El mapa exportado se ha guardado en nuestro equipo. Aunque podemos verlo en funcionamiento, no es muy útil, ya que no podemos compartirlo con nadie. Para que otros sean capaces de verlo, necesitaremos subirlo a un servidor web.

Una manera barata y fácil de publicar su mapa en la web sería usar cualquiera de los los servicios de almacenamiento público en la nube. Amazon S3 es un servicio popular de almacenamiento que puede ser usado para servir páginas web estáticas como nuestro mapa.

Como parte del nivel gratuito de AWS, podemos comenzar a utilizar Amazon S3 sin cargo. Al registrarse, los clientes nuevos de AWS reciben 5 GB de almacenamiento de Amazon S3 en la clase de almacenamiento S3 Standard, 20 000 solicitudes GET, 2000 solicitudes PUT, COPY, POST o LIST y 100 GB de transferencia de datos de salida al mes.

El primer paso será registrar una cuenta. Una vez que su cuenta esté definida, vamos a la  AWS Console y seguimos las instrucciones para crear un bucket. Después de crear el bucket, ya podremos subir los archivos de la carpeta qgis2web.

Una vez que estén cargados los datos, ubicamos el archivo index.html. La URL objeto es la URL que puede ser usada para acceder al mapa.

Limitaciones actuales

QGIS, OpenLayers, Leaflet y Mapbox 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.
• Los filtros de atributos y la exportación de resúmenes solo funcionan en mapas web basados en Leaflet.

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.

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

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

SUSCRÍBETE

Aurelio Morales

Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.