[OpenLayers-Users] FW: [OpenLayers-Dev] OpenLayer Map restrict panning and zooming
Bruce Mahfood
bmahf at hotmail.com
Mon Mar 25 13:46:43 PDT 2013
Ok, after much searching, and eventually emailing this list, I have found a forum where I got my answer. I was already registering for the "moveend" event, capturing all extent movements, so that I could take a look at what was going on. The answer was to just declare an private int variable (maxZoomLevel) on the class, which has a value of zero when the map is first drawn, since I'm drawing world view to start, and then is set to the current zoom level with getZoom() at the time the user clicks on the button, choosing the current area to work with. So then the registration for the "moveend" event looks like this:
map.events.register("moveend", this, function (e) { if (map.getZoom() < maxZoomLevel) { map.zoomTo(maxZoomLevel); } });
Since world view is 0, and ground-most view is 19, then if the current view is less than the max (the chosen zoom level), we just zoom to the max.
This works great. I does flicker a bit while I'm scrolling the mouse to zoom out passed the max chosen zoom level, but it no longer zooms out passed it.
From: bmahf at hotmail.com
To: openlayers-users at lists.osgeo.org
Date: Mon, 25 Mar 2013 14:11:54 -0400
Subject: [OpenLayers-Users] FW: [OpenLayers-Dev] OpenLayer Map restrict panning and zooming
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 the maxRestrictedExtent to the current extent using map.GetExtent(), and I am 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 below 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. Please note, I do not mean to leave this code in here, but am just catching this to test and see what happens after the change at the 6th extent.
After 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 any 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 isn't shown, since the <html>, <head>, <title> and <body> tags seem to be processed, along with their closing tags. The only thing that is really missing though is that I call init() in the onload event of the body.
P.S.S - I have already posted this on StackOverflow, and got an answer saying that I needed to defined an array of resolutions, with a min and max resolution set in the map constructor, and then it should work. I have added that code into my code below, but that is still not getting me there. I know I am just around the corner from an answer, but haven't found it yet. I'm hoping someone reading this list can help me with this.
Thanks...Bruce
[code]
<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">
//Set up a global variable to hold our map object var map; var num;
function init(){ map = new OpenLayers.Map('map', { controls: [], minResolution: 0.074645535, // Added per StackOverflow conversation maxResolution: 156543.0339 // Added per StackOverflow conversation }); map.addControl(new OpenLayers.Control.Navigation()); // Added the serverResolutions array below per StackOverflow conversation map.addLayer(new OpenLayers.Layer.OSM({ serverResolutions: [156543.0339, 78271.51695, 39135.75848, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.298582142, 0.149291071, 0.074645535 ] }));
// NOTE: added to trap changes in extent due to pan, zoom, or window/frame resize // for testing purposes. map.events.register("moveend", this, function (e) { if (num == 5) { // NOTE: added to restrict panning/zooming to extent bounds chosen for the current scenario // - setting restrictedExtent keeps panning within the bounds, but setting maxResolution // doesn't help keep the zooming from going out further than the chosen zoom level / // resolution. map.restrictedExtent = map.getExtent(); 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>
[/code]
_______________________________________________
Dev mailing list
Dev at lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-dev
_______________________________________________
Users mailing list
Users at lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130325/5a278804/attachment.html>
More information about the Users
mailing list