0

I have built a simple OpenLayers 3 map, see below for code:

HTML code:

<div id='map'></div>

CSS:

#map{
     width:100%;
     height:800px;
}       

OpenLayers map initialization 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);
}

Now my map loads just fine, what I would really like to do is, I would like to have only a specific area loaded, for which I need a bounding box, I would like to load the the bounding box for THIS area. But I am new to OpenLayers 3, so I tried and I just couldn't make the bounding box.

Can somebody help me make the bounding box please?

0

1 Answer 1

0

You can achieve that by defining an Extent at map creation using

//Lower left corner of BBOX
var coord1 = ol.proj.fromLonLat([45.1101 , 41.9668])
//Upper right corner of BBOX
var coord2 = ol.proj.fromLonLat([45.1606, 42.0810])

map = new ol.Map({
    target:'map',
    renderer:'canvas',
    view: new ol.View({
        projection: 'EPSG:900913',
        center:[-8015003.33712,4160979.44405],
        zoom:5
    }),
    //       minx       miny       maxx       maxy
    extent: [coord1[0], coord1[1], coord2[0], coord2[1]
});

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