9. 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.
10. 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.»
12. «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)
13. 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).
14. 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).
15. 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.»
16. 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.
22. TIPI DI API WEB DI GOOGLE MAPS
(fonte: https://developers.google.com/maps/)
Embed JavaScript
Places API
Web Services APIsMaps Image APIs
Google Earth API
…ma anche…
25. 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.
30. 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 ".
32. 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.
34. 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.
38. 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.
44. 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>
45. 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>
46. 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>
47. 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>
48. LATITUDINE E LONGITUDINE
• La latitudine aumenta muovendosi verso nord
• La longitudine, invece, aumenta verso est
49. 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.
51. 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
52. 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>
53. • 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
54. <!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
55. 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.
56. 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
57. 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.
59. 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à.
61. 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.
62. 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.
64. 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.
65. 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.
66. 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"></scrip
t>
<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
69. 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.
71. 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.
72. 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).
73. 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>.
