[Inici de la transcripció]


Institut Cartogràfic i Geològic de Catalunya

15. Com posar informació multimèdia a Instamaps

Obrim un nou mapa d'Instamaps i anem realitzar un nou vídeo.
I aquest cop el comencem amb aquest mapa sonor que ha fet l'Equip d'Identitat Sonora,
on es remarca una sèrie de punts, alguns dels quals contenen informació associada.
Aquí, per exemple, si cliquem veiem aquest punt localitzador de Can Portabella,
que té associat una imatge de l’Street View de Google
i, alhora, un so que podem clicar i escoltar.
D'altra banda, una altra sèrie d'informació:
un enllaç i informació relativa a les coordenades dels punts.
Instamaps és una eina que permet que inserim, dins del seu multimèdia, imatges
i cridar altra informació per a què sigui visualitzada a la infowindow.
Anem a veure com s'ha fet aquest mapa.
Iniciem aquí, en un mapa net d'Instamaps, i identifiquem el punt que ens interessa.
En aquest cas anirem fins al santuari de Pinós,
proper del que és el centre geogràfic de Catalunya.
“Santuari de Pinós”.
Ja tenim aquest punt. Aquí està la cartografia.
Premem el botó verd, canviar el fons,
i a la imatge evidenciem que aquí hi ha tant l'hostal com el santuari.
Instamaps ens ha creat una capa, que tenim aquí dins de capes.
És una capa que ara es diu "Santuari de Pinós",
però que podríem canviar per una capa "Punts",
si és que ho haguéssim de fer a altres punts,
incorporant punts en aquesta capa.
I ens ha inserit un nom; potser és una mica massa llarg, però per això l'escurcem.
Ho escurcem perquè posi simplement "Santuari de Pinós".
I una informació que ara mateix ja ens està bé.
Anem a inserir, aquí per exemple,
una imatge relativa a l’Street View de Google.
Anem a fer aquest primer intent.
El primer que farem serà crear un nou camp
en aquesta mateixa capa;
això ho farem consumint en mode taula.
I aquí crearem un nou camp que es dirà, en aquest cas, "streetview",
on hi col·locarem aquesta informació
perquè es visualitzi en clicar aquest punt.
Com ho farem?
Hem d'anar al Google Street View; aquí hem localitzat el Santuari de Pinós
i el que farem és arrossegar aquí a baix a la dreta l'homenet groc.
L'agafem sense deixar anar el ratolí
i el deixem anar just quan estiguem al lloc on volem veure la imatge.
I aquí tenim el santuari de Pinós i el que és la fonda.
Això és la informació que volem.
Notem que aquí, a la banda de dalt a mà esquerra, tenim aquesta informació amb aquests tres puntets
que ens permeten compartir
o ens permeten justament el que volem, que és localitzar.
Poder treballar amb l’Street View.
Venim aquí on diu "Embed a map"
i, aquí, Street View ens permet que sigui un embed mitjà,
com aquest cas, o un embed gran.
Nosaltres escollirem el petit; aquest embed pot ser ideal per a la infowindow d'Instamaps.
Copiem l'html.
Notem que el que estem copiant realment és el mateix enllaç en aquesta imatge posada dins d'un iframe.
Copiem amb el botó de copiar
i ja tenim la informació que necessitem.
Tornem al mapa d'Instamaps
i, en aquest camp que hem obert, que accedirem a baix a la dreta en mode taula, aquí tenim el camp Street View,
hi enllaçarem aquesta informació que hem copiat. Aquest és l'enllaç.
Tanquem i observem, en tornar a clicar, que Instamaps s'ha refrescat
i que ja ens permet incorporar, aquí, aquesta imatge de l’Street View.
Ara, aquí mateix, en aquesta mateixa zona, incorporarem un vídeo de la mateixa manera.
Els iframes poden ser bons per a incorporar fotografies, per exemple.
De Google Drive si tenim algun gràfic també es pot recuperar l'iframe.
Al moment de publicar, recuperarem l'iframe només del gràfic
i l'inserim d'aquesta mateixa manera a Instamaps.
Anem a fer-ho.
Ara recollim aquest vídeo que també correspon al mateix Pinós.
En aquest cas, la mateixa imatge de Youtube
que podem recuperar (botó de la dreta) tant l'enllaç del vídeo,
la URL, com el codi d'inserció, l'embed.
Per tant, copiem el codi d'inserció i ja el tenim.
I repetim la mateixa operació dient a Instamaps que volem novament crear un camp
i que aquest camp nou es dirà "Vídeo".
Afegim.
I tornem a entrar en mode taula
per incorporar aquesta informació relativa al vídeo.
Amb la barra de l’scroll... Aquí tenim el camp “vídeo”,
aquí esborrem aquest signe “menys” (-) que posa Instamaps en els camps buits.
I afegim.
Notem que aquí, tal com l'hem recuperat del propi Street View,
ho farà amb una amplada de 877 per 493 d'alçada.
Això és una amplada que excedirà de molt la infowindow d'Instamaps.
Per tant el que farem serà minimitzar-ho
i marcarem per a què l'amplada sigui de 290 píxels.
I esborrarem el que és l'alçada per a què  sigui adaptativa a aquesta amplada.
Deixem que l'amplada sigui igual a 290.
Ja ho tenim inserit.
Tanquem i visualitzem els resultats.
Doncs aquí ho veiem: L'Street View que aquí podem visualitzat o fins i tot treballar amb aquest vídeo que ja hem col·locat.
D'aquesta manera podríem anar incorporant diferents multimèdies.
Notem que, si no sou avesats en aquest html que és l'iframe,
podeu mirar les diferents FAQs d'Instamaps.
Recordeu que aquí, en el menú, tenim les FAQs
on expliquem alguns detalls de com jugar amb aquest tag o que hi ha eines com l'embed responsively,
que ens ajuda a generar, a partir d'un dels enllaços de diferents aplicacions,
l'iframe que podríem incorporar a Instamaps.
Ens quedaria publicar aquesta mapa, com de costum, i visualitzar.
Li hauríem de posar un nom aquí: "Pinós".
Deixem tots els paràmetres per defecte, en aquest cas,
i visualitzem finalment el mapa.
És aquí, centrat a Pinós, i amb un únic punt. I, en clicar aquí,
tenim la informació que havíem escollit.

Institut Cartogràfic i Geològic de Catalunya, 2019.

[Fi de la transcripció]