Geolocalizzazione HTML5
Come poter individuare la posizione corrente dell’utente che sta navigando sul nostro sito web? Vediamo di fare luce su questa tecnica tramite la quale saremo in grado di mostrare la posizione reale di chi sta navigando e di poterla utilizzare per fornire particolari tipi di servizi. Ultimamente infatti, per un lavoro recente che ho dovuto progettare, mi è stato chiesto di implementare un servizio web tramite il quale sia possibile recuperare la posizione dell’utente e di mostrare una lista di locali dal più vicino al più lontano in base alle coordinate di latitudine e longitudine.
Nota: E’ importante menzionare che per proteggere la privacy dell’utente è fatto divieto di utilizzo delle suddette informazioni senza preventivo consenso esplicito.
Nota: La geolocalizzazione è molto più precisa ed accurata per dispositivi dotati di GPS, come ad esempio gli smartphone.
- Conoscenze richieste: Javascript intermedio, HTML base, programmazione base
- Requisiti funzionamento: JavaScript, HTML, CSS, registrazione per utilizzo di API
- Difficoltà: livello intermedio
Che cos’è la geolocalizzazione?
Innanzitutto spieghiamo in breve che cosa si intende per geolocalizzazione.
Secondo la definizione fornita da Wikipedia la geolocalizzazione è l’identificazione della posizione geografica nel mondo reale di un dato oggetto, come ad esempio un telefono cellulare o un computer connesso o meno ad Internet, secondo varie possibili tecniche.
Le tecnologie più utilizzate si suddividono tra sistemi di localizzazione basati su segnale radio (radiolocalizzazione), sistemi per via cablata o sistemi ibridi:
- GPS: è basato sui segnali radio ottenuto da satelliti artificiali in orbita attorno alla Terra;
- Localizzazione tramite le celle della rete telefonica cellulare: si analizza la potenza del segnale radio di ogni cella telefonica in relazione alla rispettiva stazione radio base (che ha coordinate geografiche note) collegata con il dispositivo mobile o terminale e ne viene determinata la distanza da questa in base alla conoscenza dell’attenuazione dell’ambiente di radiopropagazione;
- Tramite la rete WiFi o WLAN: è basato sul segnale delle diverse fonti WiFi, le quali vengono a loro volta localizzate tramite la Rete Internet;
- Rete Internet: tramite l’indirizzo IP della propria rete Internet, dove la localizzazione dipende dalla registrazione del collegamento ad un database;
Compatibilità col Browser
La proprietà geolocalizzazione dell’oggetto globale navigator ci fornisce una mano nell’identificare se il browser supporta le API per la geolocalizzazione.
|
1 2 3 4 5 6 7 |
<script> if (navigator.geolocation) { // otteniamo la posizione corrente dell'utente } else { alert('Il tuo browser non supporta la geolocalizzazione.'); } </script> |
La geolocalizzazione HTML5
Useremo il metodo getCurrentPosition() per ottenere la posizione attuale dell’utente. Nell’esempio sottostante viene mostrate una semplice implementazione di Geolocalizzazione ritornando come valori la latitudine e la longitudine della posizione dell’utente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Il tuo browser non supporta la geolocalizzazione."; } } function showPosition(position) { x.innerHTML = "Latitudine: " + position.coords.latitude + "<br>Longitudine: " + position.coords.longitude; } </script> |
Nell’esempio precedente viene prima di tutto verificato se la geolocalizzazione è supportata. Nel caso sia vera la condizione viene chiamato il metodo getCurrentPosition(), altrimenti viene visualizzato un messaggio all’utente.
Se il metodo getCurrentPosition() viene invocato allora ritorna un oggetto con le coordinate di posizione alla funzione specificata come parametro ( showPosition ). La funzione showPosition() mostrerà a schermo la latitudine e la longitudine.
Questo esempio è un implementazione base della tecnica di Geolocalizzazione, senza la gestione degli errori.
