Cómo crear perfiles longitudinales en un visor web con Leaflet

Es habitual que en las actividades al aire libre como rutas ciclistas o de senderismo se acompañen los mapas con el recorrido de un perfil longitudinal que muestre el relieve del trayecto. Los dispositivos GPS facilitan la captura de datos para elaborar los mapas.

Muchas son las opciones para crear estos mapas en la web y una de las mejores es utilizar software libre como Leaflet.

En el catálogo de plugins de esta librería podemos encontrar uno que nos permite crear el perfil longitudinal de una ruta. Se trata del plugin Leaflet.Elevation. En esta entrada vamos a ver cómo crear perfiles longitudinales en un visor web mapping, con la librería Leaflet.

Perfiles longitudinales en un visor web

El plugin Leaflet.Elevation

Este complemento de Leaflet crea un control con un perfil, de tal forma que cuando nos movemos sobre él nos muestra la ubicación sobre el recorrido del mapa. El plugin inicial se había quedado obsoleto y nuevas actualizaciones han permitido su renovación.

Tendremos que descargar los archivos del plugin e insertarlos en el código junto con la librería de leaflet.

Podemos utilizarlo tanto para rutas en formato gpx como para GeoJSON y veremos un ejemplo de cada. Tomaremos como dato la Ruta de la Reconquista que circula por el parque nacional de los Picos de Europa.

Como vemos en el párrafo anterior además de los archivos CSS y JS de leflet-elevation y Leaflet hemos incorporado la referencia  a D3. Con la libreria D3.js se pueden crear gráficos e infografías a partir de datos y es la herramienta que utiliza el complemento Leaflet.Elevation para crear el perfil longitudinal.

En caso de utilizar los datos a partir de un archivo de tipo gpx necesitamos también le complemento de Leaflet: Leaflet-gpx por lo que añadiremos a las referencias anteriores.

Para incorporar el perfil a nuestra página creamos un div para alojarlo.

Como puedes observar además del id habitual para Leaflet, creamos otro id que llamamos elevation-div.

Como mapa de fondo utilizamos opentopomap, por proporcionarnos un mapa topográfico que es acorde con la aplicación que estamos desarrollando.

Ejemplo para archivo de datos gpx

Como hemos indicado vamos a utilizar una ruta para senderistas en formato gpx. Se trata de la ruta de la reconquista, que discurre por el corazón del Parque Nacional de los Picos de Europa.

El primer paso es crear una instancia al plugin y elegir sus opciones. El plugin Leaflet-Elevation nos crea un control de Leaflet que contendrá el perfil longitudinal.

En el código precedente podemos vera algunas opciones del plugin. Podemos seleccionar la ubicación del control en el mapa con «position«. El color del perfil lo seleccionamos con la opción «theme«. Si en la opción «useHeightIndicator» utilizamos el valor false nos dibujará un marcador en el punto del recorrido en que nos encontremos. El perfil longitudinal puede estar  minimizado, mostrándose solo un icono, que al pasar el ratón sobre el se despliega. Eso se controla con la opción «collapsed«.

Al tratarse de un archivo en formato gpx tenemos que utilizar el plugin de Leaflet que lo maneja. Hacemos una instancia a L.GPX y le indicamos la url a las imágenes de los marcadores, si queremos que nos marque el inicio y el final de la ruta.

Por ultimo añadimos el control y la ruta al mapa.

En las ultimas líneas del código estamos utilizando el método getBounds para que nos localice la situación del recorrido y nos realice una vista sobre el mismo.

El resultado lo vemos a continuación. Si recorres el perfil longitudinal con el cursor del ratón la posición se muestra automáticamente sobre la ruta y viceversa.

Ejemplo para geoJSON

Si los datos de la ruta los tenemos en geoJSON el código es todavía más sencillo que en el caso anterior. Lo primero es indicar la fuente de datos.

Proporcionamos un centro y nivel de zoom al mapa.

Creamos el control con sus opciones igual que hicimos para el caso de los datos gpx.

Definimos el estilo que tendrá la capa geojson o lo que es lo mismo el color y propiedades de la línea que  marca la ruta sobre el mapa.

Creamos la capa geojson y la incorporamos al mapa.

El elemento clave reside en onEachFeature, donde le estamos indicando que nos enlace el control con los datos del geojson y aplique las opciones que indicamos al crear el control con el perfil.

A continuación se incluye el mapa con la ruta en formato geojson.

Los ejemplos de este artículo para crear perfiles longitudinales en un visor web con la librería Leaflet, puedes encontrarlos al completo aquí.

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

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

Deja un comentario