Mapeo web con QGIS2Web

Advertencia

Este tutorial está ahora obsoleto. Una versión nueva y actualizada está disponible en Mapeo Web con QGIS2Web (QGIS3)

El mapeo web es un medio genial de publicar sus datos SIG a la web y hacerlos accesibles a otros usuarios. Crear un mapa web es un proceso muy diferente que crear uno en un SIG. Los usuarios SIG no son típicamente programadores web y ello presenta un desafío cuando uno necesita crear un mapa web que es de la misma calidad que un mapa creado en un SIG. Afortunadamente, hay disponibles herramientas que traducen fácilmente su trabajo en QGIS a mapas web. En este tutorial, aprenderemos como usar el complemento QGIS2Web para crear un mapa web usando librerías OpenLayers o Leaflet de su proyecto QGIS.

Vista general de la tarea

Crearemos un mapa web openlayers de los aeropuertos del mundo.

Otras habilidades que aprenderá

  • Como usar Editar Widgets en QGIS para esconder ciertos campos y establecer tipos personalizados.

  • Como crear un campo virtual usando la Calculadora de Campo.

  • Crear etiquetas para entidades que aparecen sólo a cierta escala.

Obtener los datos

Usaremos los el conjunto de datos Aeropuertos de Natural Earth.

Descargue el archivo shape Aeropuertos.

Para su comodidad, puede descargar directamente una copia de los conjuntos de datos de los enlaces abajo:

ne_10m_airports.zip

Fuente de Datos [NATURALEARTH]

Procedimiento

  1. Abra QGIS y vaya a Capa ‣ Agregar Capa Vectorial. Navegue a la ubicación del archivo descargado y seleccione ne_10m_airports.zip. Clic en Aceptar.

../_images/1289.png

  1. Ahora crearemos un mapa en QGIS que se parece y se comporta justo como quisiéramos en el mapa web. El complemento qgis2web replicará la configuración QGIS y creará automáticamente el mapa web si que sepamos sobre las librerías de mapeo web. Cuando un usuario hace clic en un marcador de aeropuerto, queremos una ventana de información que muestre información útil acerca del aeropuerto. Esta información ya está presente en la tabla de atributos de la capa ne_10m_airports. Clic-derecho en la capa ne_10m_airports y seleccione Propiedades.

../_images/2190.png

  1. Cambie a la pestaña Campos. Notará los diferentes atributos presentes en la capa. Alguno de ellos no son relevantes a los usuarios de nuestro mapa web, por lo que podemos elegir esconderlos. Mantendremos los campos type, name, iata_code y wikipedia y esconderemos los otros. Clic en el botón Editar Texto bajo la columna Editar widget para el campo `scalerank.

../_images/3130.png

  1. En el diálogo Editar Propiedades del Widget, escoja Hidden como el tipo. Clic en Aceptar.

../_images/484.png

  1. De forma similar, establezca otros campos como de tipo Hidden. Como puede haber notado, hay otros tipos disponibles de campo que nos permiten establecer como aparecen los campos a los usuarios de nuestro mapa. Clic en Editar Widget para el campo wikipedia.

../_images/578.png

  1. Seleccione Vista Web como el tipo del campo. Este tipo indica que el valor contenido en este campo es una URL.

../_images/675.png

  1. También podemos usar la columna Alias para indicar un nombre alternativo para los campos sin realmente cambiarlos en la tabla de datos por detrás. Esto es útil para dar nombres más amigables al usuarios para los usuarios de nuestro mapa. Agregue alias según su criterio y clic en Aceptar.

../_images/774.png

  1. De vuelta en la ventana principal QGIS, escoja la herramienta Identificar y clic en cualquier punto. El panel Identificar Resultados mostrará los atributos bien formateados con los nuevos alias agregados. Notará que los campos ocultos no aparecen en los resultados.

../_images/872.png

  1. Mientras este método es útil, hay una limitación. No somos capaces de cambiar el orden de los campos. Una manera de superar esta limitación es crear un Campo Virtual`. En nuestro caso, si quisiéramos que el campo ``tipo apareciera al final de la ventana de información, podemos simplemente agregar un nuevo campo virtual al final y esconder el campo tipo original. Mientras estamos en ello - también podemos usar una expresión para formatear mejor los valores de tipo. Clic-derecho en la capa ne_10m_airports y escoja Propiedades. Vaya a la pestaña Campos y clic en Calculadora de Campo.

