Give the map a restrictedExtent property. Setting this property to some bounds causes map navigation to be limited to those bounds. Depending on the resolution settings, the viewport may still display area outside the restricted extent - though it will be centered on the restricted extent in that case. Using a combination of restrictedExtent and maxResolution, you can limit map navigation to the extent of your data (or any arbitrary extent). See the restricted-extent.html example (closes #340).

git-svn-id: http://svn.openlayers.org/trunk/openlayers@4261 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2007-09-13 15:27:35 +00:00
parent 1368cb64e5
commit 68472d888b
3 changed files with 216 additions and 2 deletions
--- a/examples/restricted-extent.html
+++ b/examples/restricted-extent.html
@@ -0,0 +1,70 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style type="text/css">
+        #map {
+            width: 512px;
+            height: 256px;
+            border: 1px solid #ccc;
+        }
+    </style>
+    <script src="../lib/Firebug/firebug.js"></script>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map = null;
+        var extent = new OpenLayers.Bounds(-180, -90, 180, 90);
+
+        function init() {
+            var options = {
+                restrictedExtent: extent
+            }
+            map = new OpenLayers.Map('map', options);
+
+            var wms = new OpenLayers.Layer.WMS(
+                "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0?",
+                {layers: 'basic'}
+            ); 
+
+            map.addLayers([wms]);
+            map.setCenter(extent, 1);
+            document.getElementById("toggle").checked = true;
+        }
+        
+        function toggleRestrictedExtent() {
+            if(map.restrictedExtent == null) {
+                map.setOptions({restrictedExtent: extent});
+            } else {
+                map.setOptions({restrictedExtent: null});
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h3>OpenLayers Restricted Extent Example</h3>
+    <div id="map"></div>
+    <p>
+        Map navigation is limited by a combination of map and layer properties.
+        The base layer resolutions array controls the resolutions (or zoom
+        levels) available.  The resolutions can be limited by setting a
+        maxResolution property or by explicitly specifying a resolutions
+        array.
+    </p>
+    <p>
+        Navigation limited by the maxExtent property.  A map cannot be panned
+        so that the center of the viewport is outside of the bounds specified
+        in maxExtent.  If you wish to further restrict panning, use the
+        restrictedExtent property.  With restrictedExtent set, the map cannot
+        be panned beyond the given bounds.  If the maxResolution allows the
+        map to be zoomed to a resolution that displays an area bigger than
+        the restrictedExtent, the viewport will remain centered on the
+        restrictedExtent.
+    </p>
+    <p>
+        <input type="checkbox" id="toggle" checked="checked"
+               onclick="toggleRestrictedExtent();" />
+        <label for="toggle">
+            Toggle restricted extent (to [-180, -90, 180, 90]).
+        </label>
+    
+  </body>
+</html>