Mapeo web con QGIS2Web

El mapeo web es un medioso grandioso 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 SG. 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, aprederemos 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]

Procedmiento

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

../_images/1198.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/2153.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/386.png
  1. En el diálogo Editar Propiedades del Widget, escoja Hidden como el tipo. Clic en Aceptar.

../_images/464.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/565.png
  1. Seleccione Vista Web como el tipo del campo. Este tipo indica que el valor contenido en este campo es una URL.

../_images/662.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/761.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/859.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-dereco en la capa ne_10m_airports y escoja Propiedades. Vaya a la pestaña Campos y clic en Calculadora de Campo.

../_images/958.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/1057.png
  1. Now that we have a much better looking Type field, you can go ahead and set the Edit Widget for type field to Hidden.
../_images/1199.png
  1. Use the Identify tool to verify that the attributes appear as expected.
../_images/1256.png
  1. Now let’s style our layer to be more visually appealing and informative. Right-click the ne_10m_airports layer and select Properties. Switch to the Style tab. Choose Categorized style and our virtual field Type as the Column. Click Classify.
../_images/1354.png
  1. You will see a different colored circle gets assigned to a differnt type of airport. For the purpose of this tutorial, we will restrict the map to civilian airports. Hold the Ctrl key and select all categories for military airports. Once selected, click Delete.
../_images/1453.png
  1. Apart from assigning a different color to the category, we can change the size of the symbol to visually help our users distinguish different type of airports. Right-click on a category and select Change size.
../_images/1550.png
  1. Set the Size value to 3 for the Large Airport category.
../_images/1646.png
  1. Similarly, set the Size to 2 for Mid Airport and 1 for Small Airport.
../_images/1743.png
  1. For a complete map, we also need to label each airport. Switch to the Labels tab in the Properties dialog. Select Show labels for this layer and choose iata_code as the value for Label with. We will also set Rendering option so that the labels only appear when the user is sufficiently zoomed in. Check Scale-based visibility under Label options. Enter 1 as the Minimum scale and 10000000 as the maximum scale. This setting will render the labels only after the user has zoomed in more than 1:10000000 scale and will be visible till 1:1 scale.
../_images/1843.png
  1. As we are using circles to depict the airports, we need to ensure that the labels don’t overlap with the circles. Go to the Placement tab in the Labels dialog and set the Placement to Cartographic. Select From symbol bounds as Distance offset from. Click OK.
../_images/1937.png
  1. Our map is now ready. This is a good time to save our work. Go to Project ‣ Save. Enter Airports as the name of the project.
../_images/2030.png
  1. Now we are ready to export our project to a web map. Install the qgis2web plugin by going to Plugins ‣ Manage and Install Plugin (See Uso de complementos for more details on installing plugins in QGIS). Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.
../_images/2154.png
  1. In the Export to web map dialog, check Add layers list in the bottom panel under the Appearance section. Also select ne_10m_airports: iata_code as the field for Label search. Check the Show popups on hover to allow display of info-windows on hover. We can also set a basemap so the users have more context when looking at the airports layer. Select OSM B&W to use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from either OpenLayers or Leaflet as the web mapping library. We will restrict this tutorial to use the OpenLayers library. Click Update Preview` to see how your exported map will look like. Before we do the actual export, we need to set the Export folder. You can select a folder of your choice and click Export.
../_images/2230.png
  1. Once the export is complete, the default browser for your computer will open and show the interactive web map.
../_images/2326.png
  1. Your web map is now ready for publishing.
../_images/2424.png
  1. The qgis2web plugin has many limitations and it cannot do everything that the powerful web mapping libraries OpenLayers and Leaflet can do. This process can act as the starting point in your web mapping process and save you valuable time by creating a basic template from which you can further customize the web map. To highlight the fact that the output created from this process can be readily changed to suit your requirement - we will make a simple change to the web map to zoom to a particular airport when the user initially loads the map. On your computer, go to the folder where the web map was exported. Locate the resources folder and open qgis2web.js file in a text editor.
../_images/2522.png
  1. Locate the line where the map.getView().fit() function is called and add the following code after that. This new line of code instructs the web browser to center the map on the coordinates of Paris. Save the changes to the qgis2web.js file.
map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2620.png
  1. Refresh your browser and see that the web map will load with Paris at the center. This is a trivial example, but you can see how you can use any function available in the OpenLayers or Leaflet libraries to customize the web map.
../_images/2720.png
  1. The exported map resides on your computer. While you can see it in action, it is not very useful since you cannot share it anyone. For others to be able to see the map, you need to upload it to a web server. While the upload process will vary on the type of server you have access to - a cheap and easy way to publish your map on the web would be to use any of the public cloud storage services. Amazon S3 is a popular storage service. You will need to sign up for an account and follow the instructions to create a bucket. Once a bucket is created, you can upload the contents of your exported folder to the bucket and set it to public. Here I created a bucket named qgis-tutorials and uploaded the contents of my exported folder to a sub-folder named qgis2web. You can access the resulting map at http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html
../_images/2818.png
  1. Similarly, Google also offers a cloud storage service called Google Cloud Storage. Once you have created an account and enable billing, you can create a bucket and upload objects to the bucket. I create a bucket and sub-folder similar to Amazon and set the folder to public. The resulting map can be viewed at https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html
../_images/2916.png
If you liked tutorials on this site and do check out spatialthoughts.com for more free resources.
comments powered by Disqus

This work is licensed under a Creative Commons Attribution 4.0 International License