I love the layerswitcher feature in OpenLayers v2 (not using v3 right now). It's great to add to the map with one line of code! I just have one thing I'd like to change, and I'm not sure how.

When my application starts, there are defaulted visible and invisible layers. The LayerSwitcher correctly shows a checkbox if visibility is true, and unchecked if visibility is false. Several are checked but the checkbox is "disabled" or "greyed out" because while the layer's visibility is true, I've also specified what zoom levels to turn it on/off, and if I'm outside that zoom range when I look at the LayerSwitcher, then those layers are disabled in the control.

I'd really like to be able to select/unselect layers, even if currently not displayed do to the zoom level restriction. Maybe these could be color coded differently, but not disabled. Perhaps there is a CSS override I could use? Or some option I could pass in?

I suppose I could write my own layerSwitcher code, but that seems like a lot of work to change just one feature of the LayerSwitcher that comes with...

Here is an example of a layer that shows up in the LayerSwitcher but is greyed out if not at zoom levels 9, 10, or 11:

    var myLayer = new OpenLayers.Layer.WMS(
            "This layer is OFF by default",
                layers : 'MyLayer',
                transparent : "false",
                styles : '',
                srs : 'EPSG:900913'
            }, {
                isBaseLayer : false,
                visibility : false,
                resolutions : map.getScales(9, 11)

  • Please share the part of code where you are setting the layer visibility to True/False to help analyze the issue better
    – Wanjohi254
    May 6, 2015 at 13:48

1 Answer 1


Well, I should have done this in the first place... I looked at the source code. Here is an abbreviated look. The LayerSwitcher is an OpenLayers Class, and it has a method called redraw(). In this method see the final if statement I've included. It disables the checkbox if the layer is not in range. So if I want it to do something different, I need to change the source code in this method to leave the checkbox enabled, but perhaps change colors. But I'm guessing there may be other changes I need to make, perhaps the code assumes that when checking a layer it will always be in range (since it would be disabled otherwise). So it may not be a trivial thing to change... If I do make the changes and test them, I can post an update to this answer here. Here is the OpenLayers source code I am referencing, abbreviated:

OpenLayers.Control.LayerSwitcher = OpenLayers.Class(OpenLayers.Control, {

 * Method: redraw
 * Goes through and takes the current state of the Map and rebuilds the
 *     control to display that state. Groups base layers into a
 *     radio-button group and lists each data layer with a checkbox.
 * Returns:
 * {DOMElement} A reference to the DIV DOMElement containing the control
redraw: function() {
            if (!baseLayer && !layer.inRange) {
                inputElem.disabled = true;
  • I did comment these lines out and it works great. The layers that are not currently in range still display grey instead of white, so the user has a visual indication of this, but they can still check or uncheck (activate/deactivate) a layer even if it is not currently in range.
    – Brian B
    Oct 1, 2015 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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