Desde Leaflet.js a los Mapas Vectoriales con Mapbox Gl JS

Tiempo de lectura: 7 minutos

Una de las cosas que más me gusta desarrollar en el front end son visualizaciones con mapas. Llevar datos a un mapa, ya sean poblacionales, climáticos, o cualquier otro dato que pueda adquirir sentido en el espacio, te da esa sensación de que los datos representan algo real, cercano. De pronto te empiezas a dar cuenta de que los datos significan algo en el lugar en que vives y logras verlos en una perspectiva que una tabla no te entrega.

Por eso, se me ocurrió contar un poco de mi historia usando herramientas para visualización, por si alguien está comenzando y puede servir como referencia.

En un comienzo, partí usando Google Maps para hacer mapas interactivos. Pero eso no duró mucho principalmente por mis pocas ganas de depender de los servicios de Google y mi amor por el open source. Así fue como conocí OpenStreetMap y su iniciativa por crear mapas colaborativos del mundo y con licencias libres de uso. Paf, me enamoré. Ya sabía de dónde venían los mapas que quería usar.

¿Cómo usar OpenStreetMap?

La iniciativa OpenStreetMap genera mapas usando información entregada colaborativamente por voluntarios. Esta información es ofrecida al público a través de un servicio que provee «tiles» o baldosas. Estos tiles son imágenes cuadradas de una sección específica del mundo, a un nivel de zoom específico. Cada una de estas imágenes se divide en 4 al siguiente nivel de zoom. Al hacer zoom en un mapa, se cargan las imágenes correspondientes al nivel de zoom y al espacio visible en la pantalla.

Para trabajar con mapas de OSM es conveniente usar una biblioteca que facilita la construcción del mapa y automatiza la obtención de los tiles. En mi caso, la biblioteca que usé durante mucho tiempo fue Leaflet.js, proyecto originalmente desarrollado por Vladimir Agafonkin, quien luego se unió a la empresa Mapbox que acogió el proyecto y lo potenció con un equipo dedicado.

Leaflet ha sido durante años una de las mejores bibliotecas para desarrollar aplicaciones web que funcionen con mapas. Tiene todas las características que uno pudiera esperar, es ligera y tiene un desempeño impecable. Ya sea como biblioteca JavaScript pura, o en las múltiples adaptaciones a frameworks como Angular o Vue.js.

Para usar bibliotecas como Leaflet, los mapas se obtienen de un Proveedor. Este proveedor es una fuente desde la que se sirven los mapas en un formato específico para que las aplicaciones cliente puedan consultarlas. Uno de los proveedores, que puede ser utilizado gratuitamente, es el mismo OpenStreetMap. Pero al ser una fuente pública, puede que la velocidad de carga o el desempeño no sean los más adecuados para aplicaciones del mundo real. Así fue como llegué a la empresa Mapbox.

Mapbox durante años se ha dedicado a brindar soluciones relacionadas con información geográfica y mapas y son uno de los proveedores de tiles que uno puede utilizar en Leaflet. Es mucho más rápido que usar OpenStreetMap solo y además tiene mapas con muchos diseños distintos y casos como imágenes satelitales, mapas de caminos, rutas de bicicletas, entre otros.

Así estuve usando la dupla Leaflet + Mapbox por mucho tiempo, hasta este año. Además me suscribí al blog de Mapbox, donde muestran herramientas que van desarrollando y casos de uso reales en los que se aplican.

Mapas Vectoriales

Así fue como empecé a ver varias veces el concepto de mapa vectorial. Para entender el concepto, primero expliquemos lo que es una imagen raster. Una imagen raster es una matriz de puntos. Es decir, una cuadrícula de píxeles. Por ejemplo, una imagen de 256×256 píxeles representará 65536 puntos distintos, independientemente del nivel de zoom al que se la vea.

Una imagen vectorial, en contraposición, es una imagen que se representa no como una matriz, sino como una colección de definiciones de geometrías. Por ejemplo, mi imagen podría ser una lista de instrucciones como «dibuja una línea desde X1, Y1 al punto X2, Y2». Como la imagen no viene generada de antemano, se dibuja cada vez que se necesita. Si hago un zoom, la imagen se redibuja por lo que no llegamos a ver «los píxeles» que forman la imagen. Virtualmente tiene resolución infinita.

¿Qué ventajas tiene un mapa vectorial frente a un mapa raster?

Los mapas vectoriales siguen funcionando por baldosas (tiles). Pero estos tiles ya no son imágenes raster con píxeles fijos, sino que son colecciones de vectores.

  • Tamaño: Los vectores son más ligeros que las imágenes raster, por lo que pueden cargar más rápido, ahorrar espacio, cargar rápido y generar mapas de altísima resolución.
  • Diseño: Como el mapa se dibuja en el cliente, se pueden cambiar parámetros de cómo se dibujan estos mapas. Esto hace que se puedan personalizar de forma mucho más flexible que imágenes que ya fueron dibujadas de antemano.

Todo esto se hace posible gracias a las mejoras en los navegadores que han permitido delegar más trabajo a los clientes.

¿Cómo usar mapas vectoriales?

Leaflet permite usar mapas vectoriales (más información sobre eso aquí). Pero como estaba tan metido con el blog de Mapbox, decidí probar una de las herramientas que venían desarrollando hace tiempo: Mapbox Gl JS.

¿Qué tal fue la experiencia con Mapbox Gl JS?

Cuento corto: me enamoré. El cambio se nota desde el comienzo.

