Table of Contents

OpenLayers: modificare gli stili

Foglio di stile

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

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

Solo alcuni stili possono essere modificati, ad esempio:

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

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:

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';

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:

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

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

this.div.style.position = "absolute";

Utilizzare l'oggetto StyleMap

Esempio:

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

Definire lo stile di un Vector layer

Esempio:

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
    )
);

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:

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

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
6 2531107.601
5 5062215.202
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?