Ldb 25 strumenti gis e webgis_2014-05-29e30 de lorenzis - api di google maps

Ing. Sergio De Lorenzis

Alba Project s.r.l.

email: [email protected]

INTRODUZIONE ALLE API DI

mailto:[email protected]

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)


• 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).


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).


«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

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…

https://developers.google.com/maps

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.


<!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>


<!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&parameters

• {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


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).



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.



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.



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).


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()); });


</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>


JS-03-Add-Marker.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);

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.

https://developers.google.com/kml/documentation/kmlreference?hl=it

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.

https://developers.google.com/kml/documentation/kmlreference?hl=it

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!!!

Ldb 25 strumenti gis e webgis_2014-05-29e30 de lorenzis - api di google maps

Technology

Transcript of Ldb 25 strumenti gis e webgis_2014-05-29e30 de lorenzis - api di google maps