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.

  • 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 '18 at 8:29
  • I set the extents, but that does not prevent panning like this. – Bytor Jan 20 '18 at 15:13

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

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 | |
  • Setting the extent does not prevent panning beyond the edges. – Bytor Jan 20 '18 at 15:42
  • 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 '18 at 16:09

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.