javascript - How to add a bounding box to OpenLayers 3 map

I have built a simple map using OpenLayers 3, have a look at the code below:

JavaScript code:

var map;

function init(){
    map = new ol.Map({
        target:'map',
        renderer:'canvas',
        view: new ol.View({
            projection: 'EPSG:900913',

            center:[-8015003.33712,4160979.44405],
            zoom:5
        })
    });

    var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
    });

    map.addLayer(newLayer);


    /* 
        get and display extent 
        http://gis.stackexchange.com/questions/168590/how-to-get-extent-in-openlayers-3
    */

    var size = map.getView().calculateExtent(map.getSize());

    console.log(size);


    console.log(map.getSize());


    /* ========================== */

}

/* function to remove layer */

function removeTopLayer(){

    var layers = map.getLayers();
    layers.pop();
}

/* ========================= */


/* swap layers function */

function swapTopLayer(){

    var layers = map.getLayers();
    var topLayer = layers.removeAt(2);
    layers.insertAt(1, topLayer);
}

/* =================== */

HTML code:

Functioning link can be found HERE.

Now I wanted to add a bounding box, so that when the map loads, it only loads for a specific area, I searched for examples online, but they are either of OL2 or are about a user selecting a bound box dynamically, which is not my requirement. My requirement is pretty simple, all I want is the tiles for a specific bounding box to load instead of the map for the entire world to load.

I found the below method in OpenLayers 3.0 doc's boundingExtent, but I am not sure how to use it. :( So now suppose I want to add a bounding box for THIS area, how would I go about doing it, using the boundingExtent method? Can anybody explain?

I have been scratching my head over this one for quite sometime now, can anybody help me achieve my goal of have only a specific bounding box load?

Answer

I can get your point but I really can not understand what do you expect to visually get out of it.

1. 
   

   Would it be somehtig like this example? -->clipping. Show the a map but hide the areas you need to be not visisble.

   
   



2. 
   

   Or would it be something like this example.-->extent+minZoom+maxZoom prevent the user moving the map in areas you need to be hidden and thus not loading these tiles. (passign extent during the view configuration prevents the map center to be outside the extent passed.)

   
   


3. 
   

   Or would it be something else??????

   
   

finally, for the question concerning boundingExtent. It is just creating a bbox out of the supplied points. That means get the min_x,min_y, max_x, max_y out of the supplied points (x,y's). Cannt see how this is going to help you in this case.