[GIS] Having one base layer hide when the other one is shown and visa versa

basemapgeoservermapquestopenlayers-2

I have an OpenLayers map that is using MapQuest as a base layer as well as my own base layer. I've seem to be having an issue with getting the one base layer to show while the other one hides. The one only needs to show from a certain zoom level to another and it goes the same with the other one.

My code is as follows:

 function initMap(smX, smY, zoom) {
            // OpenLayers
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 20,
                    'stopSingle': false,
                    'stopDouble': false
                },
                initialize: function (options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                            {}, this.defaultHandlerOptions
                        );
                    OpenLayers.Control.prototype.initialize.apply(
                            this, arguments
                        );
                    this.handler = new OpenLayers.Handler.Click(
                            this, {
                                'click': this.onClick,
                                'dblclick': this.onDblclick
                            }, this.handlerOptions
                        );
                },
                onClick: function (evt) {
                },
                onDblclick: function (evt) {
                }
            });
            var mapOptions = {
                numZoomLevels: 20,
                controls: [],
                projection: new OpenLayers.Projection("EPSG:900913"),
                units: 'm',
                restrictedExtent: new OpenLayers.Bounds(bbox = 1821416, -4151368, 3671526, -2516543)
            };
            map = new OpenLayers.Map('testMap', mapOptions);
           mqBase = new OpenLayers.Layer.XYZ(
                "Map Quest - Streets",
                [
                "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
              "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
                "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
                "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
                ],
            {
                attribution: "Data, imagery and map information provided by <a href='http://www.mapquest.com/'  target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a>  <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
                transitionEffect: "resize"
            }
            );
           mqBase.isBaseLayer = true;
           //mqBase.setOpacity(1);
           //mqBase.setVisibility(true);
           //mqBase.displayOutsideMaxExtent = 0;
           map.addLayers([mqBase]);

            cmaBase = new OpenLayers.Layer.WMS(
                "CMA Info - Streets",
                "http://192.168.1.40:8080/geoserver/CMAInfo/wms",
                //"http://gs.cmatile.co.za/geoserver/Cmainfo/gwc/service/wms",
                {
                    layers: "Base", transparent: true, format: "image/png", buffer: 0,// isBaseLayer: true,
                    //map: '/projects/ms4w/apps/tutorial/htdocs/base.map'}
                    tiled: true
                }

            );
            cmaBase.isBaseLayer = true;
            cmaBase.setOpacity(1);
            cmaBase.setVisibility(false);
           // cmaBase.displayOutsideMaxExtent = 0;
            map.addLayers([cmaBase]);
            //&& prevzoom < 15
            map.events.register("zoomend", this, function (e) {
                var curzoom = e.object.zoom;
                if (typeof prevzoom != "undefined") {
                    if (curzoom > prevzoom && curzoom >= 15 ) {
                        map.setBaseLayer(cmaBase);
                        cmaBase.setVisibility(true);
                        mqBase.setVisibility(false);
                        }
                }
                //&& prevzoom >= 15
                    else if (curzoom < prevzoom && curzoom < 15 ) {
                        map.setBaseLayer(mqBase);
                        mqBase.setVisibility(true);
                        cmaBase.setVisibility(false);
                  }
                prevzoom = curzoom;
            })
            map.setOptions(zoomLevel = 19);

I have tried several methods some of which it can be seen as comments as I was trying each one out. For some reason the setVisibilty does not seem to be working I have even used and If statement to check if it was a base layer to try and set it that way and that also did not work.

If someone can help to see if I'm missing something or if I've done something wrong it will be a lot of help.

I am using OpenLayers 2.13.1 and GeoServer is providing my base map.

Best Answer

Here is the way I do it. Two Base Layers, base and mq are defined and assigned in a global scope

     map.events.on({ "zoomend": function (e) {

        if (this.getZoom() < 9 )    {
                if (mq.visibility == false )
                    {
                    mq.setVisibility(true); 
                    base.setVisibility(false);  
                    }

            }

        if (this.getZoom() > 8 )    {

                        if (base.visibility == false )

                            {
                            mq.setVisibility(false);    
                            base.setVisibility(true);   
                            }

                    }

        });
Related Question