====== OpenLayers: modificare gli stili ======

===== Foglio di stile =====

Nel codice HTML si include un foglio di stile dopo aver incluso OpenLayers:

<code html>
<script src="js/OpenLayers.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</code>

Solo alcuni stili possono essere modificati, ad esempio:

<code css>
#layerswitcher {
    /* This will work: */
    width: 250px;
    /* Does not work: overridden by the JavaScript constructor. */
    color: yellow;
    float: left;
}
</code>

Non funziona quando lo stile viene definito dinamicamente dal JavaScript di OpenLayers, si vede chiaramente con Firebug.

===== JavaScript =====

Si possono passare dei parametri al costruttore di un oggetto oppure modificare delle proprietà all'oggetto stesso. Ad esempio:

<code JavaScript>
var layerswitcher = new OpenLayers.Control.LayerSwitcher({
        'div':OpenLayers.Util.getElement('layerswitcher'),
        activeColor:'darkgreen'
    });
map.addControl(layerswitcher);
layerswitcher.div.style.position = 'fixed';
layerswitcher.div.style.top      = '0';
layerswitcher.div.style.right    = '0';
layerswitcher.div.style.width    = '180px';
layerswitcher.div.style.height   = '400px';
</code>

Non funziona quando il costruttore non prevede il parametro oppure se l'oggetto non espone la proprietà. Altro problema è la poca documentazione, conviene vedere i sorgenti e cercare la stringa "style".

===== Modificare il JavaScript originale =====

Il codice di OpenLayers è organizzato in diversi file sorgente. In produzione - per motivi di performance - viene compattato e incluso nell'unico file **''OpenLayers.js''**. Per effettuare piccole modifiche è conveniente prendere il singolo file sorgente, modificarlo e includerlo separatamente.

Se si desidera ad esempio modificare un **''OpenLayers.Control''**, si copia il sorgente dello stesso dalla directory dei sorgenti (es. **''lib/OpenLayers/Control/LayerSwitcher.js''**) e lo si include nell'HTML come script dopo aver incluso **''OpenLayers.js''**:

<code html>
<script src="js/OpenLayers.js" type="text/javascript"></script>
<script src="js/lib/OpenLayers/Control/LayerSwitcher.js" type="text/javascript"></script>
</code>

In questo modo si può eliminare la posizione hard-coded del layer switcher (e definirla in un foglio di stile):

<code javascript>
this.div.style.position = "absolute";
</code>


===== Utilizzare l'oggetto StyleMap =====

Esempio:

<code javascript>
var styleMap = new OpenLayers.StyleMap({
    "default": {
        strokeWidth: 1,
        strokeColor: "black",
        fillColor: "red"},
    "select": {
        fillColor: "yellow"}
});
</code>

===== Definire lo stile di un Vector layer =====

Esempio:

<code javascript>
var style = new OpenLayers.Style();

style.strokeColor   = "#FF0000";
style.strokeWidth   = 5;
style.strokeOpacity = 0.7;
style.fillColor     = "#FFA500";
style.fillOpacity   = 0.3;

var vector = new OpenLayers.Layer.Vector(label, {'style': style});
vector.addFeatures(
    new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.LinearRing(points_array),
        null,
        style
    )
);
</code>

===== Gesione zoom =====

Il livello **minimo** di **zoom** è associato al numero **zero** (slider tutto verso il simbolo **-**). Per sapere a quale valore di scala corrisponde ogni livello di zoom si può aggiungere questo codice al JavaScript:

<code javascript>
map.events.register("zoomend", layer_name, function() {
    alert("map Zoom: " + map.getZoom() + "\nmap Scale: " + map.getScale());
});
</code>

Il codice, associato formalmente ad un layer, viene in realtà eseguito al termine di ogni operazione di zoom e mostra il livello di zoom corrente e il valore di scala.

Aumentando un livello di zoom la scala raddoppia (dimezza il denominatore). Un layer può essere visibile solo a certi valori di scala impostando **''Layer.minScale''** e **''Layer.maxScale''**.

Ecco un esempio di come rendere visibile un layer solo ai livelli di zoom **5**, **6** e **7**:

^   ^ getZoom()  ^ getScale()  ^ Layer visibile  ^
| **+** |  9 |     316388.450 |  No  |
|       |  8 |     632776.900 |  No  |
|       |    |    1000000.000 |  maxScale  |
|       |  7 |    1265553.800 |  Sì  |
|       |  6 |    2531107.601 |  Sì  |
|       |  5 |    5062215.202 |  Sì  |
|       |    |    9000000.000 |  minScale  |
|       |  4 |   10124430.404 |  No  |
|       |  3 |   20248860.809 |  No  |
|       |  2 |   40497721.618 |  No  |
|       |  1 |   80995443.236 |  No  |
| **-** |  0 |  161990886.472 |  No  |

I parametri **''Layer.minResolution''** e **''Layer.maxResolution''** invece non si capisce bene a cosa servono. Il valore impostato in Layer.maxResolution è il valore restituito da ''Layer.getResolution()'' al minimo livello di zoom (zoom 0). Ad ogni livello successivo di zoom, il valore di ''Layer.getResolution()'' è dimezzato fino a raggiungere ''Layer.minResolution''. Ma a che serve?