Interactive Maps for Smart Lazio Tours - Turismo Digitale Assignment - Altervista
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Turismo Digitale
Assignment
Interactive Maps for Smart Lazio Tours
Daniele Rossetto
Prof. Michele Angelaccio
2020
Lab. di Ricerca “TURISMOPOLI”
dip. Ingegneria dell’Impresa
michele.angelaccio@uniroma2.it
Interactive Map
• Un’ «interactive map» è un sistema di rappresentazione grafica delle informazioni in grado di
interagire con le scelte dell'utente o con il verificarsi di altri eventi esterni. A differenza della
mappa statica, la mappa interattiva si basa sull'applicazione di un collegamento di ritorno
(feedback) tra sistema e utente. Una volta ottenuta l'informazione iniziale l'utente effettua una
serie di scelte per personalizzarle sulla base della propria necessità, ad esempio aggiungendo dei
particolari pop-up, che il sistema prende immediatamente in carico come input per elaborare in
tempo reale l'aggiornamento dei dati di output ossia la mappa.
Interactive Google Map Interactive Map Javascript
• Un’ «interactive map» può essere utilizzata anche in ambito del Digital Tourism come attività di
promotion per meglio rappresentare in maniera chiara, schematica e precisa eventuali
caratteristiche del posto, come ad esempio i luoghi tipici da visitare o i prodotti tipici locali.
Interactive Map con Marker e Pop-up
• All’interno dell’«interactive map» è possibile interagire inserendo dei marker con
relative finestre pop-up.
• I marker appaiono come dei segnaposto sulla mappa per segnalare i luoghi più
rilevanti ed importanti del posto: per inserirli vanno utilizzate le coordinate
effettive del luogo che si intende rappresentare. Cliccandoli si possono aprire delle
finestre pop-up.
• I marker e relativi pop-up appaiono sulla map come dei punti che possono:
➢ Essere cliccati
➢ Contenere informazioni descrittive o foto relative al punto selezionato
➢ Contenere eventuali link che rimandano al sito corrispondente delle informazioni rappresentate
Sulla destra è possibile vedere un
marker con relativa finestra pop-
up, la quale, cliccandola, permette
di ottenere informazioni relative
ad un prodotto tipico del posto
con immagine relativa.
Interactive Map con poligoni
• All’ interno dell’Interactive Map possono essere inseriti i
poligoni: simili ai markers, vengono utilizzati per evidenziare
un’area geografica, generalmente circoscritta, piuttosto che
un luogo specifico come avviene per i marker
Poligono che è stato utilizzato per rappresentare
Poligono che è stato utilizzato per rappresentare un’area geografica estesa: comunemente viene
un ponte: avendo una forma rettangolare, ha utilizzato un cerchio per le aree estese. Ha bisogno
bisogno di 4 punti (con relative coordinate), che di un punto (coordinate) che rappresenta il centro
devono essere inseriti per poter essere del cerchio e del raggio che rappresenta
rappresentato e visualizzato correttamente l’estensione dell’area stessa
Interactive Maps nel Digital Tourism
• Le Interactive Maps possono essere utilizzate nel Digital Tourism come
attività di promotion del luogo per meglio rappresentare, in maniera
schematica, sintetica e smart ciò che più è caratteristico del posto in
questione.
• Inoltre, basandosi sull’attività di feedback sistema-utente, è possibile
scegliere di visualizzare ciò che più interessa mediante i vari strumenti di
interazione che possono essere presenti (marker, pop-up…).
• Nel nostro caso le Interactive Maps sono state utilizzate come:
➢ Strumento per rappresentare i luoghi caratteristici del luogo
➢ Strumento per rappresentare i prodotti tipici del luogo
Interactive Maps: metodi
• Esistono vari metodi per costruire un’Interactive Map.
• Nello specifico, sono stati analizzati 2 metodi:
➢ Metodo Google Map: cercare «Google MyMaps» su Google (link al sito:
https://www.google.com/mymaps)
➢ Metodo «Fai da te»: utilizzare un editor di testo e particolari librerie per costruire la propria
mappa attraverso l’uso del codice html
Sulla destra è possibile vedere parte
del codice HTML-JAVASCRIPT che è
stato utilizzato per costruirsi self-made
la propria interactive map.
Metodo GoogleMyMaps(1)
• Google fornisce la possibilità di costruire Interactive Maps utilizzando il servizio «MyMaps».
• Per poter usufruire del servizio è necessario avere un account Google registrato e che sia attivo. Si
costruirà la mappa direttamente accedendo al proprio account Google.
• Possono essere aggiunti marker all’interno della mappa (icone che compaiono sui punti che si intendono
rappresentare) cliccando sull’icona «indicatore».
• Cliccando sull’indicatore è possibile inserire il marker nel punto corrispondente da rappresentare ed
inserire eventuali informazioni a riguardo con relative foto: per posizionare in maniera definitiva il
marker cliccare su «salva».
Metodo GoogleMyMaps(2)
• Una volta eseguita in maniera iterativa la procedura di posizionamento dei vari marker nei vari punti
selezionati, con eventuale inserimento di informazioni aggiuntive e foto, l’interactive map assumerà il
seguente aspetto:
➢ I marker
posizionati
all’interno della
mappa sono
visibili in rosso
in
corrispondenza
del luogo
preciso che
rappresentano.
markerMetodo GoogleMyMaps(3)
• Se vengono inserite informazioni e foto in aggiunta ad ogni marker nella mappa,
queste ultime saranno visualizzate nel seguente modo:
➢ Cliccando sul marker
scelto sulla sinistra si
aprirà una particolare
finestra in cui è possibile
vedere la foto del posto e
leggere eventuali
informazioni a riguardo.
Rappresenta un modo
schematico e smart di
fornire informazioni,
basato sull’utilizzo del
sistema feedback alla
base di ogni interactive
map.
• Una volta ultimata la map salvare il tutto prima di uscire.Metodo «FaidaTe»
• E’ possibile inoltre creare una propria interactive map autonomamente attraverso
l’utilizzo di linguaggi di sviluppo per il web, come HTML e JAVASCRIPT.
• E’ possibile, usando delle librerie come LeafletJS, realizzare e personalizzare le proprie
interactive map (link alla libreria: https://leafletjs.com/).
• L’unico strumento necessario per realizzare la propria interactive map è un qualsiasi
editor di testo: nel nostro caso è stato utilizzato come editor ATOM.
➢ ATOM è un editor di testo gratuito molto utilizzato
per questo tipo di applicazioni. È intuitivo ed ha
una libreria di add-ons che permette di
semplificare il workflow.
• Per realizzare la mappa interattiva con questo metodo è stato utilizzato il codice
JAVASCRIPT ed HTML, come verrà illustrato in seguito.Metodo «FaidaTe»: come realizzare un’interactive map
La realizzazione self-made di una mappa interattiva si sviluppa in vari step. Vediamoli nel
dettaglio:
1. Innanzitutto creiamo un file con tutte le coordinate che verranno utilizzate per inserire i
markers nella giusta localizzazione geografica dei luoghi che si intendono
rappresentare, tramite il servizio Geojson (link al sito: GeoJson: http://geojson.io/)
2. A questo punto si comincia ad utilizzare l’editor di testo per realizzare la propria
interactive map. Si inizia con l’includere tutte le librerie e le settings, ovvero quei
blocchi di codice che gettano le fondamenta su cui sviluppare la mappa. Questo tipo di
configurazioni solitamente si fanno nella sezione del file HTML creato
attraverso il corrispondente tag .
➢ Nello specifico è stata
inserita la libreria
LeafletJS, inserendo
specifici tag che
vengono illustrati
direttamente nella
pagina web della
libreria stessa: si tratta
di copiare ed incollare
le caratteristiche.Metodo «FaidaTe»: come realizzare un’interactive map
3. Si aggiunge il tag della mappa nel della pagina dell’editor con le seguenti
caratteristiche all’interno:
➢
4. Si inizializza la mappa, iniziando a scrivere le prime righe di codice Javascript:
➢ var mymap = L.map('mapid').setView([42.62777215152706, 12.11389124393463], 18)
Questo permette di centrare l’interactive map che si sta realizzando nel luogo sul quale si
vuole lavorare: questo viene fatto inserendo le giuste coordinate del posto (nell’esempio di
cui sopra sono state inserite le coordinate del borgo di Civita di Bagnoregio, luogo utilizzato
per la realizzazione delle mappe trattate.Metodo «FaidaTe»: come realizzare un’interactive map
5. Inizializzata la mappa con i primi 4 punti apparirà, se tutto è stato eseguito correttamente,
una mappa di questo tipo:
A questo punto lavorando sull’editor possono essere aggiunti:
➢ i markers attraverso il codice
«var + nome del luogo=L.marker([coordinate]).addTo(mymap)
➢ la finestra pop-up con l’inserimento di ulteriori informazioni che si vogliono
rappresentare sulla mappa attraverso il codice
«nome del posto(lo stesso utilizzato per il medesimo marker).bindPopup(inserire qui il testo e le foto che si
vuole far comparire nella finestra pop-up)»Metodo «FaidaTe»: come realizzare un’interactive map
6(opzionale). Se vogliono essere inseriti particolari poligoni per rappresentare aree
geografiche o elementi architettonici si utilizza il codice
var + nome del posto = L.polygon([caratteristiche necessarie al tipo di poligono inserito])
var + nome del posto = L.circle([caratteristiche necessarie al tipo di poligono inserito])
➢ Nel primo caso è stato inserito un
poligono di forma rettangolare per
rappresentare la forma di un
elemento architettonico: le
caratteristiche necessarie sono le
coordinate dei 4 punti, vertici del
poligono in questione.
➢ Nel secondo caso è stato inserito un
cerchio per rappresentare
l’estensione di un’area geografica: le
caratteristiche principali sono le
coordinate del centro del cerchio ed
il raggio dello stesso per quanto
riguarda l’estensione dell’area da
coprire.
➢ Caratteristiche aggiuntive sono il
colore del contorno e dell’interno.Metodo «FaidaTe»: punto di arrivo
• Eseguiti i primi 6 punti, di cui l’ultimo opzionale, si ultima il file html attraverso la
chiusura di tutti i tag aperti come , ed .
• A questo punto si salva il file in formato html (nomefile.html) e se tutto è stato eseguito
correttamente, aprendo il file stesso, apparirà una mappa di questo tipo:
➢ con i vari marker geolocalizzati
correttamente attraverso le coordinate
inserite ed eventuali poligoni
rappresentati
➢ Se sono state inserite finestre pop-up
collegate ai marker rappresentati, cliccando
su un particolare marker, si aprirà la
finestra pop-up collegata con le
informazioni, le foto inserite o gli eventuali
link inseriti.Output finale Una volta create le interactive map, per poter essere visibili online, è opportuno caricarle all’interno di un sito personale (se esistente) o facendo uso di un host temporaneo. Se si vogliono visualizzare le interactive map realizzate, cliccare sui seguenti link per eventuali riscontri: ➢ Interactive Map GoogleMYMAPS: • http://danielerossetto.altervista.org/RossettoInteractiveGoogleMyMaps.html ➢ Interactive Map luoghi tipici (Civita di Bagnoregio) con HTML-JAVASCRIPT e libreria LEAFLET • http://danielerossetto.altervista.org/InteractiveMapLuoghiTipici2.html ➢ Interactive Map prodotti tipici (Civita di Bagnoregio) con HTML-JAVASCRIPT e libreria LEAFLET • http://danielerossetto.altervista.org/InteractiveMapProdottiTipici.html
Puoi anche leggere
