Loading...
In questo articolo vedremo come utilizzare le API di geolocalizzazione offerte dal nuovo standard HTML5.
In questo articolo vedremo come utilizzare le API di geolocalizzazione offerte dal nuovo standard HTML5.
In passato per determinare la posizione di un device si utilizzava il suo indirizzo IP, ottenendo però una rilevazione non accurata della sua posizione attuale.
Invece, secondo le specifiche redatte dal W3C per HTML5 (che possiamo trovare a questo indirizzo), le API di geolocalizzazione sono “agnostiche” riguardo la sorgente utilizzata per la localizzazione che può essere un segnale GPS, una triangolazione basata sulle celle UMTS/GSM oppure altre possibili tecniche.
Dunque non è specificata quale sorgente utilizzare ma l’accuratezza varia di molto in base alla tecnica utilizzata (e può essere fornita una misura di tale precisione).
Inoltre, affinché un’applicazione web ottenga la posizione geografica, è necessario che il sistema operativo ed il browser supportino tale funzionalità.
Per quanto riguarda la privacy, la richiesta della posizione geografica, da parte di un a possibile applicazione web, è sempre preceduta da una richieste esplicita fatta all’utente pertanto è l’utente a dover accettare esplicitamente di voler fornire al browser questo dato. Ad esempio in Firefox viene visualizzata una barra che chiede il consenso:
Per quanto riguarda la compatibilità, le versioni recenti di tutti i browser (anche nelle loro versioni mobile) supportano questa funzionalità con l’esclusione di Internet Explorer almeno fino alla versione 8.
Per poter utilizzare l’API, la prima cosa da fare è ottenere un oggetto navigator.geolocation, se non è disponibile possiamo visualizzare un alert di errore:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(callback);
} else {
alert("Il browser non supporta la GeoLocalizzazione");
}
L’oggetto navigator.geolocation ha tre metodi:
void getCurrentPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);
long watchPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);
void clearWatch(in long watchId);
il metodo getCurrentPosition() è il metodo utilizzato per ottenere la posizione corrente, esso può ricevere uno, due e tre parametri:
- il primo è una funzione che viene richiamata in caso di esito positivo nel recuperare le informazioni sulla posizione
- il secondo è una funzione richiamata in caso di insuccesso o di errore
- il terzo sono parametri opzionali come l’attributo enableHighAccuracy, timeout e maximumAge.
Il metodo watchPosition() monitora la posizione corrente iniziando un processo asincrono di controllo. In poche parole controlla se la posizione corrente cambia ed aggiorna i valori ritornati dal metodo.
Il processo avviato tramite watchPosition() termina nel momento in cui chiamiamo il metodo clearWatch(), passandogli come id il valore ritornato da watchPosition().
Le funzioni di callback hanno questa interfaccia:
interface PositionCallback {
void handleEvent(in Position position);
};
interface PositionErrorCallback {
void handleEvent(in PositionError error);
};
Nella funzione successCallback ritroviamo come parametro un oggetto che implementa la interfaccia Position che a sua volta ingloba un attributo con interfaccia Coordinates, che sono le informazioni reperite dall’API riguardo la geolocalizzazione:
interface Coordinates {
readonly attribute double latitude;
readonly attribute double longitude;
readonly attribute double? altitude;
readonly attribute double accuracy;
readonly attribute double? altitudeAccuracy;
readonly attribute double? heading;
readonly attribute double? speed;
};
dove gli attributi preceduti dal simbolo ? sono opzionali e possono ritornare il valore null.
Facciamo ora un esempio, reperendo le informazioni di localizzazioni e visualizzandole su di una Google Maps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function mostraPosizione(){
if(navigator.geolocation) {
function getPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var titlemarker = "Tu sei qui! <br/>" +
"Latitudine: " + position.coords.latitude+ "<br/>" +
"Longitudine: " + position.coords.longitude+"<br/>" +
"Precisione: " + position.coords.accuracy ;
myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
mapDiv = document.getElementById("mapDiv"),
map = new google.maps.Map(mapDiv, myOptions),
marker = new google.maps.Marker({
position: point,
map: map,
title: "Sei qui!"
});
var infowindow = new google.maps.InfoWindow({
content: titlemarker
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function handle_errors(error){
switch(error.code)
{
case error.PERMISSION_DENIED: alert("L''utente non ha condiviso i dati per la geolocalizzazione");
break;
case error.POSITION_UNAVAILABLE: alert("Non è possibile determinare la posizione attuale");
break;
case error.TIMEOUT: alert("Time Out nel determinare la posizione");
break;
default: alert("Errore sconosciuto");
break;
}
}
navigator.geolocation.getCurrentPosition(getPosition,handle_errors);
}
}
</script>
<style>
#mapDiv {
width:600px;
height:400px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<input type="button" value="Mostra Posizione" onClick="mostraPosizione()"/>
</body>
</html>
Possiamo vedere l’esempio in azione a questo indirizzo:
http://www.appuntisoftware.it/codeexamples/html5/geolocation.html
Update
Google Chrome ha deprecato la funzione di geolocalizzazione a partire dalla versione 50, in particolare essa non è più supportata se viene effettuata da siti/applicazioni che fanno uso del protocollo HTTP; con il browser Chrome viene infatti generato il seguente errore:
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.L’applicazione deve dunque utilizzare un protocollo sicuro HTTPS.
COMMENTS
Complimenti per la spiegazione e per il codice molto utile, soprattutto per chi si riesce a connettere con il cell e sapere dove si trova, ma in questo preciso caso, è possibile indicare con altri marker la posizione di quello che interessa a me? per esempio: sto girando per Padova che è la mia città e accedo a questo servizio con il mio cell, andando sulla mia pagina web contenete il codice qui creato e oltre a dirmi dove sono, mi dovrebbe anche indicare i posti a me preferiti avendoli comunque precedentemente inseriti con la precisa longitudine e latitudine.
Si può fare questa aggiunta con tutti i marker che voglio?
grazie!