Apple Podcast (iTunes) | iVoox | Suscríbete al podcast

Cuando Google Maps anuncia cambios en su plataforma, siempre es buena excusa para lanzarse a probar nuevos métodos para crear mapas interactivos en la web o, incluso, en aplicaciones móviles.

Leaflet es una buena alternativa, descúbrela pulsando el play de más arriba.

Un ejemplo: La ciudad escondida

Es un ejercicio de unas horas para demostrar que con mapas se puede generar una narrativa visual que además interactúe con los gestos del usuario (en este caso el scroll).

Puedes visitar esta demo en este enlace, el código está en github dónde encontrarás más detalles técnicos.

Ejemplo de Leaflet

He trabajado con Leaflet en combinación con ES6 y Webpack. Porque a uno le gusta complicarse la vida aunque sea más de “backend” que de “frontend” :)

Faltan muchas cosas por hacer (no está revisado en todos los navegadores, precarga más intuitiva, etc), pero el objetivo está conseguido: Leaflet se relaciona muy bien con el DOM de una web y tiene similitudes en su comportamiento por capas, donde hasta un vídeo puede ser una “layer”.

La motivación viene del Leaflet Story Map del genial libro Data Visualization for All. Aunque, sinceramente, lo que me encantó fue descubrir que en Leaflet hay un método FlyTo para “volar por el mapa” y todo está construido para conseguir ese efecto.

Otro ejemplo: Mapa con carga de datos dinámicos

Más sencillo que el anterior es este mapa donde se visualizan los árboles singulares de Castilla y León (fuente de datos).

El proceso de construcción de este mapa puedes verlo en este vídeo:

Suscríbete a mi canal de YouTube

Como ves la toma de datos se hace a través de un fichero JSON con una especificación concreta: GeoJson. Tiene soporte nativo dentro de la librería Leaflet, que, por cierto, no tiene dependencias de librerías externas.

Leaflet es una alternativa gratuita a Google Maps

Salvo que tu trabajo con mapas sea con cuestiones de extremada precisión o tengas ya una dependencia creada de Google Maps, probablemente puedas añadir Leaflet a tu stack.

Con esta librería tendrás todos los efectos de navegación y visuales a los que estás acostumbrado: drag con inercia, scroll convertido en zoom, doble click y pinch convertidos en zoom, cambio de capa de la tesela del mapa…

Leaflet es una alternativa a Google Maps

La presencia es muy limpia y es sencillo cambiar los marcadores por otros con un estilo más acorde con tu web, así como conseguir modificar la apariencia de los controles.

Podrás encontrar gran cantidad de tile layers para el diseño del mapa en esta web. Incluso los hay vectoriales.

¿Quieres saber más sobre desarrollo web?
Entra a formar parte del grupo más selecto. Suscríbete a La Selecta

Otras alternativas a Google Maps

Las características de la plataforma de Google son bestiales, pero con el cambio, quizás te apetezca probar Leaflet, o alguna otra:

Plugins recomendados para Leaflet

Algunos ejemplos de las más de 200 opciones de ampliación de Leaflet:

En el feedback nos preguntaban por el micrófono que empleo para grabar el podcast, es el Samson Meteor.

Un nuevo episodio y una nueva oportunidad de dejarnos una reseña 5 estrellas en itunes, también conocido como Apple Podcast  ¡Gracias!

Nos encontrarás como siempre en twitter como @webreactiva y en el canal de telegram  t.me/webreactiva.

Escrito por Dani

Soy programador web freelance. Especialista en frameworks basados en PHP como Drupal, aunque también me gusta trabajar con microframeworks en varios lenguajes y, por supuesto, tengo a Javascript de gran aliado. aquí.
comments powered by Disqus