1 marzo, 2010 | di in » Didattica

Era da un po’ che avevo in mente di dedicare un articolo a jQuery, finalmente – complici l’influenza che mi ha tenuto a riposo forzato e l’ispirazione tratta da Linfiniti – sono riuscito nell’intento.

Per chi non lo sapesse, jQuery è un framework Javascript open source molto potente, caratterizzato da una sintassi snella e di facile comprensione.
Il framework è rilasciato con doppia licenza: MIT e GPL.
I motivi per usare jQuery nei propri progetti non mancano di certo: comunità attiva, disponibilità di molti temi e ottimi plugin, compatibilità e leggerezza sono i primi che mi vengono in mente.

In questo articolo vedremo come costruire una mappa online sfruttando jQuery UI e OpenLayers.
Il risultato della “fusione” è un client dotato di funzionalità di base come zoom, pan, misurazione delle distanze e vari layer di sfondo intercambiabili.
Si tratta, in pratica, di un template da cui partire per sviluppare applicazioni di web-mapping vere e proprie.

jquery_openlayers

Per creare il client dell’esempio abbiamo bisogno di:

Ho già raccolto il tutto in questo archivio .zip. Qui dentro, oltre alle librerie, si trova la totalità dei file che compongono il client. Vi basta quindi cliccare sul link per avere il template sul vostro computer, pronto all’uso e/o ad essere trasformato come volete.
Vi invito però a dare lo stesso un’occhiata alla pagina di download di jQuery UI: noterete che è possibile modificare radicalmente il pacchetto prima di scaricarlo. Potete includere le sole componenti utili ai vostri scopi e scegliere tra vari temi già pronti o uno composto da voi con ThemeRoller.
Io ho fatto solo qualche semplice modifica al tema UI-Darkness (in questo periodo non mi piacciono i bordi arrotondati…) ma, come dicevo, si può fare molto di più. Provare per credere.

Ora un po’ di anatomia.
Scompattato l’esempio, è bene posare lo sguardo su alcune delle directory e dei file compresi al suo interno.

jsLib

E’ la directory contenente tutte le librerie elencate in precedenza, necessarie al funzionamento del template.

index.html

Nella sezione header sono referenziate le librerie utilizzate, i fogli di stile e i file javascript.
Nel body è possibile notare che l’attributo class di molti degli elementi della pagina (div, button, span, ecc.) è parecchio popolato. Questo è il metodo con cui jQuery UI e jQueryUI.Layout si “ancorano” alla pagina web.
Per comprendere meglio vi rimando alla pagina degli esempi di jQuery UI.Layout e a questo articolo che spiega in maniera egregia la composizione della toolbar e dei suoi pulsanti.

jsFunc/mappa.js

Contiene la mappa realizzata con OpenLayers.
Nella funzione di inizializzazione (initMap) richiamata al caricamento della pagina, ci sono, tra le altre cose, i controlli collegati ai bottoni della toolbar.

jsFunc/layout.js

In questo script, con poco più di 40 righe di codice, jQuery UI e i suoi plugin definiscono Il layout dell’applicazione, il tema, il comportamento e l’aspetto di bottoni e tooltip.

Css/style.css

A parte qualche piccola “frivolezza” come queste (a mio giudizio) bellissime icone, in questo foglio di stile sono descritte le regole fondamentali per la corretta presentazione del layout e della toolbar creati tramite jQuery UI.

Ecco, questo è grossomodo ciò che bisogna sapere per iniziare a studiare i mille modi di mescolare le potenzialità di jQuery a quelle di OpenLayers.
Fondamentale, come sempre, è il ricorso alla documentazione ufficiale dei vari progetti e al supporto offerto dalla comunità.
Per chiudere segnalo anche due guide in italiano, estremamente ben fatte ed utilissime per avvicinarsi a jQuery e jQuery UI. Entrambe sono firmate HTML.it:
Guida a jQuery
Guida a jQuery UI

