4

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?

4

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.

  • Why is that laundry list of resolutions necessary? Couldn't we just set a minResolution instead? – Andrew Mao Jun 19 '13 at 15:04

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.