In questo articolo HTML5 sarà spiegato il funzionamento delle API per la geolocalizzazione e verrà mostrato come utilizzare questo nuovo standard per localizzare la posizione di un utente e mostrarla su una mappa di Google.
A questo indirizzo è possibile leggere un articolo introduttivo a riguardo nel quale è mostrato come verificare se un browser supporta le API per la geolocalizzazione.
Geolocalizzazione
Geolocalizzare un browser utente significa identificare le coordinate geografiche, ovvero latitudine e longitudine, della posizione, o area, dalla quale arriva la richiesta HTTP dello stesso client.
Questo è possibile attraverso l'analisi dell'indirizzo IP del client connesso.
Una premessa
Le specifiche di sicurezza delle attuali API prevedono che i browser implementino un sistema di notifica per richiedere all'utente il consenso a rilevare le proprie coordinate.
L'oggetto Geolocation
Tramite l'implementazione dell'interfaccia navigator esposta dal browser (solo quelli che supportano le API in discussione) è possibile accedere ad un'istanza di classe che implementa l'interfaccia Geolocation.
E' grazie a quest'ultima che si recuperano le coordinate geografiche del client e si gestisco eventuali errori di diversa natura.
Al fine di recuperare la posizione geografica, l'oggetto geolocation espone il metodo getCurrentPosition(successCallback,errorCallback,options), i tre parametri in ingresso sono:
- successCallback: il nome della funzione di callback che verrà invocata qualora non vi siano errori nella rilevazione della posizione. Alla funzione verrà passato un oggetto di tipo Position il quale espone anche i valori di latitudine e longitudine.
- errorCallback: il nome della funzione di callback che verrà invocata qualora si verificassero errori nella rilevazione della posizione al fine di gestire l'inconveniente. Alla funzione verrà passato un oggetto di tipo PositionError il quale espone il codice identificativo dell'errore.
- options: un'istanza della classe PositionOptions grazie alla quale è possibile configurare alcuni parametri della richiesta come ad esempio l'accuratezza della rilevazione.
Siccome questo articolo non si prefigge l'analisi e la spiegazione completa dell'interfaccia Geolocation, per qualunque approfondimento fate riferimento alla documentazione ufficiale W3C o alla documentazione ufficiale delle implementazioni offerte da ogni produttore di browser.
Posizionare un client su una mappa
Di seguito un esempio dell'utilizzo delle sopracitate API nel quale al caricamento della pagina, composta di un IFRAME, viene eseguita una chiamata alla funzione getEmbeddedGMap() la quale, dopo aver rilevato le coordinate geografiche del browser, si occuperà di comporre la query per richiamare il servizio Google Maps e di fare apparire la mappa, sulla quale è posizionato il client, nell'elemento iframe.
La funzione getEmbeddedGMap() è in grado di gestire eventuali errori durante il recupero delle coordinate geografiche del browser utente.
Siccome alcuni browser (soprattutto Chrome) non eseguono la localizzazione se la pagina è locale, a questo indirizzo è possibile eseguire lo script dell'esempio.
<!DOCTYPE html>
<html>
<head>
<title>Mappa Google con HTML5 Geolocation</title>
<script type="text/javascript">
/**
* Interfaccia le API per localizzare il browser.
* Se l'operazione ha successo visualizza la mappa
* su cui è posizionato il client, altrimenti gestirà l'errore.
*/
function getEmbeddedGMap(){
if(testGeo())
navigator.geolocation.getCurrentPosition(
createMap, manageError, {enableHighAccuracy:true});
}
/**
* Verifica che il browser utente supporta le API.
*
* @return boolean
*/
function testGeo(){
if(!!navigator.geolocation)
return true;
alert('Il browser non supporta la Geolocalizzazione.');
return false;
}
/**
* Accede ai valori di latitudine e longitudine del client
* e compone la query per richiamare il servizio
* di mappe online di Google e mostrare il risultato
* nell'IFRAME.
*
* @param position istanza della classe Position.
*/
function createMap(position){
var qry = 'http://maps.google.it/maps?hl=it&ie=utf8&q='
+ position.coords.latitude + ','
+ position.coords.longitude
+ '&z=17&output=embed';
document.getElementById('gMapPlace').src = 'qry';
}
/**
* Gestisce eventuali errori durante la rilevazione
* delle coordinate geografiche del browser.
* Accede al codice di errore dell'oggetto ricevuto
* e lo decodifica.
*
* @param err istanza della classe PositionError.
*/
function manageError(err){
switch(err.code){
case 1:
alert('PERMISSION DENIED');
break;
case 2:
alert('POSITION ANAVAILABLE');
break;
case 3:
alert('TIMEOUT');
break;
default:
alert('UNKNOWN ERROR');
}
}
</script>
</head>
<body onload="getEmbeddedGMap();">
<h2>Posizione sulla mappa</h2>
<iframe id="gMapPlace" style="width:400px; height: 400px;"></iframe>
</body>
</html>
Il codice sorgente è ben organizzato, ben commentato e di facile comprensione quindi ritengo che non ci sia nient'altro da spiegare; in compenso è il caso di sottolineare quanto sia stato facile eseguire questa operazione, il che è sicuramente merito del team di sviluppo che ha progettato e realizzato queste API.
Alla prossima,
MA.
ciao,
RispondiEliminaho scoperto il tuo blog per caso.
Sei molto "rigoroso" ma allo stesso tempo chiaro... ed è una cosa non semplicissima.
Complimenti!!
Grazie oly1982 :)
RispondiEliminaCi vedremo su Twitter.
Bye da @Magirtiko ;)