OpenLayers - Fit to current extent is zooming out

Question

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.net/t6uvybd3/1/ (I am not sure what is the ol version there, but it does happen there as well)

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

Answer 1

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);