[OpenLayers-Dev] OpenLayer Map restrict panning and zooming

Bruce Mahfood bmahf at hotmail.com
Fri Mar 22 06:37:59 PDT 2013

I am new to OpenLayers, and am trying to figure out how to restrict the amount that a user can pan around and zoom outward. For this application, the user chooses a local area in the map and clicks a button saying to use that area, and we want them not to be able to pan outside of or zoom out greater than that extent. When the button is clicked, I am setting both the maxRestrictedExtent and the maxExtent to the current extent using map.GetExtent(). I am also setting the maxResolution to the current resolution by calling map.getResolution(). Panning works perfectly, but zooming doesn't. The user is still able to zoom out passed the given resolution.
I have added code which, every time the extent changes, prints out the current extent and resolution. On the 6th extent change I set the three map properties listed above and print out the settings. This allows me to zoom in from full world view to a localized enough area for testing. On the 6th extent change, I zoom out with my mouse wheel and see the extent and resolution that were chosen. On zooming out with one click of my mouse wheel, the next printout shows clearly that the resolution is indeed larger than the setting for map.maxResolution, and I can see that the viewable area is larger than the one chosen. I have tried a number of things, including setting maxExtent, but nothing seems to cause the max zoomable extent to be restricted. I can zoom all the way out to full world view again if I like.
Below you can see the test code that I have written which instantiates a map with a Navigation control and an OSM layer, and then registers for the map's moveend event, creating a callback function that does what I have described, and finally zooms to max extent.
Does anyone have an idea as to what I should be doing differently in order to limit the ability to zoom out to the max extent chosen? I am hoping that I will not have to manually adjust the extent back to within the max extent, but if that's the case, at least knowing that would help.
P.S. - Unfortunately the whole html doesn't show, since from to just before style, and from after the final are being processed as html. The only thing that is really missing is that I call init() in the onload event of the body.
<style type="text/css">        html, body {        width: 100%;        height: 100%;        margin: 0;             }    #map {        width: 100%;        height: 100%;        margin: 0;             } </style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><script type="text/javascript">
var map;var num;
function init(){    map = new OpenLayers.Map('map', { controls: [] });           map.addControl(new OpenLayers.Control.Navigation());           map.addLayer(new OpenLayers.Layer.OSM());
    map.events.register("moveend", this, function (e) {        if (num == 5)        {            map.maxExtent = map.getExtent();            map.restrictedExtent = map.maxExtent;            map.maxResolution = map.getResolution();            console.log(num++ + ": Setting maxExtent/restrictedExtent: " + map.maxExtent + "; resolution: " + map.maxResolution);        }        else        {            console.log(num++ + ": Changed to extent: " + map.getExtent() + "; resolution: " + map.getResolution());        }    });
    num = 0;    map.zoomToMaxExtent();}</script> 		 	   		  
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20130322/d3911a4b/attachment.html>

More information about the Dev mailing list