La lógica de mostrar un mapa es muy similar a como se hace con Leaflet. Se crea un div, se le asocia un objeto JS que le inyecta un canvas y desde JavaScript se van añadiendo capas y configuraciones. Pero el resultado visual ya nota sus mejorías. Los pequeños detalles como los bordes o las letras se ven mucho más claros. Además el mismo mapa va mostrando dinámicamente ciertos nombres o etiquetas según el espacio disponible en la pantalla. También se pueden hacer efectos en 3D. Si se mantiene presionado CTRL y se arrastra el click, podremos ver el mapa inclinado gracias a dos variables nuevas que los mapas raster no tienen: el bearing y el pitch. El bearing representa la rotación que tiene nuestro mapa. Por ejemplo si queremos que el norte se vea abajo y el sur arriba, podemos ajustarlo mediante el bearing. El pitch, por otra parte, es la inclinación del plano que se ve con respecto a la cámara. Gracias a eso podemos hacer que el mapa se vea inclinado, lo que ya lo hace más llamativo y permite mostrar datos en la distancia.

El mapa de ejemplo de Mapbox en vista normal.
El mismo mapa anterior pero con más variables modificadas.

Para personalizar los mapas, puedes usar Mapbox Studio y crear configuraciones personalizadas para modificar la visualización completa.

Otra cosa que permite hacer Mapbox es añadir capas con información adicional. En este caso, lo que a mí me interesa es añadir datos en formato GeoJson ya que trabajo con datos así para un proyecto que llevo desarrollando un buen tiempo. En este caso, este mapa es parte de una interfaz que estoy desarrollando para editar datos de las comunas de la Región del Maule, donde visualizo el contorno de la geometría y puedo modificar el centro del lugar.

«En Curepto está el poder» dicen por ahí.

Y las visualizaciones de datos no se limitan sólo a las 2 dimensiones. Mapbox Gl también permite diseñar mapas con información en 3D como altura de edificios o mapas de interiores.

Mapbox GL JS Examples

¿Cuánto cuesta?

Mapbox como proveedor siempre se ha destacado por tener precios muy al alcance de desarrolladores. Para Mapbox GL cambiaron su modelo de cobros. Antiguamente, por los mapas basados en tiles se contaba cada tile cargado. Ahora se cobra por carga de mapa, lo que hace mucho más controlable el gasto e incluso lo reduce bastante. Además tiene un umbral de 50.000 cargas mensuales gratis. Desde ahí se comienza a cobrar propocionalmente a la cantidad de cargas. Es más, tienen un calculador en su página para ayudarte a estimar gastos.

Ahora, si no quieres depender de una empresa, como toda esta tecnología es Open Source (❤️), puedes crear tu propio servidor con información de mapas usando alguna herramienta como OpenMapTiles. Yo aún no lo he hecho pero es bueno saber que existen estas opciones.

¿Hasta dónde se puede llegar?

Hasta ahora, he visto un montón de posibilidades con los mapas vectoriales. Incluso en Mapbox están desarrollando APIs de geocodificación (para encontrar direcciones en un mapa) y direcciones (para recibir instrucciones de cómo llegar a un lugar). Así que el límite lo vamos a poner nosotros como desarrolladores. ¿Qué datos cambiarán la perspectiva de nuestros usuarios al estar dispuestos en el espacio que ocupan en el mundo real? ¿Qué podemos entender mejor de nuestra ciudad con mejores visualizaciones? ¿Cómo optimizamos el uso de los ríos en períodos de sequía en este país donde el agua es enfermizamente privada (#YoAprueboUnaNuevaConstitución)? ¿Cómo podemos entender la pobreza como un problema geográfico? ¿Cómo podemos entender mejor el arte urbano?

Podría seguir con un montón de preguntas que se podrían resolver con mejores visualizaciones. Definitivamente hay mucho que se puede hacer, y Mapbox GL JS es una de las herramientas más potentes que tenemos a nuestra disposición para abordar estos problemas.

Les dejo una visualización en tiempo real que desarrollaron los miembros de Mapbox China donde se puede visualizar el avance en tiempo real del Coronavirus.

Visualizing the progression of the 2019-nCoV outbreak

Post Data: ¿Cómo implementar?

Este artículo escapó un poco de lo técnico. Mi intención era más bien contar una historia. Muchas veces nos hace bien reflexionar sobre las distintas herramientas que hemos ido adoptando en nuestra carrera de desarrolladores y ver a qué nuevas posibilidades nos hemos acercado.

Pero obviamente lo que importa acá es desarrollar, así que les dejo algunas referencias para que empiecen.

  • Si van a usar Mapbox como proveedor de tiles, primero deben crearse una cuenta y crear un tokene en Mapbox.com.
  • Si quieren trabajar en JavaScript puro, pueden partir con la sección de ejemplos de Mapbox. Pueden revisarlos aquí.
  • Yo desarrollo principalmente con Vue.js (Nuxt.js), así que si les interesa hacer lo mismo pueden usar este módulo. He ido resolviendo algunos errores y ya tengo varias cosas funcionando, así que pueden dejar preguntas en los comentarios si también quieren probarlo.
  • Si trabajan con Flutter, hay un módulo no oficial de Mapbox GL que pueden encontrar aquí. Yo aún no lo he probado, pero pronto lo haré y podré contar más.
  • Para otros frameworks imagino que también hay módulos, pero ahí ya les toca entretenerse buscando.

Con eso termina este artículo. Los invito a comentar si han tenido experiencias con mapas u otras tecnologías similares. ¡También quedan cordialmente invitados a participar de las actividades de MauleDevs como nuestros meetups!

¡Hasta la próxima!

También te podría gustar...