Mapas con JavaScript
Con un proyecto practico.
Durante el desarrollo de un proyecto, apareció la idea de utilizar un mapa interactivo del estado de Oaxaca con la intención de visualizar los datos estadísticos del sistema desarrollo a nivel de municipios. Ya que el proyecto se estaba desarrollando en ReactJs, se requería que el mapa interactivo fuese compatible con él, sin embargo, por razón de tiempo y esfuerzo, el concepto se desechó para el proyecto.
Uno cuantos meses después, decidí retomar la idea como proyecto personal; en el mapa se visualizarían los datos recolectados del Covid-19 en Oaxaca.
En lo primero en lo que trabaje, fue en la manera en la que se pudiera dibujar un mapa en pantalla con ayuda de JavaScript/ ReactJs, y el principal problema fue el cómo representar al menos las siluetas de los municipios de un estado que cuenta con 570, una tarea que, de hacerse manual, sería poco practica y tormentosa, por lo que mi investigación me llevo a descubrir los formatos en los que se almacena la información geográfica.
Shapefile
Se emplean varios tipos de archivos para almacenar datos de información geográfica tales como GeoJSON, TopoJSON y Shapefile.
Shapefile actualmente es el formato de datos vectorial más popular utilizado en los sistemas de información geográfica (SIG), se compone de tres a ocho archivos independientes. Cada uno de estos archivos almacena un tipo de información particular desde los elementos geométricos hasta los atributos geográficos, pasando por datos de proyección, metadatos, etc.
La descripción técnica de ESRI Shapefile se puede consultar en el siguiente enlace: https://support.esri.com/en/white-paper/279
Los principales archivos que componen un Shapefile son:
Shape (.shp). Almacena los datos geométricos del mapa como un conjunto de vértices. Actualmente, cada shapefile solo puede tener un tipo de elementos (puntos, líneas, áreas y multipuntos), y dependiendo del tipo de shapefile, también es posible almacenar datos como altura (PointZ) o mediciones (PointM) en los vértices.
dBase (.dbf). En los shapefiles, es posible asignar datos numéricos, de texto o de fecha a las entidades geométricas (atributos), esa información se almacena en una tabla en formato dBase.
Shape Index (.shx). Relaciona el número de formas (datos geométricos) con el número de registros de la tabla dBase (atributos).
El archivo shx almacena los cien primeros bytes del shp seguido de la posición del registro dentro del archivo (número del registro) y el valor del desplazamiento al byte inicial de ese registro existente en el shp. Por lo que, el shx vincula el número de registro, por desplazamiento con una comprobación de integridad recno, al inicio del registro shp.
Si se aplica una operación de ordenamiento en una tabla dBase y se guarda con los datos ordenados, al hacer la visualización de los datos, los atributos se aplicarán a formas diferentes a las que se habían asignado de forma inicial.
Es posible visualizar la información almacenada en un shapefile en un sitio web, tales como https://mapshaper.org/
Shapefile con los municipios de Oaxaca
Ahora que ya tenía en mente los formatos que emplearía para obtener los datos que requería para el proyecto, me di a la tarea de buscar un shapefile que contuviera únicamente los municipios del estado de Oaxaca. Después de algunos días descubrir este sitio web el cual contenía las siluetas de los municipios, además del nombre y el id de municipio provisto por el INEGI (Instituto Nacional de Estadística y Geografía).
Una copia de estos datos se encuentra en el siguiente repositorio. https://github.com/neomatrixcode/OaxacaSHP
Anychart
Entre las librerías que eran capaces de manipular información geográfica, me decante por Anychart ya que era sencilla de utilizar además de no requerir acceso a una API de pago. En el caso particular de esta librería no utiliza directamente shapefile, sino un formato similar a GeoJSON, por lo que primeramente me di a la tarea de hacer la conversión a GeoJSON utilizando el sitio mapshaper.org y posteriormente agregue las campos “INEGI_MUN” e “INE_MUN” para que tuviese versatilidad al trabajar con la librería, el archivo final se puede visualizar en el siguiente enlace.
Con los datos listos para ser visualizados, partí de un proyecto de muestra de la librería, en concreto de este ejemplo https://playground.anychart.com/gallery/src/Maps_in_Dashboard/States_of_United_States_Dashboard_with_MultiSelect
Datos COVID-19
Ahora, solo hace falta obtener los datos de los casos de COVID-19 registrados en Oaxaca, y organizados por municipios. Descubrí que el sitio datamexico.org ofrece una API gratuita para consultar los datos que necesitaba, además de ofrecer la posibilidad de personalizar los resultados con parámetros de consulta, por lo que lo agregue como la fuente de datos al proyecto en JavaScript.
'https://datamexico.org/api/data.jsonrecords?cube=gobmx_covid_stats_mun&drilldowns=Municipality&measures=Accum+Cases,Daily+Cases,AVG+7+Days+Accum+Cases,AVG+7+Days+Daily+Cases,Rate+Daily+Cases,Rate+Accum+Cases,Days+from+50+Cases&s=Daily%20New%20Cases&r=rollingMeanOption&locale=es&time=time.latest&State=20',
La librería Anychart, para relacionar los datos del archivo GeoJSON con los datos consumidos provistos por la API requiere la existencia de un campo ‘id’ en ambos; sin embargo, es posible determinar si un campo del mapa se utilizara como ID gracias al método geoIdField(). En nuestro caso, el campo utilizado como ID será el ‘CVEGEO’.
mapSeries.geoIdField('CVEGEO');Poniendo todo junto
En el instante que se carga la página en el navegador; se descargan los datos del API, se preprocesan para agregar el ‘id’ y se setean en la librería.
Posteriormente se cargan el Dashboard y se dibuja el mapa drawMap().
Dentro de la función drawMap(), se coloca entre otra cosas el título del mapa, además de designarse el mapa a mostrar.
Junto con el método listen(), el cual el cual estará a la escucha de los clics del mouse dentro del mapa para dotarlo de interactividad, por lo que se extraerá el ‘id’ del área o áreas geográficas dibujadas en pantalla y actualizara los datos mostrados en el Dashboard obtenidos desde el API.
