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