CODEWITHSUNDEEP
javascriptmapsopenlayersopenlayers-3
Anudeep
Anudeep

Reputation: 347

How to set extent property in view after map initialize using openlayer3?

My purpose is pan the map upto a certain limit when we drag it (exactly like google map) after that it should lock. This support is present in Openlayer version 2.0 using Bounds. But in version 3 I have to set extent property while initializing view. I am stuck in this stage. View is not set after initialize the map.

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([73.8, 18.5]),
      zoom: 12
    })
  });

Now I want to set 'extent' property in view

  map.setView(new ol.View({
    center: ol.proj.fromLonLat([73.8, 18.5]),
    extent: map.getView().calculateExtent(map.getSize()),
    zoom : 12
  }));

This code is not working. Is there any other way to do that or am I doing something wrong? There is no error in console. But map is not display.

Upvotes: 3

Views: 14284

Answers (1)

pavlos
pavlos

Reputation: 3081

Instead of map.setView(new ol.View({...........

Use this piece of code after map init

.....
var myExtent = [xmin,ymin,xmax,ymax];
map.getView().fit(myExtent , map.getSize());
........

UPDATE To prevent from dragging map outside the current extent do the following:

map.setView(
new ol.View({
    center: ol.proj.fromLonLat([73.8, 18.5]),
    extent: map.getView().calculateExtent(map.getSize()),   
    zoom: 12
  })
);

here is a fiddle

Upvotes: 7

Related Questions