Search code examples
rotationopenlayers-3pan

Openlayers 3 pan map always to the left

I am developing an app where I get a user location from the server and I display it on the map.

I am also provided with an angle so I can display in which direction the user is looking.

There is also a possibility to open a sidepanel for some more information. In this situation I have to move the map center left which I do like this.

var center = map.getView().getCenter();

var pan = ol.animation.pan({
    duration: 500,
    source: (center)
});

if (isSidePanelVisible) {
    center[0] += 1000;
} else {
    center[0] -= 1000;
}

map.beforeRender(pan);
map.getView().setCenter(center);

This works great while the user is "looking" north but not when I rotate the map by an angle. Is there a quick way to pan the map always left by a certain amount regardles of angle?

Solution

  • You could use ol.Map.html#getPixelFromCoordinate to convert the center to pixel coordinates, do your calculation and then convert back to real coordinates with ol.Map.html#getCoordinateFromPixel:

    var view = map.getView();
var center = view.getCenter();
var centerInPx = map.getPixelFromCoordinate(center);
var newCenterInPx = [centerInPx[0] - 100, centerInPx[1]];
var newCenter = map.getCoordinateFromPixel(newCenterInPx);
view.setCenter(newCenter);

    http://jsfiddle.net/6mh110xv/1/