Cómo insertar elementos multimedia en mapas web (imágenes, PDF, etc)

Los elementos multimedia se incorporan a las páginas web de forma habitual. Esos recursos multimedia también podemos utilizarlos en los mapas web. Es bastante frecuente utilizar imágenes en webmapping y también se empiezan a realizar mapas sonoros para mostrar la cartografía de los sonidos. Los elementos multimedia como imágenes, sonidos, videos o documentos pueden ser incorporados a un mapa fácilmente utilizando las correspondientes etiquetas html. En este artículo veremos algunos ejemplos muy sencillos utilizando Leaflet para construir el mapa.

Creando el mapa con Leaflet

Leaflet es un librería JavaScript de código abierto muy utilizada para crea mapas web por su sencillez y ligereza. Para crear el mapa con Leaflet simplemente debemos crear un html que contenga los archivos de la librería como ya hemos visto en otras ocasiones en este mismo blog. Empezaremos por tanto creando el mapa e incorporamos una capa base de OpenStreetMap:

var map = L.map('map',{center: [40.965, -5.664],zoom: 16});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

La forma más sencilla de incorporar los datos al mapa es mediante un archivo geoJSON, como el que mostramos a continuación:

 var geojson = [{
    "type": "Feature",
    "geometry": {
    "type": "Point",
    "coordinates": [-5.66401, 40.96506, ]
  			},
 "properties": {
     "name": "Plaza Mayor",
     "title": "Plaza Mayor",
     "imagen": "plaza_mayor.jpeg",
     	  }
},{
        "type": "Feature",
 	"geometry": {
   	"type": "Point",
   	"coordinates": [ -5.66712 ,40.96143]
           },
"properties": {
         "name": "Universidad",
         "title": "Universidad de Salamanca",
         "imagen": "Universidad_de_Salamanca.jpg",
         		  }
          }];

Como se puede observar, entre las propiedades del archivo geoJSON hemos incluido una, llamada «imagen», que contiene el nombre del archivo de la imagen.

Insertar la imagen en un popup

Ahora que tenemos un archivo que contiene las imágenes, podemos crear un popup que nos muestre la imagen al hacer clic sobre el marcador.

var featuresLayer = new L.GeoJSON(geojson, {
    onEachFeature: function(feature,marker) {
    marker.bindPopup("<ul><h3>" +feature.properties.name+" </h3><figure><img class='imgpop' src="+feature.properties.imagen+"></figure></ul>");
        }
 }).addTo(map);

• Mediante una instancia a L.GeoJSON creamos un nuevo objeto.
• Empleamos el método .bindPopup para construir un popup que tendrá una lista con dos elementos: el nombre y la imagen.
• Para insertar el nombre utilizamos la propiedad feature.properties.name.
• Para la imagen utilizamos la etiqueta html <figure> a la que le pasamos la propiedad del archivo GeoJSON que la contiene: features.properties.image.
• Definimos también la clase ‘imgpop‘ para poder asignarle un estilo a la imagen.

Definiendo estilos

Podemos personalizar el popup aplicando estilos CSS. También definimos las dimensiones de la imagen asignando un estilo a la clase ‘imgpop‘ que habíamos creado antes.

<style>
    body {
        	padding: 0;
        	margin: 0;
        }
    html, body, #map {
        	height: 100%;
        }
    .leaflet-popup-content {
            padding: 1px;	
            background:#f1b10e;
            
                    }
    .leaflet-popup-content-wrapper{
            background:#ebcb7a;
                
        }
    .leaflet-popup-tip {
            background:red;
        }
    .imgpop{
       width: 150px;
        }
  	
</style>

El resultado es que al hacer clic sobre cada uno de los marcadores se abre un popup que nos muestra una fotografía:

Insertar audio

Para insertar un audio en los marcadores de nuestro de mapa actuamos de la misma forma que con las imágenes. Lo primero es añadir una propiedad al archivo GeoJSON que contenga el enlace al archivo con el audio. En este ejemplo utilizamos el formato mp3:

