So last week I was putting some new imagery online and was building a quick map interface in OpenLayers. However, I had more layers than would appear in the LayerSwitcher if it was contained within the map div. OpenLayers makes it easy enough to pull the LayerSwitcher out into its own div with

map.addControl(new OpenLayers.Control.LayerSwitcher({‘div’:OpenLayers.Util.getElement(‘layerswitcher’)}));

But this Leaves you with the LayerSwitcher hopelessly pinned in the upper right corner of the screen as far as I can tell. If someone knows a easy way to place the LayerSwitcher other than what I tried let me know.

In anycase whether or not any of the following is a good idea remains to be decided, but it got me where I wanted to go the other day. I wanted a solution that didn’t involve altering OpenLayers.js or it’s styelsheets.

First, I yanked the LayerSwitcher out of the map div and into it’s own with the id “layerswitcher” using the line of JavaScript above.

Next I Wrapped that “layerswitcher” div in a wrapper div and positioned it on the left hand side of the screen. The “layerswitcher” div inherits from the wrapper to force the position. The trick to making the style overrrides work is to add the !important tag to each style of the “layerswitcher” div, without this the default styles will persist.

<div id=”layerwrapper”  style=”position:absolute; top:82px; left:0px; width:208px;”>
<div id=”layerswitcher” style=”position:inherit !important; width:208px !important; “></div>
</div>

The last step was a little hacky, but seems to work (its been going fine for about 4 days now). Without this next bit the LayerSwitcher overflowed the div containing it, letting the background color spill out past where I would have liked. So to alter the style of the actual LayerSwitcher at load I found out that the actual layer list seems to be contained in a block with id “OpenLayers.Control.LayerSwitcher_214_layersDiv”. Seems to be the same id every time so far; I tracked it down with FireBug in Firefox. The reason it overflowed was that it had a width set to 100% and 75px of right padding. So I put these two lines in my init() function that fires onload():

document.getElementById(“OpenLayers.Control.LayerSwitcher_214_layersDiv”).style.width = “198px”;
document.getElementById(“OpenLayers.Control.LayerSwitcher_214_layersDiv”).style.padding = “5px 0px 5px 10px”;

You can see how it looks in the screenshot here. As I said not sure if any of this is a good idea or good practice, but I got what I was going for. When I have more time I’ll make a nice external menu with GeoEXT, but for now this got the site online.