Marker is slightly shifted(Projection problem)

Question

I have an app that displays gps markers on the map. The coordinates are from images and they are correct, but the marking is very inaccurate.

Here is my code: https://stackblitz.com/edit/angular-ivy-c97txg?file=src/app/app.component.html

The expected position is like here on the picture:

I understand that it has something to do with the projection of the coordinates, but unfortunately I do not understand exactly how.

Answer 1

As Mike has already pointed out in the comments, it is the extent. If this is not set, the coordinates are displayed correctly.

Line to remove

this.projection.setExtent(this.extent);