Mapas Web Leaflet con qgis2leaf

Advertencia

El complemento qgis2leaf ya no está en desarrollo activo. La funcionalidad de este complemento está incorporada en un nuevo complemento llamado qgis2web.

Vea el tutorial Mapeo web con QGIS2Web para una versión actualizada de este tutorial.

Leaflet es una popular librería Javascript de código abierto para construir aplicaciones de mapeo web. El complemento qgis2leaf provee una forma simple de exportar su mapa QGIS a un mapa web funcional basado en leaflet. Este complemento es una manera útil de iniciarse en el mapeo web y crear un mapa web interactivo a partir de sus capas estáticas de datos SIG.

Vista general de la tarea

Crearemos un mapa web leaflet de los aeropuertos del mundo.

Otras habilidades que aprenderá

• Usar la sentencia SQL CASE en la Calculadora de Campo para crear nuevos valores de campo basados en diferentes condiciones.

• Localizar y usar íconos SVG personalizados en QGIS.

Obtener los datos

Usaremos el conjunto de datos Aeropuertos de Natural Earth.

Descarga el archivo shape Aeropuertos.

Fuente de Datos [NATURALEARTH]

Procedimiento

1. Instale el complemento qgis2leaf yendo a Complementos ‣ Administrar e Instalar Complemento. Note que este complemento está actualmente marcado como experimental, por lo que necesitará marcar Mostrar también complementos experimentales en la Configuración de Complemento. (Vea Uso de Complementos para más detalles sobre la instalación de complementos en QGIS)

2. Descomprima el archivo ne_10m_airports.zip descargado. Abra QGIS y vaya a Capa ‣ Agregar Capa Vectorial. Explore a la ubicación donde los archivos fueron extraídos y seleccione ne_10m_airports.shp. Clic en Aceptar.

3. Una vez que la capa ne_10m_airports esté cargada, use la herramienta Identificar para hacer clic en cualquier entidad y mirar los atributos. Creará un mapa de aeropuerto donde clasificaremos los aeropuertos en 3 categorías. El atributo type será útil cuando se clasifiquen las entidades.

4. Clic-derecho a la capa ne_10m_airports y seleccione Abrir Tabla de Atributo.

5. En el diálogo de la tabla de atributo, clic el botón Alterne la Edición. Una vez que la capa esté en modo edición, clic el botón Abrir Calculadora de Campo.

6. Queremos crear un nuevo atributo llamado type_code donde le damos un valor de 3 a los principales aeropuertos, un valor de 2 a los aeropuertos de tamaño medio y un valor de 1 a todos los otros. Podemos usar la sentencia CASE y escribir una expresión que revisará el valor del atributo type y creará una atributo type_code basado en la condición. Marque la caja Crear un nuevo campo e ingrese type_code como el Nombre del campo de salida. Seleccione Número completo (entero) como el Tipo de campo de salida. En la ventana Expresión, ingrese el siguiente texto.

CASE  WHEN "type" LIKE '%major%'  THEN 3
 WHEN "type" LIKE '%mid%' THEN 2
 ELSE 1
END

7. De vuelta en la ventana Tabla de Atributo, verá una nueva columna al final. Verifique que su expresión funcionó correctamente y clic el botón Cambiar Edición para guardar los cambios.

8. Ahora le daremos estilo a la capa aeropuertos usando el atributo type_code recientemente creado. Clic-derecho la capa ne_10m_airports y seleccione Propiedades.

9. Seleccione la pestaña Estilo en el diálogo Propiedades de la Capa. Seleccione el estilo Categorizado de el menú desplegable y elija type_code como la Columna. Escoja una rampa de color de su elección y clic en Classificar. Clic en Aceptar para volver a la ventana principal QGIS.

10. Aquí verá un mapa de aeropuerto con estilo agradable. Exportemos esto para crear un mapa web interactivo. Vaya a Web ‣ qgis2leaf ‣ Exporta un Proyecto QGIS a un mapa web leaflet funcionando.

11. En el diálogo QGIS 2 Leaflet, clic en Obtener Capas para obtener la lista refrescada de capas. Seleccione la opción Pantalla completa para tener un mapa web de pantalla completa. Elija extensión de la capa como la Extensión del mapa exportado. Elija una Carpeta de salida del proyecto en su sistema donde el complemento escribirá los archivos de salida. Clic en Aceptar.

12. Una vez finalice el proceso de exportación, ubique la carpeta de salida en su disco. Abra el archivo index.html en un navegador. Verá un mapa web interactivo que es una réplica del mapa QGIS. Puede acercarse y desplazar el mapa y también hacer clic en cualquier entidad para obtener una ventana emergente con información de atributo. Puede copiar los contenidos de esta carpeta a un servidor web para tener un mapa web con todas las funciones.

