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.
Procedmiento
Abra QGIS y vaya a . Navegue a la ubicación del archivo descargado y seleccione ne_10m_airports.zip. Clic en Aceptar.
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.
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.
En el diálogo Editar Propiedades del Widget, escoja Hidden como el tipo. Clic en Aceptar.
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.
Seleccione Vista Web como el tipo del campo. Este tipo indica que el valor contenido en este campo es una URL.
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.
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.
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.
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')
- Now that we have a much better looking
Type field, you can go ahead and
set the Edit Widget for type field to Hidden.
- Use the Identify tool to verify that the attributes appear as
expected.
- 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.
- 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.
- 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.
- Set the Size value to
3 for the Large Airport category.
- Similarly, set the Size to
2 for Mid Airport and 1
for Small Airport.
- 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.
- 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.
- Our map is now ready. This is a good time to save our work. Go to
. Enter
Airports as the name of the
project.
- Now we are ready to export our project to a web map. Install the
qgis2web plugin by going to (See Uso de complementos for more details on installing
plugins in QGIS). Once the plugin is installed, go to .
- 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.
- Once the export is complete, the default browser for your computer will
open and show the interactive web map.
- Your web map is now ready for publishing.
- 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.
- 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]))
- 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.
- 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
- 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
QGIS Tutorials and Tips