Para construir este mapa lo que hemos hecho es incrustar el código entero de la página web construida dentro de la página de la Innovawiki. Puede verse aquí: https://innovawiki.es/354-2/
Si damos botón derecho encima de esta página y pulsamos botón derecho y la opción de “Ver código fuente de la página”, podemos ver todo el código que ha generado el mapa. En la línea 287 hay una línea que es “<!DOCTYPE html>” y en la 688 el cierre “</html>”. Todo ese código, desde una línea hasta la otra, es el mapa.
Debemos coger este código, y lo copiamos y pegamos en un documento de texto plano. Después debemos cambiar el nombre del archivo por uno que tenga la extensión “.html”.
Una vez hecho eso tendremos el mismo mapa base con cada uno de los puntos que se ven en el mapa. Podemos abrir el fichero “.html” pulsando doble clic y lo abrirá nuestro navegador. Ahora podemos cambiar todo el código con el programa que tengamos para editar el documento de texto plano y cambiarlo a nuestro gusto, viéndolo con el navegador.
Lo importante a la hora de ver el código es saber cómo cambiar cada punto del mapa. Cada uno de ellos tiene este aspecto:
{
coords: [40.446481, -3.726061],
text: “David Álvarez Garcés y Lucas Cruz Rodríguez”,
image: “https://upload.wikimedia.org/wikipedia/commons/2/24/PHOTO_puente.jpg”,
link: “https://commons.wikimedia.org/wiki/File:PHOTO_puente.jpg”,
audio: “https://upload.wikimedia.org/wikipedia/commons/3/3d/Audio_Bot%C3%A1nico.ogg”,
audiolink: “https://commons.wikimedia.org/wiki/File:Audio_Bot%C3%A1nico.ogg”
},
La primera línea (coords) indica las coordenadas del punto, el resto son los datos que se ven cuando se pincha dentro del punto. Todos esos puntos se están guardando en una variable que se llama points y lo que hacemos al final del documento es recorrer cada uno de los puntos y por cada uno añadimos un código HTML cuando pinchamos en él, este:
‘<img decoding=”async” src=”‘ + point.image + ‘” alt=”‘ + point.text + ‘” style=”width:200px;height:auto;”><br>’ + ‘<a href=”‘ + point.link + ‘” target=”_blank”>’ + point.text + ‘, CC BY-SA 4.0</a>, via Wikimedia Commons<br>’ + ‘<audio controls src=”‘ + point.audio + ‘”>Tu navegador no soporta el elemento de audio.</audio><br>’ + ‘<a href=”‘ + point.audiolink + ‘” target=”_blank”>’ + point.text + ‘, CC BY-SA 4.0</a>, via Wikimedia Commons’
Ese texto se puede cambiar con la información que quedamos que aparezca cuando pinchamos en un punto.