Creando marcadores animados con Leaflet (SVG, GIFs y Font Awesome)

Leaflet es una excelente librería JavaScript empleada para publicar mapas elegantes, con un “aire” moderno de forma rápida y eficaz. Pero además es capaz de integrar recursos para hacer los mapas más vistosos buscando llamar la atención del usuario. Por ejemplo con Leaflet podemos animar los marcadores.

En este blog ya tratamos anteriormente cómo insertar iconos de bootstrap en Leaflet, una de cuyas opciones es la de hacer girar al marcador. Ahora nos centraremos en crear animaciones utilizando imágenes SVG, GIF y con Font Awesome.

marcadores animados con Leaflet

Insertando SVG en Leaflet

SVG es un formato libre de gran implementación, desarrollado y mantenido por W3C. SVG (Gráficos Vectoriales Escalable) es un uno de los formatos GIS vectoriales para gráficos. Ya que estamos en el mundo GIS podemos decir que SVG es el formato vectorial frente al ráster de las imágenes jpg, png… Esto implica que una imagen SVG puede ser redimensionada (hacer zoom) sin que pierda calidad, lo que no ocurre con la imágenes pixeladas.

Utilizar un formato vectorial tiene además otras ventajas, como permitirnos crear efectos y animaciones. Las imágenes SVG se pueden editar con programas open source como INKSCAPE.

Disponemos también de muchas páginas web que nos proporcionan ejemplos y explicaciones sobre el uso de SVG. Por ejemplo un rectángulo se forma de la siguiente manera:

Como vemos se compone de unas etiquetas html <svg> en cuyo interior definimos el rectángulo (rect) mediante sus dimensiones: largo y ancho y un estilo.

Pasos a seguir

El rectángulo que hemos definido antes podemos utilizarlo como un marcador en Leaflet.

Lo primero es crear un nuevo icono mediante una instancia a L.Icon

A continuación creamos el marcador svg

Como vemos, hemos introducido algunos cambios en la definición del rectángulo que son los que nos proporcionan la animación. Estamos modificando la transparencia del marcador en un periodo de 5 segundos. Esto hará que el marcador vaya «difuminándose» hasta desaparecer al cabo de 5 segundos, y a continuación se vuelve a hacer visible, en un bucle continuo.

La línea anterior es necesaria para codificar el recurso. En Firefox necesitamos que  # se cambie por %23 para que pueda funcionar en ese navegador.

Una vez completada la generación del icono SVG podemos crear el marcador e insertarlo en el mapa.

El resultado es que en las coordenadas indicadas se dibuja un rectángulo que va desapareciendo progresivamente y luego se vuelve a hacer visible. Puedes ver el efecto creado en el siguiente mapa:

El código completo es:

Insertar GIFs en Leaflet

Estamos habituados a recibir multitud de GIF’s en los mensajes de las redes sociales. Este abuso de las imágenes en movimiento que puede llegar a resultar molesto, bien utilizado es una excelente herramienta para publicidad y para captar la atención del usuario. Graphics Interchange Format (GIF) es un formato para el intercambio de imágenes en movimiento ampliamente utilizado en la web y que permite realizar y animaciones.

Utilizar GIF en Leaflet no tiene nada de particular, podemos utilizarlo igual que cualquier otro formato de imagen. Un ejemplo es el siguiente:

El código anterior utiliza un geoJSON para crear y asignar propiedades a dos marcadores. La creación del icono, como vemos, es igual que en el ejemplo que pusimos para SVG, es decir: realizamos una instancia a L.Icon y luego definimos la ruta (URL) de la imagen. En esta ocasión se trata de una bandera de Andalucía flameada por el viento.

Este es el resultado.

Font Awesome – el conjunto de iconos y herramientas más populares de la web

De entre la gran cantidad de recursos web que nos proporcionan iconos, uno de los más importantes es sin duda Font Awesome.

Podemos utilizar un marcador para crear una función con JavaScript que defina una animación, de la siguiente forma:

Mediante setTimeout hacemos que se ejecute una función en un tiempo determinado medido en milisegundos. De esta forma podemos modificar un div en el tiempo de tal forma que se crea una animación. En el ejemplo que estamos utilizando sería la carga de una batería. Como paso previo hemos definido un div utilizando la clase de leaflet L.divIcon.

Ejecutamos la función chargebattery:

Y creamos el marcador:

El resultado es un mapa con un marcador que muestra una batería cargándose:

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Deja un comentario