OpenLayers: modificare gli stili

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.

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”.

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

Esempio:

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

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

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:

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?