I have been sandboxing with OpenLayers 3 and thus far have been happy with the results. I have used answers on this site to restrict my most zoomed out level from panning and to restrict the range of allowed zooming.

I have encountered the problem though that once a user zooms in I want the extent to be restricted to the original boundaries of the image and not to the new limits of the viewport, that is, you should still be able to pan to the edge of the original map, even zoomed in.

How can I adjust the extent correctly on zoom so that my users can pan on the zoomed map, but not on the unzoomed version?

var extent = [0, 0, 700, 800];
var projection = new ol.proj.Projection({
  code: 'EPSG:4326',
  units: 'pixels',
  extent: extent
var map = new ol.Map({
    target: 'map',
    layers: [
new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'http://realmsofdespair.info/world-map.jpg',
    projection: projection,
    imageSize: [700, 800],
    imageExtent: extent
      view: new ol.View({
minZoom: 2,
maxZoom: 5,
projection: projection,
center: ol.extent.getCenter(extent),
extent: [350, 400, 350, 400],
zoom: 2

}) });

The above is my test code, forgive the crudeness of the model, I'm new to GIS in general and to OpenLayers in specific.

I realize that this example has the panning completely locked down, I suppose I've been looking for a per zoom level extent transformation or a javascript event, perhaps zoomend, that can be called on zoom so that the extent can be rewritten.

I suppose I could be confusing my actual resolution with the mapunits, so that if I'm zoomed in 8x 1 pixel in the original picture is now 8 in the zoomed. Eventually I plan to replace the jpg with a vector graphic, but this is a test of concept.

1 Answer 1


I save my center when start the map.
Then if user try to move the map on Zoom 0 i reset the view.
In your case if detect a zoom change you could change the extent

//Init the first extent 
    var extent = [-79.608, -1.1, -53.106, 13.721];
    extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:4326", "EPSG:3857"));
    map.getView().fitExtent(extent, map.getSize());

//zoom 0
    var centerZoom = view.getCenter();  

    view.on('change:center', function (evt) {
        var zoom = view.getZoom();
        var center = view.getCenter();

        txtCenter = '' + center;
        txtCenterZoom = '' + centerZoom;            

//reset the center if user move it
        if (zoom == 0 && txtCenter != txtCenterZoom) {                                
            map.getView().fitExtent(extent, map.getSize());

Your Answer

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

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