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