[GIS] OpenLayers has wrong overlay positioning while zooming out

openlayersopenstreetmap

I'm quite new to OpenLayers. Right now I'm using it with OSM for a project and I'm facing what seems an issue to me: when I set an Overlay while zoomed in to max resolution, then, when I zoom out, the marker looks like it have moved to a different location. If I zoom in again everything is correct.

I this a bug in OpenLayers?

I'm using projection EPSG:3857 all the time and the marker positioning is set to "bottom-center".

Here is an image of the issue:
map
From left to right:
– 1. what I set
– 2. what I see when zooming out
– 3. What should be

Any Idea?

Best Answer

First, you should use a ol.layer.Vector instead of an ol.Overlay to display markers, especially if you have many.

Second, take a look at this Icon example in OpenLayers. The marker always points to the correct location. That is: because its center is not the location.

Look at the style definition:

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/v4.1.1/examples/data/icon.png'
    }))
  });

The anchor property defines where the image should points, by default it is the center of the image. See the ol.style.Icon API doc.

For your case, it would seem that the center of the image points to the location, where you would have wanted to bottom tip to do that. Try the ol.layer.Vector with icon style definition, instead.

Related Question