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; }
}
...