Attenzione! Questo è un articolo di almeno un anno fa!
I contenuti potrebbero non essere più adeguati ai tempi!

10 Responses to “jQuery e OpenLayers: agitare prima dell’uso…”

  1. By Pietro Blu Giandonato on mar 1, 2010

    Ottimo Alessio,
    ancora un piccolo grande articolo per dare i giusti spunti a chi vuol costruire webmappe pulite, semplici ed efficaci.
    A chi dice che il webmapping sia eresia nel mondo dei GIS… ce ne fossero altri mille!
    La geografia si diffonde anche con questo…

  2. By Giovanni on mar 1, 2010

    Complimenti, e grazie, Alessio!

  3. By Andrea Borruso on mar 1, 2010

    Ale, nonostante sia un post scritto con un mac l0 apprezzo molto ;-)
    Mi hai rubato l’idea, anche io difatti ero rimasto folgorato da linfiniti e volevo rilanciare. Meglio così, perché io non sarei riuscito a concretizzare.

    E’ un contributo molto stimolante anche dal punto di vista creativo.

    Grazie

  4. By Alessio on mar 1, 2010

    T’ho battuto sul tempo, ti stai facendo vecchio fratello! :-D

    Per quanto riguarda il mac: GNU/Linux io ce l’ho installato pure nella caffettiera… potrò permettermelo qualcosa di diverso ogni TANTO! Chi me li sfama tutti quei pinguini poi? :P

    Schezi a parte, grazie a tutti per aver lasciato una traccia.

  5. By Jan Schorn on mar 11, 2010

    Hi, really sexy the jquery-openlayers portal! thanks a lot for your ideas :-)
    there is a recent ongoing wiki and a mailing list about JQuery and OL integration called ‘geoJQuery’, in http://www.geojquery.com
    Please feel free and participate!

  6. By Alessio on mar 11, 2010

    Hi Jan,

    I saw the geojquery wiki some days ago and I said “COOL!” :D
    A framework based on jQuery and OL is potentially a great thing…
    I immediately subscribe the list and I hope I’ll contribute with ideas and code in the future.

    Thanks a lot for your post

    ciao

  7. By Filippo on mar 18, 2010

    Ciao,
    prima di tutto volevo fare i complimeti a tutta la squadra di Tanto. I vari articoli che periodicamente pubblicate sono molto utili e consentono un aggiornamneto continuo per tutte le tematiche legate all’informazione geografica.

    Vorrei utilizzare jquery per pubblicare delle carte tematiche e collegare le diverse categorie ad una scheda descrittiva dell’elemento selezionato.

    Esempio:
    visualizzare i numeri civici delle diverse attività commerciali di una pubblica amministrazione con una scheda completa dell’attività selezionata.

    Grazie

  8. By Alessio on mar 18, 2010

    jQuery ti consente di manipolare gli oggetti lato client, ma non è una “libreria spaziale”.

    Se vuoi fare tutto lato client, usa OpenLayers e passagli i layer in formato GeoJson, KML, GML o GeoRSS. E’ chiaro che una soluzione del genere va bene (anzi, benissimo) per quantità relativamente esigue di dati, oltre le quali devi iniziare a considerare un mapserver (umn-mapserver, geoserver, ecc.) per tirare su dei servizi verso cui lanciare le richieste (es: getfeatureinfo nel caso del wms).

    Comunque, ti consiglio di dare un’occhiata qui prima di porti il problema di usare jQuery. Quello è un passo successivo.

    Ciao

  1. 2 Trackback(s)

  2. mar 3, 2010: GIS-Lab Blog» Архив блога » Новости вокруг 41
  3. mar 7, 2010: alessiodilorenzo.it » Benvenuti

Lascia un commento

Tag html consentiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


8 + 2 =


TANTO non rappresenta una testata giornalistica ai sensi della legge n. 62 del 7.03.2001, in quanto non viene aggiornato con una precisa e determinata periodicita'. Pertanto, in alcun modo puo' considerarsi un prodotto editoriale.