1

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.

1

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);   
                            }

                    }

        });
  • that still has not seem to work. and just keeps the one base layer showing up on the map and still shows the radio buttons with both of them. – Ravyn Jul 14 '14 at 8:02
  • OOPS, Sorry, it has a bug I think Yep.... I changed the code. Sorry, was the cut and paste, I chopped out some irrelevant bits and got the wrong ones. You could actually remove the visibility tests if you wanted .. – Mark Cupitt Jul 14 '14 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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