Open Layers Features move when zooming out

Question

EDIT: I changed the center of the map by user-input before but changed this for testing. Using a fixed center for my map, everything is fine. Question now is: why?

I am looping through a JSON with some features, extracting the coordinates for each feature, and add them to a map. So far everything is working fine, but I just noticed that the features or better the icons are moving when I am zooming out/in or moe left/right. The feature location should still be true since I am able to hover over the map and show an overlay (as intended).

I have no idea why the logos would behave like this, maybe someone can help me. Here is my code for one of the layers:

///////////////
// Forst
var Forststyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'images/tree.png'
})
});
var Forstsource = new ol.source.Vector();
$.getJSON('config/Forst.json', function (data) {
  $.each(data, function(key, val){
     var newMarker = new ol.Feature({
        geometry: new ol.geom.Point([this.long, this.lat]),
            pointAttributes: {            
                'Name': this.name, 
                'Strasse':this.Straße,
            }        
    });
    Forstsource.addFeature(newMarker);
    });
});
var Forst = new ol.layer.Vector({
        title: "Forst",
        visible: false,
        zIndex: 5,
        style: Forststyle,
        source: Forstsource});

I am adding the Forst-Layer to the layers of my map.

I thought my projection/view definition might be helpful.

var projection25832 = new ol.proj.Projection({
code: 'EPSG:25832',
    // The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
extent: [-1877994.66, 3932281.56, 836715.13, 9440581.95],
units: 'm'
});

I am adding my whole map-call. center and zoom get defined by user-input.

var map = new ol.Map({
    target: 'map',
    layers:[          
        new ol.layer.Tile({
            title: 'OSM (grau)',
            visible: true,
            source: new ol.source.TileWMS({
                url: 'https://ows.terrestris.de/osm/service?',
                    params: {
                        'LAYERS': "OSM-WMS",
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                        'TILED': false
                         }
            })
            }),
            Schaefer,
            KMR,
            GaLaBauSA, 
            GaLaBauBBG,
            Forst,
            Lohnunternehmen
            ],   
    view: new ol.View({
            projection: projection25832,
            center: center,
            zoom: zoom
        })
});

I am adding some images, view1 and view2 are only changed by scrolling left/right, view3 is zoomed in.

Some more edits: As stated above, when I am using a fixed center everything is working as intended. However, changing it depending on User Input is not working.

var D = $.ajax({
    type: "GET",
    url: url,
    dataType: "json"
    }).done(function(){
       var Coords = D.responseJSON.results[0].locations[0].latLng;
       var utm = "+proj=utm +zone=32";
       var new_center = [proj4("WGS84",utm,[Coords.lng, Coords.lat])[0],proj4("WGS84",utm,[Coords.lng, Coords.lat])[1]];
       console.log(new_center);
       CreateMap([new_center[0], new_center[1]],zoom);
       $("#Hintergrund").hide();
       });
       }

My CreateMap function is taking the coordinates of the center and the zoom, the url is a WEB-API (mapquest) that turns input into coordinates. If I pass e.g. my home-zip-code I get the coordinates that are used as my fixed center in the log, so there should not be a problem with the coordinates right?

Answer 1

Your image moving on zoom, because it automatically scales so the size would be readable regarding the zoom level (It doesn't stick to the map) You would need to anchor the center of the image elsewhere.

To anchor the center image you must play around with offsets. You can, play with offsets and image size itself with openlayers style class. I dont know which version you are using, so you most likely will have to read about it in the documentation or some other examples, but hare is one.

new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0, 0],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels",
            offset: [0,0],
            offsetOrigin: 'bottom-left',
            rotation: 0,
            src: 'images/tree.png'
        }))
    });

Setting anchor to 0,0 will be top left if Im not mistaken, you most likely will have to set it to 0, {Half width}

Basically, when you scroll and zoom, OpenLayers adjusts your image scaling from its center point, so in theory it will move if the center point isnt for example at the bottom. If that doesn't help, see if you have correct projections. And if that doesn't help, try creating "Markers" instead of points, I don't recall but one of them has way more control flow going.

I imagined it moved by tiny bit, seems like it drastically moves. Might be projections fault. Try to use projection: 'EPSG:4326' if your coordinates are in different one, you can convert it with

.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"))

I noticed you create projection manualy, not sure if thats the best approach. Check out this one. https://openlayers.org/en/latest/examples/epsg-4326.html Its using 4326. It is always better to use openlayers projection and if you have coordinates built differently, transform them to your needed ones.

To debug this, you can try to draw a linestring on a map (WKT/Polyline) if that changes on zoom, your problem is definitely in projections, if not, then it might be something else.

I was working with openlayers recently as well. And ran into the same problem, which I made by add

    style.graphicXOffset= 15;
    style.graphicYOffset= 28;

Set these to 0, should help.