2

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...

4 Answers 4

15

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
      })
    });
3
  • Hey thanks for the update - I'm gonna move my project to OL3 soon this is gonna be useful.
    – Mat
    Oct 3, 2014 at 15:51
  • 2
    I have a ol.layer.Image with ol.source.ImageStatic but seems I can still move the 'map' to the far left/right (top/bottom) and it stops in the 'center' but I want it to stop at the edge (i.e left edge max is left edge of image)
    – dan2k3k4
    Dec 16, 2014 at 16:28
  • 2
    Indeed dan2k3k4, the extent seems to be enforced at the center of the map, not at the edges. I.e. the center of the map will always be inside the extent that is provided. Jan 6, 2015 at 15:17
3

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

4
  • I'll have a look at that fiddle now - but you might work out how to disable zooming quicker than me - haven't got any of my openlayers stuff here.
    – OGHaza
    Feb 16, 2014 at 14:49
  • Maybe a way would be to set this maxExtent value to (0,0,0,0) in first place, then listen to zoom event as you suggested and reset this value accordingly to allow dragging to the edge of the map ? But how would I compute new values then ?
    – Mat
    Feb 16, 2014 at 15:09
  • Updated my answer. Still need to add stuff on zooming. Ignore that maxextent I posted actually. Give me 15 mins
    – OGHaza
    Feb 16, 2014 at 15:19
  • 1
    You're the boss ! I understood a lot about OL today thanks to readings and your explanation, that's really cool. Thanks again !
    – Mat
    Feb 16, 2014 at 16:16
2

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()
  })
});
1

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));
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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