Cómo hacer un mapa web de afectados por el covid-19 con Leaflet

El covid-19 supone una amenaza para la salud pública de todo el mundo. Para el seguimiento e información de la pandemia se emplean mapas que muestran el avance de la enfermedad por regiones y países. Una forma habitual de representar esos datos es mediante círculos graduados cuyo radio es proporcional al número de casos. Mediante la librería Leaflet podemos crear un mapa de estas características de forma sencilla.

En este artículo veremos lo sencillo que es crear un mapa web de afectados por el covid-19 con Leaflet. Te lo explicamos desde el principio.

mapa web de afectados por el covid-19 con Leaflet

Primeros pasos: los datos

Como vimos en el artículo mapa del coronavirus en tiempo real y descarga de datos en QGIS disponemos de datos actualizados facilitados por la Universidad Johns Hopkins (JHU), Maryland, EE. UU.

Esos datos una vez que los tenemos en QGIS los podemos exportar a formato GeoJSON utilizando las propias herramientas de la aplicación. En el artículo como crear un mapa web en leaflet a partir de GeoJSON explicamos como convertir un archivo shp en GeoJSON. El archivo obtenido lo editamos con un editor de texto para añadirle el nombre de una variable y lo guardamos como archivo JavaScript.  En este caso lo hemos llamado covid.js y lo incorporamos al proyecto de la siguiente forma:

Leaflet es muy fácil de aprender y sencillo de utilizar. Para incorporarlo a nuestra aplicación solo tenemos que escribir las referencias a sus archivos css y js.

Para crear el mapa necesitamos un lugar en la página web que lo aloje. Para eso creamos un espacio de la siguiente forma:

Damos un estilo o lo que es lo mismo unas dimensiones a este id que hemos creado.

Estructura del código

Vamos a reunir lo que tenemos hasta el momento:

Como se puede ver no es más que una estructura HTML típica en que hemos añadido la librería Leaflet, creado un <div> y añadido el archivo con los datos: covid.js

Dibujando marcadores  circulares

Una vez que tenemos la estructura geneal del código estamos en disposición de construir nuestro mapa. Lo primero es realizar una instancia a la clase L.map de Leaflet. Esta clase es el corazón de la librería y la que nos permite definir las características del mapa como el centro, nivel de zoom inicial, etc…

Creado el mapa vamos a incorporar una capa base que contenga un mapa de OpenStretMap, lo que conseguimos mediante una instancia a L.tileLayer.

PointToLayer

Leaflet utiliza de forma nativa el formato geojson mediante la clase L.geoJSON

Esta clase dispone de varias opciones siendo una de las más utilizadas PointToLayer. Con esta opción podemos crear unos marcadores con forma de círculo al que se le pueden asignar diferentes estilos. En primer lugar definimos unas propiedades para estos marcadores como su color, color de relleno, opacidad…

A partir de estas características ya se pueden crear los marcadores mediante una instancia a la clase L.geoJSON, en donde se pasa como parámetro el nombre de la variable que contiene los datos de covid.js.

Representando los valores

La forma habitual de presentar los datos es mediante un círculo en que el radio se corresponde con los datos. En el ejemplo que estamos desarrollando vamos a establecer cuatro categorías. El radio de cada círculo se corresponderá con un intervalo en el número de afectados. Para realizar esta acción creamos una función que contenga los rangos de valores.

Como vemos en el código anterior hemos creado en primer lugar la función getRadius que define cuatro intervalos en el número de infectado y les asigna un valor para el radio. En este caso el valor del radio está comprendido entre 3 y 25. A continuación se define la función estilo_covid que toma el valor de la propiedad «Confirmed» del GeoJSON.

Además de la representación gráfica vamos a crear un popup que muestre los datos al hacer clic sobre el marcador de cada país.

Ahora solo tenemos que añadir estas opciones al mapa, para lo que modificamos la instancia a L.geoJSON que habíamos utilizado antes.

De esta manera tan sencilla hemos creado un mapa que representa el número de infectado por covid-19 en cada país.

Añadiendo una leyenda

El mapa que hemos creado hasta aquí no estaría completo sin una leyenda que indique la simbología de los marcadores utilizados en relación a los datos.

En Leaflet las leyendas se incorporar como un control. Por lo tanto debemos utilizar la clase L.control para definir la leyenda y su posición en el mapa.

Ahora se definen los símbolos de la leyenda.

Para que la leyenda se muestre correctamente hay que definir unos estilos. Para eso modificamos el <style> de nuestro HTML de la siguiente forma.

Título

Para finalizar incorporamos un título al mapa.

El resultado es el mapa siguiente:

Código completo

A continuación escribimos todo el código para facilitar su lectura.

Si quieres aprender a hacer más cosas como éstas, apúntate ya a nuestro curso online visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra 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 «Cómo hacer un mapa web de afectados por el covid-19 con Leaflet»

Deja un comentario