D3js mapa España
Aprendiendo a trabajar con D3js implementando un mapa de España.
Dibujando un mapa de España con D3js
D3js es una herramienta muy potente para pintar mapas, puedes encontrar multitud de ejemplos de mapas, de Estados Unidos, Europa... pero y si nos hace falta mostrar información sobre España, tenemos que:
- Buscar información cartográfica fiable de este país.
- Ver a que nivel romper (región, provincias, municipios)
- Manipular el mapa para poder mostrar las Islas Canarias en el área de dibujo.
En esta serie de vídeos vamos a ver como trabajar con ésto.
Temario
1. Obteniendo mapas
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, podemos aplicar pequeñas transformaciones a mapas que encontremos en otros formatos.
Vamos a ver algunos sitios de los que extraer mapas y cómo.
2. Pintando el mapa
Ahora que tenemos los mapas en formato topojson, vamos a pintarlos en nuestro sitio web.
Lo que haremos:
- Cargaremos el mapa en nuestro proyecto, en este caso en formato topojson para ahorrar ancho de banda.
- Una vez que lo tengamos en cliente, lo convertiremos a formato geojson.
- Elegiremos una proyección, es decir: si queremos pintar el mapa en un plano, o simulando un globo terráqueo, etc...
- Lo pintamos.
- Y lo centraremos en nuestra área de dibujo.
3. Canarias existe - Proyecciones
Ya tenemos nuestro mapa, sólo hay un problema, y es que las Islas Canarias salen en su sitio real, nos vendría bien moverla para arriba como podíamos ver en los mapas que estaban colgados en el cole.
Para ello vamos a jugar con las proyecciones.
4. Open Esri
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.
¿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.