Prima applicazione: un esempio minimo
Nell'esempio abbiamo creato una mappa, un e posizionato 4 punti d'interesse sulla mappa in corrispondenza di 4 citta'. Un semplice tooltip viene visualizzato passando il mouse sopra un'oggetto, e una breve descrizione cliccando sul punto.
Il codice html/javascript necessario per inizializzare la pagina (una volta scaricata la libreria grules) è:
<!-- This is needed only if we are using font icons (see style documentation) -->
<link href="http://mappe.rete.toscana.it/webstat/font_mappe/style.css"
rel="stylesheet" type="text/css"/>
<div id="map" style="width:600px; height:400px;">
</div>
<script src="http://mappe.rete.toscana.it/webstat/js/jquery.js"></script>
<script src="http://mappe.rete.toscana.it/webstat/js/jquery-ui.js"></script>
<script src="http://mappe.rete.toscana.it/webstat/openlayers/OpenLayers.js"></script>
<script src="http://mappe.rete.toscana.it/webstat/js/grules2.1.js"></script>
<script>
$(function() {
var citta = {
id: "citta",
geometry: [
{ id: '1', e:1617338, n:4845112, label: 'Pisa', text: "Città marinara" },
{ id: '2', e:1688226, n:4856128, label: 'Firenze', text: "Patria di Dante" },
{ id: '3', e:1749425, n:4801122, label: 'Arezzo', text: "Antica capitale etrusca" },
{ id: '4', e:1696928, n:4804151, label: 'Siena', text: "Antica città toscana" }
],
style: { externalGraphic: 'needles/drop/maraschino.png',
graphicWidth: 12, graphicHeight: 12, cursor: 'pointer' },
info: "<h3><%=label%></h3><p><%=text%></p>"
};
addLayer(citta);
});
</script>
Il div con id map conterrà la mappa, e tramite lo stile ne possiamo definire le dimensioni e il posizionamento.
È poi necessario caricare le librerie javascript: JQuery, OpenLayers e Grules
Infine dobbiamo specificare il contenuto della mappa: a questo scopo creiamo un'oggetto javascript (citta), e tramite la funzione addLayer aggiungiamo i punti definiti alla mappa.
Da notare come il codice sia contenuto all'interno di $(function() {...});, una funzione di JQuery che verrà eseguita non appena la pagina sia stata caricata
Definizione di un layer
Gli oggetti puntuali rappresentati sulla mappa sono organizzati in layers. Un layer contiene tutte le informazioni necessarie a rappresentare l'oggetto sulla mappa:
- Informazioni geografiche: dove reperire le coordinate dei punti, o del poligono vettoriale nel caso di aree o linee.
- Attributi alfanumerici: quali valori sono associati ad ogni oggetto geografico: dall'indirizzo di un edificio ad un'indice statistico assegnato ad un comune.
- Stile grafico: icone e colori per rappresentare punti, aree e linee, generalmente dipendono dagli attributi alfanumerici.
- Modelli: come presentare le informazioni alfanumeriche all'utente, nel caso di Grules, si tratta di piccoli template HTML.
- Interfaccia utente: come l'utente può interagire con la mappa, spegnendo e accendendo temi, scegliendo indicatori statistici, etc.
I principali attributi di un layer sono:
id
In questo caso citta è l'identificativo univoco del layer, sarà utile in seguito per accedere al layer
geometry
Contiene la posizione dei punti e le informazioni alfanumeriche, puo' essere fornita in formato XML, GeoJSON, o direttamente come oggetto javascript, come nell'esempio.
Il campo geometry è un'array di oggetti, in cui alcune chiavi giocano un ruolo particolare (e sono tutte opzionali, a parte id, e, n):
id: identificativo univoco del punto (del museo in questo caso)
label: etichetta attraverso la quale identificare il museo ('Musei Vaticani')
icon: useremo un'icona, diversa per ciascun museo per rappresentarli sulla mappa
width, height: dimensioni dell'icona
e, n coordinate Gauss-Boaga del punto
Altri campi (nell'esempio text) possono essere aggiunti.
style
Definisce l'aspetto degli oggetti geografici: icone, colori, dimensioni etc. l'elenco completo degli stili è disponibile nella documentazione di OpenLayers.
info
Specifica le informazioni relative ad un oggetto, generalmente un piccolo template in formato EJS, un semplice linguaggio di scripting in Javascript.
L'elenco completo degli attributi di un layer è disponibile alla relativa pagina di documentazione