[GIS] Openlayers zooming and panning restrictions don’t work

openlayers-2

Consider the following example (I tried to keep it as simple as possible).

<html>
  <head>
    <style>
      #map { width: 800px; height: 600px; }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script>

    <script type="text/javascript">
        function init(){

          var layer = new OpenLayers.Layer.OSM(
            "OpenStreet Maps"
          );

          var extent = new OpenLayers.Bounds(
            -1500000, 4000000, 5600000, 11000000
          );

          var map= new OpenLayers.Map({
            div: 'map',
            layers: [layer],
            maxExtent: extent,
            restrictedExtent: extent,
            maxScale: 60000000,
            controls: [
              new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.PanZoomBar(),
              new OpenLayers.Control.MousePosition(),
              new OpenLayers.Control.Scale()
            ]
          });

          map.zoomToMaxExtent();
        }
    </script>
  </head>

  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

As the OSM map is in the Spherical Mercator Projection, the bounds (-1500000, 4000000, 5600000, 11000000) should cover most of Europe. I set these bounds both as the maxExtent and the restrictedExtent of the map.

Furthermore, I set maxScale to 60 M.

After launching this example, the map really centers to Europe and restricts panning to other parts of the World. But, it absolutely disregards the maxScale attribute and allows zooming far away.

Now, I try to remove the restrictedExtent. I should be able to pan the map freely. This is true. However, now the zoomToMaxExtent() doesn't work, although the maxExtent is still set!

How come neither maxScale nor zoomToMaxExtent() would work in this example? Am I just gravely misunderstanding the OpenLayers documentation?

Best Answer

There is no way to do this with OL 2.11, so you need to change OpenLayers URL from http://openlayers.org/api/OpenLayers.js to http://openlayers.org/dev/OpenLayers.js and use the following code:

<html>
<head>
<style>
  #map { width: 800px; height: 600px; }
</style>

<script src="http://openlayers.org/dev/OpenLayers.js"></script>

<script type="text/javascript">
    function init(){

      var layer = new OpenLayers.Layer.OSM(
        "OpenStreet Maps", null, {
        resolutions: [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.29858214169740677,
            0.14929107084870338, 0.07464553542435169],
        serverResolutions: [156543.03390625, 78271.516953125,
            39135.7584765625, 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.29858214169740677,
            0.14929107084870338, 0.07464553542435169]
        }
      );

      var extent = [-1500000, 4000000, 5600000, 11000000];

      var map = new OpenLayers.Map({
        div: 'map',
        layers: [layer],
        maxExtent: extent,
        restrictedExtent: extent,
        controls: [
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.MousePosition(),
          new OpenLayers.Control.Scale()
        ]
      });

      map.zoomToMaxExtent();
    }
</script>
</head>

<body onload="init()">
  <div id="map"></div>
</body>
</html>

It should work as you expected.

Related Question