Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 3 down vote accepted

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.

share|improve this answer
Thank you but I decided to create a complete own layerswitcher div instead, with own javascript calls to switch layers etc. mostly because I wanted full control of div ids and classes etc. – Oskar Karlin Dec 18 '12 at 15:10

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"
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.