../_images/971.png

  1. Como los nombres de campo necesitan ser únicos, use Type como el nuevo nombre de campo. Establezca el tipo del campo como Texto (Cadena) con una longitud de 25 caracteres. El campo``type`` contiene valores como small, mid, large, etc. Podemos agregar una expresión para cambiar las mayúsculas/minúsculas de las palabras a la forma de oración y anexar la palabra airport para mayor legibilidad. Ingrese la siguiente expresión en la caja Expresión y clic en Aceptar.

concat( title("type"), ' Airport')
../_images/1079.png

  1. Ahora que tenemos un campo Type que se ve mejor, podemos proseguir y definir el Edit Widget para type como Hidden.

../_images/11116.png

  1. Use la herramienta Identificar para verificar que los atributos aparecen como se espera.

../_images/1290.png

  1. Ahora definamos el estilo de nuestra capa para que sea más llamativa e informativa. Clic-derecho la capa ne_10m_airports y seleccione Propiedades. Cámbiese a la pestaña Estilo. Escoja el estilo Categorizado y nuestro campo virtual Type como la Columna. Clic en Clasificar.

../_images/1376.png

  1. Verá que un círculo con color diferente será asignado a un tipo diferente de aeropuerto. Para el propósito de este tutorial, restringiremos el mapa a los aeropuertos civiles. Mantenga presionada la tecla Ctrl y seleccione todas las categorías para aeropuertos militares. Una vez seleccionadas, clic en Eliminar.

../_images/1472.png

  1. Aparte de asignar un color diferente a la categoría, podemos cambiar el tamaño del símbolo para ayudar visualmente a nuestros usuarios a que distingan diferentes tipos de aeropuertos. Clic-derecho en una categoría y seleccione Cambiar tamaño.

../_images/1564.png

  1. Defina el valor Tamaño como 3 para la categoría Large Airport.

../_images/1660.png

  1. De forma similar, defina el Tamaño como 2 para Mid Airport y 1 para Small Airport.

../_images/1758.png

  1. Para un mapa completo, también necesitamos etiquetar cada aeropuerto. Cámbiese a la pestaña Etiquetas en el diálogo Propiedades. Seleccione Mostrar etiquetas para esta capa y elija iata_code como el valor para Etiquetar con. También definiremos la opción Representación de manera que las etiquetas sólo aparecerán cuando el usuario esté suficientemente acercado. Marque Visibilidad dependiente de la escala bajo Opciones de etiqueta. Ingrese 1 como la escala Mínima y 10000000 como la escala máxima. Esta configuración representará las etiquetas sólo después de que el usuario se haya acercado más que la escala 1:10000000 y será visible hasta la escala 1:1.

../_images/1854.png

  1. Como estamos usando círculos para representar los aeropuertos, necesitamos asegurar que las etiquetas no se sobreponen con los círculos. Vaya a la pestaña Ubicación en el diálogo Etiquetas y defina la Ubicación como Cartográfica. Seleccione De los bordes de símbolo como la Distancia de desplazamiento de. Clic en Aceptar.

../_images/1945.png

  1. Ahora nuestro mapa está listo. Este es un buen momento para guardar nuestro trabajo. Vaya a Proyecto ‣ Guardar. Ingrese Aeropuertos como el nombre del proyecto.

../_images/2040.png

  1. Ahora estamos listos para exportar nuestro proyecto como un mapa web. Instale el complemento qgis2web yendo a Complementos ‣ Administrar e Instalar Complemento (Vea Uso de Complementos para más detalles sobre la instalación de complementos en QGIS). Una vez que el complemento esté instalado, vaya a Web ‣ qgis2web ‣ Crear un mapa web.

