Display WMS Layer Based on Zoom Level

Question

Hello StackOverflow,

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/maxResolution instead of minZoomLevel. It usually works fine. You can get resolution for any zoom lever if you call map.getResolution() method

One more option is to listen to OpenLayers.Map's zoomend event and show/hide layers 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);
            }
        }
        });