Using OpenLayers, I want to set a view of 1 map, to be the same as another. So far I used Zoom and Center, which worked well, but because of a technical impossibility with a certain projection, I tried doing it with an extent.

I am using the latest OpenLayers (4.6.3).

The following code should in theory get my current map's extent, and fit my map to that extent, such that nothing moves.

let view = map.getView();
let extent = view.calculateExtent(map.getSize());
view.fit(extent, map.getSize());

But in practice, if I zoom in enough (for example, 6 clicks on the plus button), and then run the above code, it zooms out every time I run it, which is just not what I want.

I tried constraintResolution, but it minimizes the damage, not removes it entirely.

Here is a fiddle to play with: / (I am not sure what is the ol version there, but it does happen there as well)

Video: ;feature=youtu.be

Using OpenLayers, I want to set a view of 1 map, to be the same as another. So far I used Zoom and Center, which worked well, but because of a technical impossibility with a certain projection, I tried doing it with an extent.

I am using the latest OpenLayers (4.6.3).

The following code should in theory get my current map's extent, and fit my map to that extent, such that nothing moves.

let view = map.getView();
let extent = view.calculateExtent(map.getSize());
view.fit(extent, map.getSize());

But in practice, if I zoom in enough (for example, 6 clicks on the plus button), and then run the above code, it zooms out every time I run it, which is just not what I want.

I tried constraintResolution, but it minimizes the damage, not removes it entirely.

Here is a fiddle to play with: http://jsfiddle/t6uvybd3/1/ (I am not sure what is the ol version there, but it does happen there as well)

Video: https://www.youtube./watch?v=ZAV_FuZ-p7M&feature=youtu.be

• javascript
• openlayers
• openlayers-3

• nothing happens with your code. – Chase Choi Commented Dec 12, 2017 at 11:35
• Did you zoom in like 6 times? – Amit Commented Dec 12, 2017 at 11:36
• tried with button and wheel both. – Chase Choi Commented Dec 12, 2017 at 11:37
• Thanks. I will post a video shortly of what I’m seeing – Amit Commented Dec 12, 2017 at 11:38
• or you add your environment – Chase Choi Commented Dec 12, 2017 at 11:38

2 Answers 2

This is happening because it changes the resolution in order to fit the extent. If you change the size of your map div you will probably not face the problem. In any way , this seems to be a misbehaviour of openlayers but here is a workaround.

var map = new ol.Map({
   target: 'map',
   loadTilesWhileAnimating: true,
   layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
   view: new ol.View({
      center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
      zoom: 1
   })
});

var fitExtentAnimated = document.getElementById('fit-extent-animated');
fitExtentAnimated.addEventListener('click', function() {

  let view = map.getView();
  let extent = view.calculateExtent(map.getSize());
  //hold the current resolution
  let res = view.getResolution();
  //if you use older versions of ol3 use `fitExtent` istead of `fit`
  view.fit(extent, map.getSize());
  //apply the resolution back 
  view.setResolution(res);
}, false);

I've used the solution of @pavios but have to tweaked it a bit as my scenario is a bit different. I am using a geometry object to fit/center in the map. I've noticed that when the geometry is just a POINT, OL would zoom out too much. But I discovered that the resolution bees zero when this happens. So, I added a condition before calling setResolution as calling it everytime messes up other condtions when geometry is not a POINT.

let mainFeature: ol.Feature = feature == null ? this.mainFeature : feature;

if (mainFeature != null && this.map != null) {
  // get the current resolution before calling fit 
  // as this will zoom out too much if the geometry is just a POINT
  let res = this.map.getView().getResolution();
  this.map.getView().fit(mainFeature.getGeometry().getExtent(), { constrainResolution: false});

  // set the resolution back to the original resolution if the new resolution
  // after calling fit is equal or less than zero
  let newRes = this.map.getView().getResolution();
  if (newRes <= 0)
    this.map.getView().setResolution(res);
}