13. Ahora exploraremos algunas características avanzadas de este complemento que nos permitirá personalizar más el mapa. Si lo notó, la ventana emergente contenía todos los atributos de la entidad. Algunos de los atributos no son muy útiles y la ventana emergente en general se ve fea. Podemos reemplazar la venta emergente predeterminada con nuestro HTML personalizado para hacerlo mucho mejor. Esto se logra agregando el HTML personalizado en una columna llamada html_exp. Clic-derecho la capa ne_10m_airports y seleccione Abrir Tabla de Atributos.

14. En el diálogo de la tabla de atributo, clic el botón Alterne la Edición. Una vez que la capa esté en modo edición, clic el botón Abrir Calculadora de Campo.

15. Marque la casilla Crear un nuevo campo e ingrese html_exp como el Nombre de campo salida. Elija Texto (cadena) como el Tipo de campo salida. Como estaremos creando una larga cadena HTML, elija 200 como el Ancho de campo salida. Ingrese la siguiente expresión en el área Expresión. La expresión de apariencia compleja simplemente define una tabla HTML y substituye valores de celda desde atributos iata_code, name y type. Marque Previsualizar salida para asegurar que la expresión está correcta.

concat('<h3>', "iata_code", '</h3><table>', '<tr><td>Airport Name: <b> ',
"name", '</b></td></tr><tr><td>Category: <b> ', "type",
'</b></td></tr></table>')

Nota

El formato de archivo shape puede contener un máximo de 254 caracteres en un campo. Si quiere almacenar texto más largo en el campo, elija otro formato.

16. De vuelta en la ventana Tabla de Atributo, verá una nueva columna al final. Verifique que su expresión funcionó correctamente y clic el botón Cambiar Edición para guardar los cambios.

17. Ahora exportemos de nuevo el mapa usando Web ‣ qgis2leaf ‣ Exporta un Proyecto QGIS a un mapa web leaflet funcional.

18. Elija las opciones como está abajo.

19. Vaya a la carpeta de salida una vez que el proceso de exportación finalice. Tendrá una subcarpeta con la marque de tiempo presente. Localice el archivo index.html dentro y ábralo en un navegador. Clic en cualquier objeto y mire en la ventana emergente. Notará que se ve bastante más limpio e informativo.

20. Otra funcionalidad útil del complemento qgis2leaf es la habilidad para especificar un icono personalizado para usar con el mapa web. Esto se logra especificando la ruta del icono personalizado en un campo llamado icon_exp. Crearemos una nueva capa que contiene sólo los aeropuertos principales y daremos estilo usando un icono SVG personalizado. Localice la herramienta Seleccionar objetos usando una expresión de la barra de herramientas.

21. Ingrese la expresión de abajo y presione Seleccionar para seleccionar todos los aeropuertos principales.

"type_code" = 3

22. Clic-derecho a los aeropuertos ne_10m_airports y seleccione Guardar Selección Como….

23. En el diálogo Guardar capa vectorial como…, nombre el archivo de salida como major_airports.shp. Marque Añadir archivo guardado al mapa y clic en Aceptar.

24. Una vez que esté cargada la capa major_airports en QGIS, haga clic-derecho en ella y seleccione Abrir Tabla de Atributos.

25. En el diálogo de la tabla de atributo, clic el botón Alterne la Edición. Una vez que la capa esté en modo edición, clic el botón Abrir Calculadora de Campo.

26. En el diálogo Calculadora de Campo, ingrese icon_exp como el Nombre de campo salida. Hágalo de tipo Texto (cadena). En el área Expresión, ingrese la siguiente expresión.

'airport.svg'

27. Guarde sus ediciones haciendo clic en el botón Conmutar Edición en la Tabla de Atributos.

28. Abra el complemento qgis2leaf desde Web ‣ qgis2leaf ‣ Exportar un Proyecto QGIS a un mapa web funcional leaflet. Clic en el botón Obtener Capas para buscar ambas capas desde QGIS. Hay varias capas teselas prefabricadas disponibles como mapas base. En este mapa, podemos intentar algo diferente y cargar Stamen Watercolor como el Mapa base. Clic en Aceptar.

29. Si recuerda, especificamos airport.svg como el icono para los aeropuertos. Necesitamos agregar el icono manualmente al directorio salida. QGIS viene con una gran colección de iconos. En Windows, estos iconos están ubicados en C: ‣ OSGEO4W64 ‣ apps ‣ qgis ‣ svg. La ruta puede diferir dependiendo de su plataforma y tipo de instalación. Localice ese directorio y elija un icono de su gusto. Para nuestro mapa, podemos intentar el icono amenity=airport.svg localizado bajo la categoría transport.

30. Copie y pegue este icono en el directorio salida que había especificado cuando exportó el mapa. Renómbrelo como airport.svg.

31. Ahora abra el archivo index.html localizado en la carpeta. Verá un hermoso mapa base con nuestro iconos personalizados para los aeropuertos principales. También notará el panel de capa en la esquina superior derecha que tien un contro de visualización de capa para ambas capas.

Espero que este tutorial le dé una ventaja inicial para crear mapas web. Abajo está el mapa interactivo en vivo creado para este tutorial.

---

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