OpenLayers 3 Shows white space while dragging/panning

Question

I am right now using Ol3 to display static image(like http://openlayers.org/en/latest/examples/static-image.html) . Although when I am zoomed in and start panning/dragging i can see white space as seen in example. I don't want to see that.

Is it possible to pan only till the end of image so that white space does not appear?

Answer 1

    You can restrict the dragging of the image by restricting its extent.

Here's an inline link to fiddle.

map.on('moveend', function(evt){

        console.log(view.getZoom());
        if(view.getZoom()<=2){
        view.setZoom(3);
        }

        });
        var constrainPan = function() {
        console.log("move");
        var extents=[0, 0, 1024, 968]
    var visible = view.calculateExtent(map.getSize());
    var centre = view.getCenter();
    var delta;
    var adjust = false;
    if ((delta = extents[0] - visible[0]) > 0) {
        adjust = true;
        //console.log(delta);
        centre[0] += delta;
    } else if ((delta = extents[2] - visible[2]) < 0) {
        adjust = true;
        centre[0] += delta;
    }
    if ((delta = extents[1] - visible[1]) > 0) {
        adjust = true;
        centre[1] += delta;
    } else if ((delta = extents[3] - visible[3]) < 0) {
        adjust = true;
        centre[1] += delta;
    }
    if (adjust) {
        view.setCenter(centre);

    }
};


view.on('change:resolution', constrainPan);
view.on('change:center', constrainPan);