Lemoncode TV

D3js de dónde obtener un mapa

D3js nos ofrece una funcionalidad muy potente para dibujar mapas y poder interactuar con ellos, pero cuando nos ponemos manos a la obra nos damos cuenta de que nos hace falta.... pues eso, la fuente de mapas para poder pintarlo.

En estos años, esta área ha madurado mucho y es relativamente fácil encontrar mapas ya listos para usar en D3js y si no, podremos aplicar pequeñas transformaciones a mapas que encontremos en otros formatos.

Vamos a ver algunos sitios de los que extraer mapas y cómo.

Manos a la obra

Cuando queremos usar un mapa en D3js nos tenemos que ir al formato JSON que es el que mejor entiende JavaScript, normalmente las aplicaciones de este área trabajan con otros formatos, aquí tenemos varias alternativas:

• Podemos instalarnos aplicaciones de escritorio y aprender a manejarlas, ésto, salvo casos muy específicos, no suele hacer falta, podemos buscar alternativas.
• También podemos tirar de conversores online.
• Y por último podemos encontrar directamente gráficas en el formato adecuado.

Por otro lado cuando nos vamos al formato JSON, tenemos que D3js trabaja con GeoJson, un formato que guarda un conjunto de arcos para cada forma (ciudades, paises, ...).

Este formato pesa mucho y no es óptimo para enviarlo por la red, lo ideal es que lo almacenemos en servidor en formato TopoJson (en este formato los arcos frontera son compartidos por varias formas), y una vez que llega el fichero al cliente volvemos a convertirlo a GeoJson para pintarlo.

Veamos varias fuentes de mapas:

• En este proyecto de Github TopoJSon collection podéis encontrar un montón de mapas del mundo disponibles directamente en formato topoJSon:

  • Continentes.
  • Paises.

• Si estamos buscando mapas más detallados de una zona geográfica concreta, podemos buscar en fuentes locales del país con el que estemos trabajando, en el caso de España podríamos tirar de una institución pública como el instituto geográfico nacional.

• Aquí nos tendríamos que buscar un conversor sea online o de escritorio, ya que no nos da la información en formato GeoJson / TopoJson directamente.

• Una solución viene de la mano del proyecto de Martín Gonzalez que ha publicado una herramienta que se baja la información del instituto nacional de estadística y la convierte a formato topojson, en concreto nos genera las siguientes entradas:

  • Mapa por regiones.
  • Mapa por provincias.
  • Mapa por municipios.

Puedes directamente bajarte dichos mapas ya convertidos en formato TopoJson, o puedes clonarte sus proyectos, y ejecutando npm install te ejecutara como paso posterior a la instalación de los paquetes el proceso de descarga y conversión, dejandote dentro de la carpeta es los siguientes ficheros en formato TopoJson:

• autonomous_regions.json

• municipalities.json

• provinces.json

• Otra opción es tirar del sitio Open Data de Esri donde directamente nos ofrece una opción para bajar datos en formato GeoJson, en este caso tendrás que realizar alguna transformación que otra, lo veremos en uno de los vídeos de esta serie.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.