Display WMS Layer Based on Zoom Level

Question

I've been at this all day long and honestly I'm out of ideas. I have some WMS layers that I would like to display/not display depending on the current zoom level. Yes, I have went through the API docs and they seem to be clear as day, but I follow everything that is suggested and I'm not getting the results desired :(

This was one of the sources that I looked at: http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels

Then to make matters even worse I found out that if you have an Open Street Map base layer displaying on load it seems to limit your control over the map's numZoomLevels, just what I needed, since I DO want to use this as my loading base layer...

So my questions are:

What am I doing wrong? Is it true that there really is no workaround on the control of zoom levels when using an Open Street Map base layer on load? Or is there something I just don't know?

Here are some of my code attempts: Take 1: tib_villages layer should only show when the zoom level is 8-10, doesn't work!

var options = {
                                        controls: [new OpenLayers.Control.Navigation()], //Needed to use GeoExt controls such as the zoomslider
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            units: 'm',
            numZoomLevels: null, //setting the map's zoom levels to null
            allOverlays: false
        }

var osm = new OpenLayers.Layer.OSM(); //MY base layer

//MY overlay layer
var tib_villages = new OpenLayers.Layer.WMS(
                    "Villages", "http://localhost:8080/geoserver/wms", {layers: 'cite:tib_villages', transparent: true, numZoomLevels: 10, minZoomLevel: 8}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
                );

Take 2: tib_villages layer should only show when the zoom level is 8-10, map should only have 10 zoom levels, but instead has 19 as the Open Street Map Layer enforces it to, doesn't work!

var options = {
                                        controls: [new OpenLayers.Control.Navigation()], //Needed to use GeoExt controls such as the zoomslider
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            units: 'm',
            numZoomLevels: 10, //setting the map's zoom levels to 10 only
            allOverlays: false
        }

var osm = new OpenLayers.Layer.OSM(); //MY base layer

//MY overlay layer
var tib_villages = new OpenLayers.Layer.WMS(
                    "Villages", "http://localhost:8080/geoserver/wms", {layers: 'cite:tib_villages', transparent: true, numZoomLevels: null, minZoomLevel: 8}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
                )

;

Take 3: After getting rid of the Open Street Map base layer on load, the map only has 10 zoom levels as specified, but tib_villages layer should only show when the zoom level is 8-10, doesn't work!

var options = {
                                        controls: [new OpenLayers.Control.Navigation()], //Needed to use GeoExt controls such as the zoomslider
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            units: 'm',
            numZoomLevels: 10, //setting the map's zoom levels to 10
            allOverlays: false
        }

//MY overlay layer
var tib_villages = new OpenLayers.Layer.WMS(
                    "Villages", "http://localhost:8080/geoserver/wms", {layers: 'cite:tib_villages', transparent: true, numZoomLevels: 10, minZoomLevel: 8}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
                );

All of your suggestions are sincerely appreciated!

elshae

Answer 1

Try to use minResolution and maxResolution instead of minZoomLevel. It usually works fine. You can get resolution for any zoom lever if you call map.getResolution() method.

Another option is to listen to OpenLayers.Map's zoomend event and toggle layer visibility accordingly. Something like this:

map.events.on({ "zoomend": function (e) {
    if (this.getZoom() > 2) {
      layer1.setVisibility(false);
      layer2.setVisibility(true);
    }
    else {
      layer2.setVisibility(false);
      layer1.setVisibility(true);
    }
  }
});