I am using OpenLayers 4 and following the example http://openlayers.org/en/latest/examples/icon.html didn't work when I implemented. I need to place several maps from latitude and longitude coordinates.

For the moment I will leave as no zooming map, but I wish to know how to keep the mark in the same lat, lon position when zooming?

Position lost when zooming OpenLayers 4

My code:

        lat =  40.416775;
        lon = -3.703790;

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat]))
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: '/plugins/obs/gfx/marker.png'
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource

        var map = new ol.Map({
            target: mapid,
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
            view: new ol.View({
              center: ol.proj.fromLonLat([lon, lat]),
              zoom: 12,
            controls: ol.control.defaults({
               attributionOptions: {
                 collapsible: false

1 Answer 1


When the marker icon is moving through the map while zooming, it is caused by a bad anchor with respect to the dimensions/shape of the image of the marker.

So you have to define a proper anchor in your ol.style.Icon object, by playing with the anchor property, or better, by understanding how it works. For instance, for a "map pointer marker" like in the OL example, you have to set the following:

          anchor: [0.5, img_height],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',

where img_height is the height in pixels of your image. The rationale is to set the X anchor in the middle (0.5, with unit as fraction); and for Y positioning, we take the height of the image since it should be anchored at the "arrow" of the pointer, which is a the bottom.

For a simple circle that should be exactly anchored at the center of the image, the parameters should be:

          anchor: [0.5, 0.5],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',

which are actually the default values ;-).

The relevant API doc is here.

  • For me the only code I need for a "map pointer marker" is: anchor: [0.5, 1],
    – nvrandow
    Commented Dec 30, 2022 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.