Marker shows as a dot instead of the icon image in openlayers

Question

i am trying to add icons on my map using features but instead of showing the icosn i get a dot on the map in that position.

let map = new Map({
target: "map",
layers:[ 
new TileLayer({
source: OSM(),
})
],
view: new View({
center: [0,0],
zoom:0
})
});



let a = new Feature({
    geometry: new Point([100,100]),
    name: 'a',
    imgSrc: "assets/arrow.png"
  })
let vectorSource = new sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);

Answer 1

try to make sure the src of image is right: just try ol.style.Icon({ src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' }));

Answer 2

Where did the imgSrc property of the Feature come from?

What works for me is (as @Mike suggested in his comment) is adding a style to the Feature as shown in the icon example:

let a = new ol.Feature({
    geometry: new ol.geom.Point([100,100]),
    name: 'a',
  })

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
            src:  "data/arrow.png",
            scale: 0.5
        }))
      });
      a.setStyle(iconStyle);

let vectorSource = new ol.source.Vector({ // sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);

live example

[![screenshot of arrow on map][1]][1]

full code:

    <div id="map" class="map"><div id="popup"></div></div>
    <script>
let map = new ol.Map({
  target: "map",
  layers:[ 
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM(),
    })
  ],
  view: new ol.View({
    center: [0,0],
    zoom:0
  })
});

let a = new ol.Feature({
    geometry: new ol.geom.Point([100,100]),
    name: 'a',
  })

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
            src:  "data/arrow.png",
            scale: 0.5
        }))
      });
      a.setStyle(iconStyle);

let vectorSource = new ol.source.Vector({ // sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);
</script>




**code snippet:**


  [1]: https://i.stack.imgur.com/F8l4x.png
  [2]: https://i.stack.imgur.com/zehSm.png