Lemoncode TV

Cómo convertir un mapa a GeoJSON o TopoJSon

No siempre nos van a venir los datos de los mapas tal cual para poder usarlos en D3js, a veces tendremos que convertirlos a otro formato, y/o simplificarlos, ya que pueden pesar mucho.

En este caso vamos a bajarnos el mapa de España por municipios del portal Open Data Esri.

Manos a la obra

Bajar mapa en GeoJson

Vamos a buscar el mapa de municipios de España, nos vamos al sitio de Open Data Esri

En la caja de búsqueda, tecleamos municipios.

Nos queremos bajar el mapa en formato GeoJson para ello nos vamos al botón de APIs y copiamos la URL de GeoService, al ponerla en el navegador nos descarga un fichero con el mapa en formato GeoJson.

Topojson + Simplificación

El fichero que nos bajamos es enorme, tiene mucho detalle, vamos a tratarlo de dos formas:

• Usamos una herramienta externa para simplificarlo.
• Lo convertimos a TopoJson.

Para ello nos vamos al sitio web mapShaper y cargamos el documento que justo acabamos de descargar.

En la parte derecha podemos ver una opción Simplify y ésta nos permite bajar el nivel de detalle del mapa (a fin de cuentas vamos a mostrarlo en pantalla, no lo vamos a imprimir), pinchamos en settings y le decimos que no elimine formas y vamos a bajar la calidad a un 16.4 %

Le damos a export y elegimos TopoJson

Fijate que se nos ha quedado en un fichero de 6 Mb.

Copiamos el fichero a la carpeta mapas, y nos ponemos manos a la obra a actualizar nuestro código.

Uso en aplicación

Vamos a cambiar el import

- const mapatopojson = require("./maps/comunidades_autonomas.json");
+ const mapatopojson = require("./maps/municipios.json");

Y vamos a indicarle en que agrupación debe mirar:

const mapageojson = topojson.feature(
  mapatopojson,
-  mapatopojson.objects.autonomous_regions
+  mapatopojson.objects.Municipios_IGN
);

Como vimos en el video anterior esto lo podemos sacar inspeccionando el contenido del fichero JSON del mapa.

Esta vez no nos hace modificar el evento de onClick porque coincide la propiedad NAMEUNIT que está en el JSON del mapa.

  .on("click", (m, d: any) => {
    alert(d.properties.NAMEUNIT);
  });

Con esto visualizamos un mapa de municipios y podemos interactuar con él.

¿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.