Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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.

share|improve this answer
    
Yes, it worked, thank you. –  Imp Apr 21 '12 at 21:21
    
Why is that laundry list of resolutions necessary? Couldn't we just set a minResolution instead? –  Andrew Mao Jun 19 '13 at 15:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.