How to combine view position with animation?

Question

I want to implement a "track up" map view, where the current position is not in the center of the map but 1/4 of the map height from the bottom (like standard navigation systems are in track up mode). I found this to be working with [centerOn] (https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#centerOn) defining the current GPS coordinates as "coordinate" and the "position" as width/2 and 1/4 of the map height just fine.

Now, I want to add animation to this, to have a smooth transition between the GPS updates.

I have tried this with [animate] (https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#animate), which does look really good from an animation perspective, but can't be positioned at the 1/4 height. Any idea how to combine both?

Answer 1

One way would be to overflow the map div so the center appears at 1/4 the height of the visible part

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([2.3442, 48.8635]),
        zoom: 6
    })
});

  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.map {
    position: absolute;
    width: 100%;
    height: calc(100% *3/2);
}
   .map div.ol-attribution {
    bottom: calc(100%/3 + .5em);
}
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

Another way, using a normal map, you could use centerOn to obtain the real map center when centering on a position, immediately reverse the change, then repeat using animate:

var oldCenter = view.getCenter();
view.centerOn(gpsCoordinates, size, [size[0]/2, size[1]*3/4]);
var newCenter = view.getCenter();
view.setCenter(oldCenter);
view.animate({center: newCenter});