jQuery UI Map è un buon plug-in jQuery per incorporare mappe all'interno delle nostre applicazioni Web/mobile. Risulta flessibile, personalizzabile e leggero (4kb), ed è specializzato nell'interfaccia con le API di Google Maps.
In questo articolo vedremo un assaggio di come questo plugin semplifichi l'interazione con le API di Google consentendo non solo di visualizzare mappe e marcatori, anche ma di usufruire anche di servizi avanzati come la gestione di percorsi, la visualizzazione in modalità Street View, il caricamento dinamico di dati geografici rappresentati in JSON o etichettati tramite microformat e microdata.
Iniziamo subito con la realizzazione di un client dotato di funzionalità di base come zoom, pan e misurazione delle distanze. Si tratta di costruire un template da cui partire per sviluppare applicazioni di web-mapping vere e proprie.
Dopo aver creato un div
o un altro contenitore HTML analogo è il momento di lanciare gmap, il metodo chiave del plug-in che ci consente di invocare le funzioni delle API di Google Maps a cui dare in pasto le coordinate per la visualizzazione di un marker di riferimento nella mappa:
$('#div').gmap().bind('init', function(ev, map) {
$('#div').gmap('addMarker', {'position': '57.7973333,12.0502107','bounds': true})
.click(function() {
$('#div').gmap('openInfoWindow', {'content': 'You Are Here'}, this);
});
});
Ora possiamo implementare questo esempio rendendo dinamiche le coordinate geografiche per visualizzare in tempo reale la posizione in cui ci troviamo, potremmo effettuare dei test con un dispositivo mobile sfruttando la Geolocation di HTML5:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
long = position.coords.longitude;
});
}
Un'altra caratteristica importante di jQuery UI Map è la possibilità di compilare una mappa dai microformati: il plug-in infatti supporta la formattazione della classe hCard
nel documento HTML. Una soluzione piuttosto promettente, vista la migrazione dei linguaggi verso una logica semantica, per la presentazione delle pagine web, sia sotto il profilo SEO in quanto favorisce l'indicizzazione delle pagine.
Un esempio è disponibile su questo link:
Bootstrap Twitter e jQuery UI Map
Vediamo come far interagire Bootstrap (il framework di Twitter) e jQuery-UI-Map. Servendoci del plug-in di autocomplete "Typeahead" di Bootstrap possiamo rendere più semplice ed interattiva la ricerca dell'indirizzo da visualizzare nella mappa, fornendo così all'utente uno strumento per interagire all'interno dell'applicazione.
Iniziamo nel creare il typeahead per la ricerca supportato da uno array-store di indirizzi che andiamo a dare in pasto alla classe google.maps.Geocoder()
per ottenere le relative coordinate geografiche. A questa punto non resta altro che passare le coordinate al plug-in di jQuery-UI-Map ed il gioco è fatto.
Nell'esempio allegato troviamo il codice completo.
Utilizzare jQuery UI Map nel contesto Bootstrap offre la possibilità di lavorare all'interno di un layout fluido che si adatta in maniera autonoma alle dimensioni del dispositivo che ha effettuato la richiesta, saremo in grado di progettare una web-application che non vada in errore su dispositivi mobile, senza dover adattare il codice del plug-in.
Sicuramente un ottimo punto di partenza, ma dobbiamo prestare attenzione al fatto che una mappa costruita con le JavaScript API deve possedere almeno una dimensione fissa, in modo che le API riescano a calcolare accuratamente la dimensione della mappa. Progettando un tipico layout con header
, footer
e sidebar
sulla sinistra, saremo in grado di determinare altezza e larghezza del contenitore centrale in cui visualizzare la mappa dinamicamente, in questo modo la dimensione del contenitore è fissa e non appena la mappa viene reindirizzata può essere modificata dinamicamente a seconda della dimensione della finestra del browser.