7

I have a web page with map that is using OpenLayers 4.6.4 and I want to prevent the user from panning or zooming beyond the edge of the map, like this:

OpenLayers4 <div> panned beyond map data

There are plenty of answers for this for OL3, but that is very different than OL4. Items likes "restrictedExtent" that existed in OL3 are no longer there in OL4.

The only customizations I have added to the map are the fullscreen and scale controls and an onclick handler as I am still new to OL & GIS (though not to web development).

OL is getting the data from a GeoServer instance via WMS if that makes any difference.

Improve this question
2
  • You can set the extent within the View config. This will set the extent that constrains the center, in other words, center cannot be set outside this extent. openlayers.org/en/latest/apidoc/ol.View.html
    – pavlos
    Jan 15, 2018 at 8:29
  • I set the extents, but that does not prevent panning like this.
    – Bytor
    Jan 20, 2018 at 15:13

2 Answers 2

Reset to default
3

I've run into this situation and used the following code:

Just after map is initialized:

const nc_array = map.getView().calculateExtent(map.getSize());
const nc_s = nc_array[1];
const nc_w = nc_array[0];
const nc_n = nc_array[3];
const nc_e = nc_array[2];

map.on('moveend', function() {
    /* uses nc_array data (nc_w, nc_s, nc_e, nc_n) from initial map setup*/
    var ext_array = map.getView().calculateExtent(map.getSize());
    var ext_s = ext_array[1];
    var ext_w = ext_array[0];
    var ext_n = ext_array[3];
    var ext_e = ext_array[2];
    if(ext_s < nc_s) {
        var now_s = view.getZoom();
        view.fit([ext_w, nc_s, ext_e, ext_n+(nc_s-ext_s)]);
        map.getView().setZoom(now_s);
    }
    if(ext_w < nc_w) {
        var now_w = view.getZoom();
        view.fit([nc_w, ext_s, ext_e+(nc_w-ext_w), ext_n]);
        map.getView().setZoom(now_w);
    }
    if(ext_n > nc_n) {
        var now_n = view.getZoom();
        view.fit([ext_w, ext_s-(ext_n-nc_n), ext_e, nc_n]);
        map.getView().setZoom(now_n);
    }
    if(ext_e > nc_e) {
        var now_e = view.getZoom();
        view.fit([ext_w-(ext_e-nc_e), ext_s, nc_e, ext_n]);
        map.getView().setZoom(now_e);
    }
});

Hope this helps someone.

Improve this answer
1
  • 1
    If you have the latest version of OpenLayers, you don't need to make such code - you just need to set the extent attribute to the map.view
    – NobodySomewhere
    Dec 21, 2020 at 11:21
2

In order to restrict the panning of the map to some area use the ol.View attribute extent. To restrict the zoom level use the ol.View attributes maxZoom & minZoom.

see https://gis.stackexchange.com/a/154882/110012

Improve this answer
3
  • 1
    Setting the extent does not prevent panning beyond the edges.
    – Bytor
    Jan 20, 2018 at 15:42
  • 1
    The map can still be dragged, for example, to the bottom right so that the centre point of the canvas is, effectively 180°W 90°N like here image.ibb.co/jjf1jG/image.png (or what ever your western and northern reaches are)
    – Bytor
    Jan 20, 2018 at 16:09
  • For this to work, you need the latest version of OpenLayers.
    – NobodySomewhere
    Dec 21, 2020 at 11:20

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.