Filtrando datos geográficos en formato GeoJSON con Leaflet

El formato para datos geográficos GeoJSON está ámpliamente extendido por su sencillez y versatilidad. GeoJSON es muy utilizado para la publicación de datos en la web porque es soportado de forma nativa por muchas librerías JavaScript como Leaflet u OpenLayers.

En concreto, Leaflet dispone de varios métodos para trabajar con GeoJSON. En este artículo vamos a tratar algunas de las opciones de las que dispone Leaflet para trabajar con GeoJSON, centrándonos especialmente en la que nos permite realizar el filtrado de datos.

GeoJSON con Leaflet

GeoJSON y Leaflet

GeoJSON admite los siguientes tipos de geometría: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon y GeometryCollection. Los features en GeoJSON contienen un objeto Geometry y propiedades adicionales, y una FeatureCollection contiene una lista de features. Por su parte, Leaflet es una librería JavaScript de código abierto que se utiliza para publicar mapas en la web. Es especialmente eficiente para trabajar con GeoJSON. Las opciones de Leaflet para GeoJSON son las siguientes:

  • pointToLayer, es la opción utilizada para trabajar con puntos. Nos permite utilizar marcadores y trabajar con ellos
  • style, es la función que se encarga de asignar los estilos de visualización de la capa.
  • onEachFeature, es una función que llama a cada una de las características creadas en el mapa y se emplea para adjuntar eventos o ventanas emergentes.
  • filter, es la opción que nos permite seleccionar un elemento geográfico a partir de alguna de sus características.
  • coordsToLatLng es una función que se utiliza para convertir coordenadas GeoJSON a LatLngs.

Leaflet en acción

Una vez que hemos repasado las opciones de Leaflet para trabajar con GeoJSON vamos a escribir un ejemplo que muestra su uso. Utilizaremos  un archivo que contiene las coordenadas geográficas de los principales monumentos de la ciudad de Salamanca, junto con algunas de sus características, como el nombre, su estilo y el  siglo de construcción. Por tanto, lo primero que hay que hacer es incluir la referencia al GeoJSON:

Creamos el mapa de Leaflet y añadimos una capa de teselas de OSM que nos sirva de base para el mapa:

Cuando el mapa está configurado podemos empezar a trabajar con nuestra capa GeoJSON.

Asignando estilos

Definimos un estilo personalizado para los marcadores. En primer lugar asignamos las características de los marcadores que van a representar los diferentes monumentos de la ciudad de Salamanca:

Como queremos que cada estilo artístico esté representado por un color necesitamos una función que asigne colores a las propiedades del GeoJSON:

A continuación definimos un estilo:

Como se puede ver, hemos creado la función estilo_monumentos() que contiene la definición de un marcador. En esta ocasión diseñamos un marcador con forma de círculo con las características de radio, opacidad… definidas. El color que tendrá el marcador será el resultado de aplicar la función colorPuntos().

Ventanas emergentes

Para crear una ventana emergente que muestre los datos del punto seleccionado por el usuario construimos una nueva función:

La función popup_monumentos() utiliza el método .bindPopup para crear una tabla html que contendrá los elementos de cada una de los features del archivo GeoJSON.

L.geoJSON

Ahora que ya tenemos definidos los marcadores que vamos a utilizar, su estilo y hemos diseñado la ventana emergente, creamos la capa a partir de los datos GeoJSON. Se realiza mediante una instancia a L.geoJSON en que se pasan como opciones las funciones creadas anteriormente.

El mapa que obtenemos es el siguiente:

Filtrando los datos GeoJSON

El filtrado de los datos es una de las operaciones más frecuentes en las aplicaciones web mapping. El usuario necesita poder interactuar con el mapa para seleccionar los datos según sus categorías. La opción filter de L.geoJSON nos permite realizar esta tarea fácilmente.

Para realizar la selección creamos un formulario que contendrá las opciones que deseamos elegir. El elemento principal de ese formulario es la función estiloSelect(), que se dispara cuando se realiza un evento onchange; es decir, cada vez que el usuario seleccione una opción se disparará la función:

La función estiloSelect() es la que se encarga ahora de crear la capa y añadirla al mapa. Siguiendo con el ejemplo anterior diseñamos una función que filtre los datos según el estilo de cada monumento:

Como vemos la función filter utiliza una condición if-else. Cuando el usuario selecciona un estilo artístico la función retorna la capa con los valores correspondientes, en el caso en que el usuario selecciona el valor «TODOS» la función devuelve todos los marcadores.

Puedes ver el mapa a continuación.

Código completo:

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

1 comentario en “Filtrando datos geográficos en formato GeoJSON con Leaflet”

Deja un comentario