"properties": {
           "name": "Plaza Mayor",
             "title": "Plaza Mayor",
             "imagen": "plaza_mayor.jpeg",
             "sonido": "perro.mp3"
            		  }

Hacemos lo mismo con las propiedades del otro marcador.

"properties": {
         "name": "Universidad",
         "title": "Universidad de Salamanca",
         "imagen": "Universidad_de_Salamanca.jpg",
         "sonido": "gato.mp3"
                  }

Creamos el control de audio mediante la etiqueta html <audio>

var featuresLayer = new L.GeoJSON(geojson, {
    onEachFeature: function(feature,marker) {
    marker.bindPopup("<ul><h3>" +feature.properties.name+" </h3><figure><img class='imgpop' src="+feature.properties.imagen+"></figure><audio class='audiopop' controls autoplay ><source src="+feature.properties.sonido+" type='audio/mpeg'></audio></ul>");
        }
 }).addTo(map);

• El atributo controls de la etiqueta <audio> agrega controles de audio, como reproducción, pausa y volumen.
• El elemento <source> permite especificar archivos de audio alternativos entre los que puede elegir el navegador. El navegador utilizará el primer formato reconocido.
• Para iniciar un archivo de audio automáticamente, usamos el atributo autoplay.

Como hicimos antes, con el ejemplo para las imágenes, definimos un tamaño para el control de audio asignando un estilo a la clase audipop:

.audiopop{

      width: 250px;

}

En la imagen siguiente vemos el popup con el control de reproducción de audio:

Insertar vídeos de YouTube en nuestro mapa web

La conversión de videos a diferentes formatos puede resultar difícil y llevar mucho tiempo. Una solución más sencilla es permitir que YouTube reproduzca los videos en su página web.

Primero debemos utilizar la opción «compartir» de YouTube, de esta forma se nos genera un enlace para insertar el video en el mapa. Cuando tengamos ese enlace lo añadimos en las propiedades al igual que hicimos con las imágenes y los audios.

...
"video": "https://www.youtube.com/embed/GteQipWf_9s"
 }

Con la propiedad definida procederemos a crear el popup:

var featuresLayer = new L.GeoJSON(geojson, {
    onEachFeature: function(feature,marker) {
    marker.bindPopup("<ul><h3>" +feature.properties.name+" </h3><figure><img class='imgpop' src="+feature.properties.imagen+"></figure><iframe width='250' height='188' src="+feature.properties.video+"></iframe></ul>");
        }
}).addTo(map);

Utilizamos <iframe> para insertar el vídeo y mediante los atributos width y heigth definimos las dimensiones de la ventana de visualización del vídeo:

Para controlar la reproducción del video disponemos de alguna herramientas como controls.

...
"video": "https://www.youtube.com/embed/GteQipWf_9s?controls=0"
    		  }

• Si en la url añadimos al final controls=0, se ocultarán los elementos de reproducción del vídeo. Si el valor de controls es 1 (valor por defecto) se muestran los controles.
• Si lo que añadimos al final es autoplay=1, el vídeo se reproducirá de forma automática.
• Hay otros parámetros como loop que hace que el vídeo se reproduzca indefinidamante y mute que oculta el sonido del vídeo.

Insertando documentos PDF o HTML

Además de los elementos multimedia en mapas web que hemos visto (imágenes, audios, vídeos), se pueden incorporar otros recursos como documentos PDF o HTML. En este caso podemos utilizar las etiquetas html: <embed> u <object>

Siguiendo los ejemplos anteriores añadimos al popup un documento html que hemos llamado tabla.html,utilizando <embed> de la siguiente forma:

var featuresLayer = new L.GeoJSON(geojson, {
    onEachFeature: function(feature,marker) {
    marker.bindPopup("<ul><h3>" +feature.properties.name+" </h3><figure><img class='imgpop' src="+feature.properties.imagen+"><embed width='200px' height='150px' src="+feature.properties.recurso+"></ul>");
        }
}).addTo(map);

Como observamos en el código anterior hacemos referencia a la propiedad recurso, que habremos tenido que añadir previamente a las propiedades del nuestro archivo GeoJSON.