../_images/2191.png

  1. En el diálogo Exportar a mapa web, marque Añadir lista de capas en el panel de abajo, debajo de la sección Apariencia. También seleccione ne_10m_airports: iata_code como el campo para Búsqueda de etiqueta. Marque el Mostrar ventana emergente cuando se pase encima para permitir mostrar ventanas de información cuando se pase por encima. Podemos también definir un mapa base de manera que los usuarios tengan más contexto cuando miren la capa de aeropuertos. Seleccione OSM B&W para usar un mapa base con tema blanco y negro usando datos OpenStreetMap. También tiene una opción para elegir OpenLayers o Leaflet para la biblioteca de mapeo web. Restringiremos este tutorial al uso de la biblioteca OpenLayers. Clic en Actualizar Previsualización` para ver como se verá su mapa exportado. Antes de que hagamos la exportación propia, necesitamos definir la Carpeta de exportación. Puede seleccionar una carpeta de su gusto y clic en Exportar.

../_images/2238.png

  1. Una vez que se complete la exportación, el navegador predeterminado de su computadora abrirá y mostrará el mapa web interactivo.

../_images/2334.png

  1. Su mapa web está ahora listo para publicarse.

../_images/2433.png

  1. El complemento qgis2web tiene varias limitaciones y no puede hacer todo lo que permiten las poderosas bibliotecas de mapeo web OpenLayers y LeafLet. Este proceso puede actuar como un punto de partida en su proceso de mapeo web y ahorrarle tiempo valioso creando una plantilla básica de la que podrá personalizar el mapa web. Para resaltar el hecho de que la salida creada de este proceso puede ser fácilmente cambiada para ajustarse a su requerimiento - haremos un cambio simple al mapa web para acercarnos a un aeropuerto particular cuando el usuario cargue inicialmente el mapa. En su computadora, vaya a la carpeta donde fue exportado el mapa web. Localice la carpeta resources y abra el archivo qgis2web.js en un editor de texto.

../_images/2530.png

  1. Localice la línea donde se llama a la función map.getView().fit() y agregue el código siguiente después. Esta nueva línea de código instruye al navegador web de centrar el mapa en las coordenadas de Paris. Guarde los cambios en el archivo qgis2web.js.

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2627.png

  1. Actualice su navegador y vea que el mapa web cargará con París en el centro. Este es un ejemplo trivial, pero puede ver como puede usar cualquier función disponible en las bibliotecas OpenLayers o LeafLet para personalizar el mapa web.

../_images/2727.png

  1. El mapa exportado reside en su computadora. A pesar de que puede verlo en acción, no es muy útil ya que no puede compartirlo con nadie. Para que otros puedan ver el mapa, necesita cargarlo a un servidor web. Mientras el proceso de carga variará en el tipo de servidor al que tiene acceso - una manera barata y fácil de publicar su mapa en la web sería usar cualquiera de los servicios de almacenamiento público en la nube. Amazon S3 es un servicio popular de almacenamiento. Necesitará registrarse con una cuenta y seguir las instrucciones para crear un bucket. Una vez que el bucket esté creado, puede cargar el contenido de su carpeta exportada al bucket y volverla pública. Aquí yo creé un bucket llamado qgis-tutorials y cargué el contenido de mi carpeta exportada a una subcarpeta llamada qgis2web. Puede acceder al mapa resultante en http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

../_images/2826.png

  1. De forma similar, Google también ofrece un servicio de almacenamiento en la nube llamado Google Cloud Storage. Una vez que haya creado una cuenta y habilite el pago, puede crear un bucket y subir objetos al bucket. Yo creé un bucket y una subcarpeta similar a Amazon y definí la carpeta como pública. El mapa resultante puede ser visto en https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html

../_images/2923.png

If you want to give feedback or share your experience with this tutorial, please comment below. (requires GitHub account)