I want my open layers map to fit the full screen. I want users to be able to navigate inside, zoom, and drag it.

Here's a fiddle to work on : /

My problème is that I don't understand some values I'm giving at map creation :

mapLayer = new OpenLayers.Layer.Image(
     'My map',
     '.jpg',
 OpenLayers.Bounds.fromString("-160,-90.0,160,90.0"), new OpenLayers.Size(screenSize.width, screenSize.height), {
     maxExtent: OpenLayers.Bounds.fromString("-160,-90.0,160,90.0")
 });

With those values, user is able to drag a part of the map out of screen. If I change the maxExtent values to 0,0,0,0, well, map is contained in the screen and can't be dragged outside but as soon as I zoom in, I'm unable to drag the map.

What are the -160,-90.0,160,90.0 values refering to please ? What code should I put to :

• make the map fit the screen at loading
• allow user to zoom and drag it
• but restrict dragging to screen size ?

Thank you very much. And please excuse my lack of knowledge on cartography, I'm pretty noob on the subject...

I want my open layers map to fit the full screen. I want users to be able to navigate inside, zoom, and drag it.

Here's a fiddle to work on : http://jsfiddle.net/mhicauber/t8K4p/1/

My problème is that I don't understand some values I'm giving at map creation :

mapLayer = new OpenLayers.Layer.Image(
     'My map',
     'http://tchanca.com/private/Masse1080.jpg',
 OpenLayers.Bounds.fromString("-160,-90.0,160,90.0"), new OpenLayers.Size(screenSize.width, screenSize.height), {
     maxExtent: OpenLayers.Bounds.fromString("-160,-90.0,160,90.0")
 });

With those values, user is able to drag a part of the map out of screen. If I change the maxExtent values to 0,0,0,0, well, map is contained in the screen and can't be dragged outside but as soon as I zoom in, I'm unable to drag the map.

What are the -160,-90.0,160,90.0 values refering to please ? What code should I put to :

• make the map fit the screen at loading
• allow user to zoom and drag it
• but restrict dragging to screen size ?

Thank you very much. And please excuse my lack of knowledge on cartography, I'm pretty noob on the subject...

• javascript
• openlayers

4 Answers 4

For those of you who come here and are using OpenLayers 3, here is some information that might be useful.

There is no more restrictedExtent. Instead you have to set the 'extent' option in your layers and view.

There is also no more OpenLayers.Bounds. Instead you use ol.extent, which is a an array with 4 values.

Example:

var maxExtent = ol.proj.transformExtent([-122.445717,47.576989,-122.218094,47.71623], 'EPSG:4326', 'EPSG:3857')
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.Stamen({
            layer: 'watercolor'
          }),
          extent: maxExtent
        }),
        new ol.layer.Tile({
          source: new ol.source.Stamen({
            layer: 'terrain-labels'
          }),
          extent: maxExtent
        })
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform(
            [-122.333407, 47.607436], 'EPSG:4326', 'EPSG:3857'),
        extent: maxExtent,
        zoom: 14
      })
    });

I think the property you're actually looking for is restrictedExtent. The restrictedExtent controls the portion of the map the user is able to pan around. If you don't restrict the zoom level then the user will still be able to zoom out to view the rest of the map, but they won't be able to pan the map.

Firstly, rather than using OpenLayers.Bound.FromString("-160,-90.0,160,90.0"), you should probably use new OpenLayers.Bounds(-160, -90, 160, 90).

In the case of (-160, -90, 160, 90) (possibly the whole map?), this means the user is free to pan around those coordinates, if this is the whole map then it's not restricting anything.

In the case of restricting the extent to (0, 0, 0, 0) - the centre of the map, the user is not able to pan anywhere - the map is always fixed over the center spot - but they may still zoom freely because that is not controlled by restrictedExtent.

The values in (-160, -90, 160, 90") are coordinates in degrees - it's a bounding box (left, bottom, right, top). There are all sort of different coordinate systems that can be used, you can explicitly specify which coordinate system you're going to use with projection: "EPSG:3857".

In the case of a custom map layer like yours, they're just coordinates in relation to the bounds you pass in when creating the layer.

To solve your problem:

I create the map layer with the bounds new OpenLayers.Bounds(-180,-90.0,180,90.0) and set a restrictedExtent on the map (rather than the layer) with the same bounding box.

map = new OpenLayers.Map('map', {
    controls: [],
    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
});

mapLayer = new OpenLayers.Layer.Image(
    'My map',
    'http://tchanca.com/private/Masse1080.jpg',
    new OpenLayers.Bounds(-180,-90.0,180,90.0), 
    new OpenLayers.Size(screenSize.width, screenSize.height), 
    {}
);
map.addLayer(mapLayer);

Since your mapLayer occupies the full extent of the map the user can't zoom out beyond it to see any white margin, and also can't pan outside it since nothing exists beyond it.

JSFiddle

Here is another approach for OpenLayers3. Depending on what you want to refer to the easiest way is to get the extent directly from your desired projection (ol.proj.Projection) or layer (any class of ol.layer) using the getExtent() function. In case of EPSG:3857 this works:

var map = new ol.Map({
    ...
    view: new ol.View({
        ...
        extent: ol.proj.get("EPSG:3857").getExtent()
  })
});

I created a very basic answer here at this gist: https://gist.github.com/cfh294/e4495b9ff6d989db950ccd2573422808#file-restrictedextent-js

The "meat and potatoes":

map.on("movestart", function(evt) {
    panStartCenter = view.getCenter();
});

map.on("moveend", function(evt) {
    var panEndCenter = view.getCenter();
    var x = panEndCenter[0];
    var y = panEndCenter[1];
  });

   // if the center no longer resides in the max extent, snap the map back to where it was 
   // before the pan
    if (!(ol.extent.containsXY(maxExtent, x, y))) {
        view.setCenter(ol.Coordinate(panStartCenter));
    }
});