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
  • i have the same problem with the popover ,when i zoom on the map the popover change the location!! how ca i keep it on the same location when zooming on the map ? – Tabou drart Mar 26 at 19:18

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.

  • Great, I was not able to got that. Now it works perfect. Thanks so much. – manou Jul 28 '17 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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