How to change the name of "Base layer" and "Overlays" in LayerSwitcher?

Question

I would like to change the name of "Base layer" and "Overlays" in my LayerSwitcher div to something else.

I've noticed that the div including the texts only has a class and no ID which means it's little bit tricky to access.

I managed to change "Base layer" name with

document.getElementById("layerswitcher").firstChild.firstChild.innerHTML = "new name";

but I don't like this solution. Best would be if I could define the names directly with OpenLayers functions. Is there one?

I read something about using language translations but it's not what I'm after.

Answer 1

OpenLayers doesn't really provide functions to directly manipulate the text of those controls, but there is a way that's slightly more direct:

  layerSwitcher = map.getControlsByClass("OpenLayers.Control.LayerSwitcher")[0];

  layerSwitcher.baseLbl.innerText // (returns "Base Layer")
  layerSwitcher.dataLbl.innerText // (returns "Overlays")

You can just set those with:

  layerSwitcher.baseLbl.innerText = "YOUR NEW TEXT"
  layerSwitcher.dataLbl.innerText = "YOUR NEW OVERLAY TEXT"

Answer 2

Those texts are stored in the javascript object OpenLayers.Lang['lang_code'] at properties

• OpenLayers.Lang['lang_code']['Base Layer']
• OpenLayers.Lang['lang_code']['Overlays']

If you want only to change those two values you can rewrite them at runtime. You can do something like this:

var map = (OpenLayers.Map ); // your map reference
var layerswitcher = (OpenLayers.Control.LayerSwitcher) // layer swicher control reference
OpenLayers.Lang[OpenLayers.Lang.getCode()]['Base Layer'] = "My base label";
OpenLayers.Lang[OpenLayers.Lang.getCode()]['Overlays'] = "My over label";
// remove current instance of layers switcher from map if attached.
map.removeControl( layerswitcher );
map.addControl( new OpenLayers.Control.LayerSwitcher( { /* options here */ } ) );

I do not know how to create a 'lang_code' so you can setup your own language translations.