ldb 25 strumenti gis e webgis_2014-05-29e30 de lorenzis - api di google maps
Post on 27-Jun-2015
392 Views
Preview:
TRANSCRIPT
Ing. Sergio De Lorenzis
Alba Project s.r.l.
email: sergio.delorenzis@albaproject.it
INTRODUZIONE ALLE API DI
Che cosa posso fare con Google Maps?
E’ UN ATLANTE ONLINE
INDIVIDUO
PERCORSI DI NAVIGAZIONE
TROVO PUNTI DI INTERESSE
MI FA VEDERE IL MONDO DA UNA PROSPETTIVA DIVERSA
…ME LO FA VEDERE ANCHE DALLA LUNA
MI FORNISCE INFORMAZIONI SULLO STATO DEL TRAFFICO
OBIETTIVI DEL MIO CONTRIBUTO
• Concetti di base per creare mappe custom da incorporare in un sito o in
un portale.
• Interazione dei controlli utente (click del mouse, zoom, drag della mappa):
gestione degli eventi sulla mappa stessa attraverso degli appositi listener.
• Integrazione con una semplice applicazione web collegata ad un database
relazionale.
CHE COSA SONO LE API?
«Con Application Programming Interface (in acronimo API, in italiano
Interfaccia di Programmazione di un'Applicazione), in informatica, si indica
ogni insieme di procedure disponibili al programmatore, di solito raggruppate a
formare un set di strumenti specifici per l'espletamento di un determinato
compito all'interno di un certo programma. Spesso con tale termine si
intendono le librerie software disponibili in un certo linguaggio di
programmazione.»
IN CHE SENSO
?!!??
«Siamo come nani sulle spalle di giganti, così che possiamo vedere più cose di loro e più lontane, non certo per l'altezza del nostro corpo, ma
perché siamo sollevati e portati in alto dalla statura dei giganti.»
Bernardo di Chartres (XII secolo)
CHE COSA SONO LE API?
• Spesso bisogna fare affidamento sulle altre persone per svolgere funzioni che non si è
in grado o non si ha il permesso di fare in autonomia, come aprire una cassetta di
sicurezza in banca.
• Anche i software, nella quasi totalità dei casi, devono richiedere ad altri software di
svolgere funzioni che non sono in grado di svolgere.
• Per fare questo, il programma chiamante usa un insieme di richieste standard verso
quello chiamato, denominate Application Programming Interfaces (API).
• Gran parte delle applicazioni sfrutta i servizi messi a disposizione dal sistema
operativo nel quale vengono eseguite (ad esempio, l'accesso al file system e alle
periferiche).
CHE COSA SONO LE API?
Immaginate di dover traslocare da un
appartamento all’ultimo piano di un condominio
senza ascensori o montacarichi. Immaginate
anche di suonare il pianoforte.
Come sposto il pianoforte e il resto della mobilia?
Mi affido ad una ditta di traslochi, che detiene il
know how e gli strumenti utili per spostare il
vostro pianoforte (es.: un montacarichi come
quello in figura).
CHE COSA SONO LE API?
«Con Application Programming Interface , in informatica, si indica ogni
insieme di procedure disponibili al programmatore, di solito raggruppate a
formare un set di strumenti specifici per l'espletamento di un determinato
compito all'interno di un certo programma.»
«Con servizi erogati da un’impresa, si indica ogni insieme di procedure,
disponibili e rivolte all’utente, di solito raggruppate in categorie specifiche, che
permettono l'espletamento di un determinato compito all'interno di un certo
contesto.»
GETTING STARTED:
OTTENERE LA API KEY • Free vs Business
• Limite di 25.000 richieste per utente al giorno per le API Javascript
• Le applicazioni di pubblico interesse (Google stabilisce l’appartenenza a questa categoria) non hanno limiti di utilizzo. Ad
esempio, una mappa che tiene traccia delle zone a rischio sismico, anche se sviluppata da entità commerciali, può essere
esentata dal pagamento anche se si supera la quota.
GETTING STARTED:
OTTENERE LA API KEY
https://code.google.com/apis/console/b/0/?noredirect&pli=1
GETTING STARTED - OTTENERE LA API KEY - STEP 1
GETTING STARTED: OTTENERE LA API KEY - STEP 2
GETTING STARTED: OTTENERE LA API KEY - STEP 3
GETTING STARTED: OTTENERE LA API KEY - STEP 4
TIPI DI API WEB DI GOOGLE MAPS (fonte: https://developers.google.com/maps/)
Embed JavaScript
Places API
Web Services APIs Maps Image APIs
Google Earth API
…ma anche…
EMBED API
EMBED API – CONOSCENZE RICHIESTE
• HTML
• CSS
EMBED – HELLO WORLD
Le Google Maps Embed API usano semplici richieste HTTP
per restituire una mappa dinamica e interattiva (fino ad un certo
punto…). La mappa può essere facilmente incorporata
(embedded) nella vostra pagina web semplicemente settando
un Embed API URL (Uniform Resource Locator) nell’attributo
src di un iframe.
EMBED – HELLO WORLD
EMBED – HELLO WORLD
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <title>La mia prima mappa!</title> </head> <body> <iframe width="600" height="450" frameborder="0" style="border: 0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&q=Piazza+mazzini,Lecce+LE"> </iframe> </body> </html>
EMBED – HELLO WORLD
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <title>La mia prima mappa!</title> </head> <body> <iframe width="600" height="450" frameborder="0" style="border: 0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&q=Piazza+mazzini,Lecce+LE"> </iframe> </body> </html>
L’attributo src è l’unico elemento della pagina che determina la mappa restituita
all’utente
STRUTTURA DELL’ATTRIBUTO SRC
https://www.google.com/maps/embed/v1/MODE?key=API_KEY¶meters
• {MODE} è un’opzione a scelta tra “place”, “directions”, “search”, o “view”,
come descritto di seguito.
• {API_KEY} è l’API key personale create poco fa.
• parameters include alcuni parametric opzionali e altri parametri mode-
specific.
PLACE MODE
• q definisce il posto da evidenziare sulla mappa. Accetta le coordinate
sia sotto forma di nome della location che di indirizzo. La stringa deve
essere URL-escaped, in modo tale che un indirizzo come "City Hall,
New York, NY" possa essere convertito in una forma equivalente,
priva di spazi, "City+Hall,New+York,NY ".
PLACE MODE
DIRECTION MODE
• Parametri obbligatori:
• origin: luogo di partenza
• destination: luogo di arrivo. Come al solito, questo parametro e il precedente devono essere nel formato URL-escaped (caratteri
accentati sostituiti da una sequenza di caratteri consentiti).
• Parametri opzionali:
• waypoints: specifica di uno o più punti intermedi da attraversare durante il tragitto tra origine e destinazione. Nel caso di più
waypoint, essi possono essere specificati separandoli dal carattere pipe (|). Si possono specificare fino a 20 waypoints.
• mode definisce il mezzo di trasporto. In questo modo verrà restituito dal sistema il percorso ottimale in funzione dei vincoli e delle
facilities inclusi nel percorso. Le possibili opzioni sono: driving, walking, bicycling, transit o flying. Se non specificato, il sistema
restituirà uno o più dei modi maggiormente rilevanti per il percorso indicato.
• avoid: indica a Google Maps di voler evitare tolls, ferries and/or highways. Notare che, se il parametro è popolato, Google non
nasconderà il risultato, ma semplicemente, “non lo preferirà”.
• units: specifica l’unità metrica per indicare le distanze: metric o imperial. Se non indicato, il sistema sceglierà automaticamente
l’unità di misura del paese di origine.
Visualizza il percorso tra due o più punti della mappa, oltre che la distanza e il tempo di percorrenza.
DIRECTION MODE
SEARCH MODE
Visualizza i risultati di una ricerca di punti di interesse nella parte visibile della mappa.
E’ consigliabile che la location sulla quale centrare la ricerca sia definita o includendo il suo
nome nei termini di ricerca (record+stores+in+Seattle) o attraverso i parametri center e
zoom, in modo tale che i confini della mappa siano anche quelli entro i quali circoscrivere la
ricerca.
SEARCH MODE
VIEW MODE
Visualizza una mappa senza marker né direzioni.
VIEW MODE
PARAMETRI OPZIONALI
• center: definisce il centro della mappa sotto forma di latitudine e longitudine, separati
da virgola (es.: 37.1248, -122.0840).
• zoom: imposta il livello di zoom iniziale della mappa. Accetta valori da 0 a 21 (dettaglio
sul singolo edificio).
• maptype: può essere valorizzata con roadmap (valore di default) o satellite
• language: lingua degli elementi grafici visualizzati sulla mappa. Default: il linguaggio del
visitatore.
• region: definisce il formato delle etichette visualizzate.
MORE DIFFICULT…
JAVASCRIPT API
JAVASCRIPT API – CONOSCENZE RICHIESTE
• HTML
• CSS
• Javascript
GETTING STARTED - HELLO WORLD! - STEP 5
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 10 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
JS-01-hello_world.html
GETTING STARTED - HELLO WORLD! - STEP 5
GETTING STARTED - HELLO WORLD! - STEP 5
La direttiva DOCTYPE
indica che l’applicazione
è HTML5, quindi i
browser compatibili
sfrutteranno le
potenzialità di queste
direttive, lavorando in
standard mode, mentre
quelli non compatibili
lavoreranno in modalità
compatibilità (quirks
mode).
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 10 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
GETTING STARTED - HELLO WORLD! - STEP 5
Le direttive CSS
(Cascading Style Sheet)
indicano che gli
elementi ‘html’, body’ e
‘map-canvas’ si
adattano alle dimensioni
del proprio contenitore,
cioè occupano tutta
l’altezza a disposizione.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 10 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
GETTING STARTED - HELLO WORLD! - STEP 5
L’URL contenito nel tag script è la
posizione in cui si trova il file
JavaScript che carica tutti i simboli
e le definizioni necessarie per
utilizzare le API Google Maps.
L’URL contiene anche due
parametric:
key: è la chiave identificativa
ottenuta pocanzi.
sensor: indica se l’applicazione
usa la sensoristica del dispositivo
(localizzatore GPS, Wi-Fi, rete
3G/LTE, etc.) per individuare la
posizione attuale dell’utente.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 10 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
GETTING STARTED - HELLO WORLD! - STEP 5
Il secondo blocco JavaScript crea la mappa attraverso funzione initialize. L’ultima linea di codice, infine, dichiara un listener, cioè un ascoltatore dell’evento di caricamento (load) della pagina (window).
Il listener, quando intercetta l’evento load, invoca la funzione initialize, che si occupa di:
Definire le proprietà della mappa (center e zoom);
Associare la mappa al div con id=map-canvas (la mappa verrà ‘iniettata’ all’interno del contenitore div).
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 10 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
LATITUDINE E LONGITUDINE
• La latitudine aumenta muovendosi verso nord
• La longitudine, invece, aumenta verso est
GESTIONE DEGLI EVENTI
JavaScript nell’economia di un browser, è event driven, il che significa che risponde alle interazioni dell’utente generando eventi.
Per gli eventi di interesse possono essere predisposti dei listener, cioè ascoltatori, che, a fronte di un evento, scatenano l’esecuzione di un pezzo di programma per gestirlo.
Gli eventi sono di due tipi:
• User event (UI): un evento di questo tipo è il click del mouse. Questi eventi sono propagati dal Document Object Model (DOM) alle Google Maps API; non si tratta degli eventi DOM standard, perché questi non hanno ‘giurisdizione’ sul comportamento della mappa.
• MVC change: cattura i cambiamenti di stato delle proprietà della mappa o dei suoi elementi.
GESTIONE DEGLI EVENTI
PRIMO ESEMPIO DI GESTIONE DEGLI EVENTI <!DOCTYPE html> <html> <head> <style type="text/css"> html {height: 100%} body {height: 100%; padding: 0; margin:0;} #map-canvas {height: 100%} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=true"> </script> <script type="text/javascript">
function initialize(){ var mapOptions={ center: new google.maps.LatLng(40.056315, 18.3338610), zoom:10 }; var map=new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({
position: map.getCenter(), map: map, title: 'Clicca per zoomare'
} );
google.maps.event.addListener(map, 'center_changed', function(){ window.setTimeout(function(){ map.panTo(marker.getPosition()); }, 3000); });
google.maps.event.addListener(marker, 'click', function(){ map.setZoom(8); map.setCenter(marker.getPosition()); });
} google.maps.event.addDomListener(window, 'load',initialize); </script>
</head> <body> <div id="map-canvas" /> </body> </html>
JS-02-Handling-Events.html
PRIMO ESEMPIO DI GESTIONE DEGLI EVENTI
Lo statement evidenziato crea un nuovo listener che intercetta un evento di load (la fine del caricamento del DOM della pagina, window) e, come conseguenza, invoca la funzione ‘initialize’.
La funzione addDomListener ha la seguente signature:
<!DOCTYPE html> <html> <head> <style type="text/css"> html {height: 100%} body {height: 100%; padding: 0; margin:0;} #map-canvas {height: 100%} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=true"> </script> <script type="text/javascript">
function initialize(){ var mapOptions={ center: new google.maps.LatLng(40.056315, 18.3338610), zoom:10 }; var map=new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({
position: map.getCenter(), map: map, title: 'Clicca per zoomare'
} ); google.maps.event.addListener(map, 'center_changed', function(){
window.setTimeout(function(){ map.panTo(marker.getPosition()); }, 3000);
}); google.maps.event.addListener(marker, 'click', function(){
map.setZoom(8); map.setCenter(marker.getPosition()); });
} google.maps.event.addDomListener(window, 'load',initialize); </script>
</head> <body> <div id="map-canvas" /> </body> </html>
• Gli eventi scatenati dalle Google Maps API V3 passano ai listener associati le informazioni riguardanti l’evento stesso; queste informazioni riguardano le informazioni relative allo stato della User Iterface (UI) al momento in cui si verifica l’evento.
• Ad esempio, un click sulla UI, passa al listener un oggetto di tipo ‘MouseEvent’, che contiene la proprietà LatLng del punto cliccato sulla mappa.
• Questo comportamento è tipico degli eventi di tipo UI, mentre i cambiamenti di stato MVC non passano alcun argomento al listener.
• Il seguente esempio, attraverso un event listener sul’oggetto Map, colloca un marker sui punti della mappa in cui si intercettano eventi di click.
ACCEDERE ALLE INFORMAZIONI DEGLI EVENTI
<!DOCTYPE html> <html> <head> <style type="text/css"> html {height: 100%} body {height: 100%; padding: 0; margin:0;} #map-canvas {height: 100%} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPTW-FZWfjUFGuKN5Q78N6YAKLEts1sCw&sensor=true"> </script> <script type="text/javascript"> function initialize(){
var myLatLng=new google.maps.LatLng(40.056315, -18.3338610); var mapOptions={ center: myLatLng, zoom: 4
} map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
google.maps.event.addListener(map, 'click', function(event){ placeMarker(event.latLng);
}); }; function placeMarker(location){
var marker = new google.maps.Marker({ position : location, map: map }); map.setCenter(location);
} google.maps.event.addDomListener(window, 'load',initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
ACCEDERE ALLE INFORMAZIONI DEGLI EVENTI
JS-03-Add-Marker.html
ACCEDERE ALLE INFORMAZIONI DEGLI EVENTI
<script type="text/javascript"> function initialize(){
var myLatLng=new google.maps.LatLng(40.056315, -18.3338610); var mapOptions={ center: myLatLng, zoom: 4
} map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
google.maps.event.addListener(map, 'click', function(event){ placeMarker(event.latLng);
}); }; function placeMarker(location){
var marker = new google.maps.Marker({ position : location, map: map }); map.setCenter(location);
} google.maps.event.addDomListener(window, 'load',initialize); </script>
Le informazioni sull’evento vengono catturate dalla funzione di callback evidenziata in blu, che le utilizza per collocare un marker sul punto esatto del click.
A livello operativo è la funzione placeMarker che crea l’oggetto marker con le coordinate catturate.
UTILIZZO DI CLOSURE IN EVENT LISTENER function initialize(){ var myLatLng=new google.maps.LatLng(-25.363882, 131.044922); var mapOptions={ center: myLatLng, zoom: 4
} map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); //aggiunge 5 marker in posizioni random var southWest = new google.maps.LatLng(-31.203405,125.244141); var northEast = new google.maps.LatLng(-25.363882, 131.044922); var bounds = new google.maps.LatLngBounds(southWest, northEast); map.fitBounds(bounds); var latSpan = northEast.lat()-southWest.lat(); var lngSpan = northEast.lng()-southWest.lng();
for (var i = 0; i<5 ; i++){ var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new google.maps.Marker({ position: location, map: map }); var j = i + 1; marker.setTitle(j.toString()); attachSecretMessage(marker, i); }
} function attachSecretMessage(marker, number) { var message = ["Benvenuti", "al", "corso", "di", "WebGIS"]; var infoWindow = new google.maps.InfoWindow( {content: message[number], size: new google.maps.Size(50,100) });
google.maps.event.addListener(marker, 'click',function(){ infoWindow.open(map, marker);
}); }
google.maps.event.addDomListener(window, 'load',initialize);
JS-04-Closures.html
UTILIZZO DI CLOSURE IN EVENT LISTENER function initialize(){ var myLatLng=new google.maps.LatLng(-25.363882, 131.044922); var mapOptions={ center: myLatLng, zoom: 4
} map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); //aggiunge 5 marker in posizioni random var southWest = new google.maps.LatLng(-31.203405,125.244141); var northEast = new google.maps.LatLng(-25.363882, 131.044922); var bounds = new google.maps.LatLngBounds(southWest, northEast); map.fitBounds(bounds); var latSpan = northEast.lat()-southWest.lat(); var lngSpan = northEast.lng()-southWest.lng();
for (var i = 0; i<5 ; i++){ var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new google.maps.Marker({ position: location, map: map }); var j = i + 1; marker.setTitle(j.toString()); attachSecretMessage(marker, i); }
} function attachSecretMessage(marker, number) { var message = ["Benvenuti", "al", "corso", "di", "WebGIS"]; var infoWindow = new google.maps.InfoWindow( {content: message[number], size: new google.maps.Size(50,100) });
google.maps.event.addListener(marker, 'click',function(){ infoWindow.open(map, marker);
}); }
google.maps.event.addDomListener(window, 'load',initialize);
Quando si esegue un event listener è
spesso utile conservare sia i dati privati
che quelli persistenti allegati con
l’oggetto.
JavaScript non prevede l’uso di istanze
private di una classe, ma possiede la
‘capacità’ di gestire le closure.
Le closure consistono nel permettere
alle funzioni più interne, in una sequenza
di inner function, di accedere alle
variabili più esterne.
Le closure, quindi, sono utili all’interno di
event listener per accedere alle variabili
normalmente non accessibili all’oggetto
sul quale si verifica l’evento.
UTILIZZO DI CLOSURE IN EVENT LISTENER
ACCESSO ALLE PROPRIETÀ DELLA MAPPA function initialize() { var myLatLng = new google.maps.LatLng(40.151640, 17.967955); var mapOptions = { zoom: 4, center: myLatLng }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var infowindow = new google.maps.InfoWindow({ content: 'Change the zoom level', position: myLatLng }); infowindow.open(map); google.maps.event.addListener(map, 'zoom_changed', function() { var zoomLevel = map.getZoom(); map.setCenter(myLatLng); infowindow.setContent('Zoom: ' + zoomLevel); }); } google.maps.event.addDomListener(window, 'load', initialize);
• Getter: funzioni che restituiscono il
valore di una proprietà
• Setter: funzioni che modificano il
valore di una proprietà.
ACCESSO ALLE PROPRIETÀ DELLA MAPPA
LAYER
I Layer sono oggetti che vengono integrati nella mappa; essi consistono in uno o più elementi separati, ma sono trattati come un oggetto unico.
I livelli rappresentano, generalmente, raccolte di oggetti che vengono aggiunti nella parte superiore della mappa al fine di rappresentare una raccolta dati omogenea.
L'API Maps gestisce la presentazione di oggetti all'interno di strati, rendendo i loro elementi costituenti un unico oggetto (come una sovrapposizione di piastrelle).
Per aggiungere un livello alla mappa è sufficiente invocare la function setMap(), passando come argomento il map object sul quale sovrapporre il livello. Analogamente, per nascondere un layer, bisogna invocare setMap(), passando come argomento null.
TIPI DI LAYER
• KmlLayer questi layer visualizzano elementi KML e GeoRSS in una mappa API V3.
• HeatmapLayer visualizzano dati geografici usando una Heatmap.
• FusionTablesLayer visualizza i dati contenuti in Google Fusion Tables.
• TrafficLayer visualizza un livello raffigurante le condizioni del traffico.
• TransitLayer visualizza una mappa del trasporto pubblico delle città.
• WeatherLayer e CloudLayer permettono di aggiungere livelli che raffigurano le
previsioni del tempo e della nebbia.
• BicyclingLayer evidenzia i percorsi ciclabili presenti sulla mappa.
• PanoramioLayer aggiunge un livello di foto tratte da Panoramio.
KML LAYER
KML LAYER • https://developers.google.com/kml/documentation/kmlreference?hl=it
Il KML (Keyhole Markup
Language) è un linguaggio basato
su XML creato per gestire dati
geospaziali in tre dimensioni in
Google Earth e Google Maps.
Il file KML specifica un set di
elementi (segnalibri geografici,
immagini, poligoni, modelli 3D,
descrizioni ed etichette testuali...)
da visualizzare in Google Earth,
Maps e Mobile. Ogni location ha
obbligatoriamente una longitudine e
una latitudine.
KML LAYER • https://developers.google.com/kml/documentation/kmlreference?hl=it
KML Version 2.2
Nel diagramma ad albero rappresentato a
destra, gli elementi sulla destra di un
particolare nodo sono la specializzazione di
dell’elemento alla sua sinistra.
Ad esempio, Placemark è un particolare tipo
di Feature: significa che esso contiene tutti gli
elementi/attributi tipici di un oggetto Feature,
più altri elementi/attributi specifici del
Placemark stesso.
KML LAYER
Il file KML può essere recuperato
da un server remoto o da una
directory locale.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { var chicago = new google.maps.LatLng(41.875696,-87.624207); var mapOptions = { zoom: 11, center: chicago } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var ctaLayer = new google.maps.KmlLayer({ url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml' }); ctaLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script>
JS-06-KML-Layer.html
KML FILE- ESEMPIO
HEATMAP LAYER
JS-08-Heatmap2.html
HEATMAP LAYER
I concetti teorici che sono alla base dei layer di questo tipo sono disponibili
esclusivamente nella libreria google.maps.visualization.
Questa libreria non è caricata per default al momento del caricamento della Maps
Javascript API, ma deve essere espressamente specificata attraverso l’uso del
parametro di avvio denominato ‘libraries’.
Questo livello fornisce il rendering lato client di heatmap. Una heatmap è una
visualizzazione utilizzata per descrivere l'intensità di un set di dati omogenei in
determinati punti geografici. Quando lo strato Heatmap è abilitato, una overlay
colorata apparirà sulla parte superiore della mappa.
Per impostazione predefinita, le aree di maggiore intensità saranno di colore
rosso, e le aree di minore intensità appariranno verdi.
HEATMAP LAYER
JS-07-Heatmap.html
HEATMAP LAYER – WEIGHTED DATA POINTS D: Nell’esempio precedente, l’array heatMapData è popolato indifferentemente sia
da oggetti LatLng che di tipo WeightedLocation. Qual è la differenza tra i due? È
corretto avere una promiscuità dei due tipi nello stesso array?
R: Una heatmap può visualizzare sia oggetti di tipo LatLng che di tipo
WeightedLocation, o una combinazione dei due.
Entrambe le tipologie rappresentano punti su una mappa, ma un oggetto
WeightedLocation permette di specificare anche il peso del data point. Il peso
di un data point evidenzia quei punti a maggiore intensità rispetto ad un semplice
LatLng object, che equivale ad un WeightedLocation con peso pari a 1.
Similmente, un data point di tipo WeightedLocation con peso pari a 3 equivale a
tre LatLng object.
Per costruire una heatmap si può quindi utilizzare un array di data point composto
da un mix di elementi delle due tipologie appena descritte.
HEATMAP LAYER – WEIGHTED DATA POINTS
In conclusione, l’utilizzo di oggetti WeightedLocation in luogo di quelli di
tipo LatLng presenta i seguenti vantaggi:
• Facilita l’inserimento di grossi quantitativi di dati nello stesso punto della
mappa.
• Permette di dare un enfasi o un peso ai dati basandosi su dei
valori arbitrari. Ad esempio, i punti WeightedLocation si prestano
molto bene per misurare l’intensità dei terremoti nella scala
Richter (a differenza dei LatLng).
DESKTOP VS MOBILE
I dispositivi mobili hanno schermi di dimensioni più piccole rispetto ai desktop. Inoltre, a parità di
tipologia di interazione dell’utente con i dispositivi dei due tipi, spesso le modalità sono di natura
diversa (es.: i mobile touch-screen permettono lo zoom attraverso il cosiddetto ‘pizzicamento’, mentre
i desktop utilizzano la rotellina del mouse).
Di seguito si riportano due piccoli accorgimenti da prendere in considerazione se si desidera che la
mappa venga renderizzata correttamente anche su dispositivi mobili.
• Impostare i <div> che contengono la mappa con height e width pari al 100%. Alcuni vecchi desktop
browser potrebbero tuttavia non visualizzare bene l’output.
• Si può capire se un dispositivo è un iPhone o un Android utilizzando la proprietà del DOM
navigator.userAgent (per poter agire di conseguenza).
• I browser Android e iPhone rispettano la direttiva in basso, che impone alla pagina di essere
visualizzata full-screen e impedisce alla mappa di essere ridimensionabile dall’utente. I browser
Safari per iPhone richiedono che questa direttiva rientri nel tag <head>.
DESKTOP VS MOBILE
GRAZIE PER LA CORTESE ATTENZIONE!!!
top related