Cómo insertar un vídeo en un mapa web de Leaflet

Los vídeos son ampliamente utilizados en internet, como un elemento para captar la atención del usuario y compartir contenidos multimedia.

Un vídeo puede proporcionar a un mapa información adicional de una forma más eficaz que con una vista “estática”. Se puede insertar una imagen de satélite que nos muestre el avance de un huracán o una borrasca, una animación sobre las variaciones de temperatura del mar por el efecto del niño…, o como en el ejemplo que vamos a poner en esta ocasión, sobre el avance de un incendio forestal.

Para ilustrar lo que queremos exponer crearemos un mapa sobre el que insertaremos el vídeo utilizando una librería JavaScript open source: Leaflet.

Preparando el vídeo

Hasta la aparición de HTML5 ver un vídeo en una página web no era una tarea trivial, pues se requería de algún complemento como flash. Con HTML5 se introdujo  el elemento <video> que nos permite insertar y reproducir archivos de vídeo. Sin embargo el problema no queda del todo resuelto pues no existe un formato de vídeo estándar para la web, por lo que en general deberemos incluir el vídeo en varios formatos para asegurarnos de que será correctamente reproducido.

Los formatos de vídeo más utilizados en la web son MP4, WebM y Ogg. No todos los navegadores admiten todos los formatos por lo que es importante consultar la características particulares de cada cual.

Vídeo del incendio de junio de 2017 en el centro de Portugal

Entre el 17 y 24 de junio de 2017 se produjo un inmenso incendio forestal que afectó al centro de Portugal con un resultado catastrófico: 64 muertos y al menos 135 personas heridas. La mayoría de las muertes tuvieron lugar en Pedrógrao Grande (donde comenzó el incendio) cuando el fuego arrasó una carretera llena de vehículos con gente que intentaba escapar.

La NASA obtuvo unas imágenes de satélite de este incendio mediante su herramienta Moderate-Resolution Imaging Spectroradiometer (MODIS) que es un instrumento científico lanzado en órbita terrestre por la NASA en 1999 a bordo del satélite Terra (EOS AM) y en 2002 a bordo del satélite Aqua. En la aplicación EarthData de la NASA podemos realizar una captura de pantalla del vídeo en formato gif.

Es importante que tomemos nota de las coordenadas de las esquinas de la imagen para poder insertarla posteriormente en el lugar correcto.

El archivo en formato gif posteriormente deberemos convertirlo a MP4 y a WebM, utilizando alguna herramienta online o de escritorio.

Insertando el vídeo en Leaflet

En primer lugar creamos un mapa con Leaflet, en el que como mapa base utilizamos la capa mapbox.dark.

La adición de una superposición de vídeo funciona de forma muy similar a la adición de una superposición de imágenes. Para una imagen utilizamos  L.imageOverlay de la siguiente forma:

Para una superposición de vídeo, solo tenemos que utilizar L.videoOverlay en lugar de L.imageOverlay.

La clase L.videoOverlay es novedad en la versión de Leaflet 1.1.0.

En lugar de la URL de la imagen, especificamos una URL de vídeo o una matriz de URLs de vídeo, que nos permite utilizar varios formatos, es decir, indicaremos la ruta a varios archivos de vídeo, cada uno con su formato correspondiente para asegurarnos que los navegadores los interpretarán correctamente. En esta ocasión utilizamos los formatos MP4 y WebM.

En el código anterior estamos definiendo unas coordenadas de las esquinas de la imagen del vídeo que son las que nos lo van a situar sobre el mapa.

En las opciones de L.videoOverlay indicamos:

  • Que el vídeo no se reproduzca de forma automática cuando es cargado, mediante la opción autoplay.
  • Con interactive:false, hacemos que la capa ( en este caso el vídeo) no emita eventos del mouse y por lo tanto actúe como una parte del mapa que hay debajo.

Añadiendo controles al vídeo

Si vemos la documentación de la API de leaflet comprobaremos que la clase L.VideoOverlay no tiene un método para reproducir o parar el vídeo. Para poder insertar estas funciones podemos recurrir al método getElement( ). Este método nos devuelve una instancia de HTMLVideoElement que hereda propiedades y métodos de HTMLMediaElement y que si tiene métodos como play() y pause() , como por ejemplo.

videoOverlay.getElement().pause();

Esto nos permite crear interfaces personalizadas. Podemos construir una extensión de la clase L.Control para reproducir / pausar esta superposición de vídeo una vez cargada:

El resultado es que veremos un mapa en el que hemos insertado un vídeo y dos controles uno para reproducir y otro para detener la animación. A continuación puedes ver el mapa creado de esta forma.

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

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos