Documentazione Grules, versione 2.1


Stili per gli oggetti geografici

Definire uno stile per un'applicazione significa specificare quali attributi grafici per gli oggetti geografici: colori, dimensioni, icone etc.

Documentazione dettagliata sugli attributi utilizzabili è reperibile nella documentazione di OpenLayers

Stile comune di base

Sono gli attributi grafici comuni a tutti gli oggetti di una mappa, per esempio, se tutte le aree dell'applicazione sono dello stesso colore:

{ default { "fillColor": "#aa0000" }, 
  select { "fillColor": "#aaaa00" } }

Style Map

L'assegnamento di un colore (o altro attributo grafico) ad ogni provincia avviene tramite la costruzione di una 'style map'; un oggetto javascript che associ ad ogni provincia una stile grafico.

Nella copertura grules possiamo usare come chiave per indirizzare le province il codice istat (es. 049) o il nome (es. Livorno) per esempio:

Questo file può essere generato staticamente, dinamicamente (server-side) tramite PHP o JSP, oppure il corrispondente oggetto Javascript generato usando appunto Javascript

È importante che il formato sia corretto: ogni keyword tra apici, e in particolare attenzione a non mettere qualche virgola di troppo.

var styleMap = {
"default": {
 "045": { "fillColor": "#f00"},
 "046": { "fillColor": "#d00"},
 "047": { "fillColor": "#b00"},
 "049": { "fillColor": "#930"},
 "050": { "fillColor": "#750"},
 "051": { "fillColor": "#570"},
 "052": { "fillColor": "#390"},
 "053": { "fillColor": "#1b0"},
 "054": { "fillColor": "#0d0"},
 "100": { "fillColor": "#0f0"},
 "048": { "fillColor": "#0f0"}
 },
"temporary": {
 "045": { "fillColor": "#f07"},
 "046": { "fillColor": "#d07"},
 "047": { "fillColor": "#b07"},
 "049": { "fillColor": "#937"},
 "050": { "fillColor": "#757"},
 "051": { "fillColor": "#577"},
 "052": { "fillColor": "#397"},
 "053": { "fillColor": "#1b7"},
 "054": { "fillColor": "#0d7"},
 "100": { "fillColor": "#0f7"},
 "048": { "fillColor": "#0f7"}
 }
}

default è lo stile di disegno mentre temporary è lo stile del mouseover (o highlight), fill color specifica il colore interno alla provincia.

Uso di font icons

Al posto delle icone é possibile usare un font (in particolare quello definito nella directory font_mappe):

...
style: {
  labelSelect: true,    //this is needed to allow the icon to be selected by the user, (false by default)
  cursor: 'pointer', 
  fontSize:21,
  fontFamily: "font_mappe",  //you can use any font loaded, of course
  fontColor: #F00,
  label: "\ue60f",           //utf-8 code point
  labelOutlineColor: #800,
  labelOutlineWidth: 1,
  albelOutlineOpacity: 0.5
}
...

Functions

Attribute can be defined as a function of some parameter in the feature attributes.

...
style: {
    pointRadius: function(f) { return f.attributes.size; }
}
...