This is an old revision of the document!
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 { 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"} }); }}}