Questions & Answers

I am working on openlayers map application currently using "ol": "6.2.1" version for some reason Icon is not showing on map I searched alot to know the reason why it's not showing. Not sure what's wrong with my implementation.

import VectorSource from 'ol/source/Vector'
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat, transform } from 'ol/proj';
import VectorLayer from 'ol/layer/Vector';

//here is code for adding markers layer


const markers = new VectorLayer({
      source:new VectorSource(),
      zIndex:2000,
      visible:true,
      style: new Style({
        image:new Icon({
          anchor: [0.5, 1],
          src: "https://mapmarker.io/api/v1/font-awesome/v4/icon?icon=fa-map-marker&size=20&color=FF0000",
        })
      })
    })
    this.map.addLayer(markers)
    for (let i = 0; i < coordinatesList.length; i++) {
         const marker =  new Feature({
            geometry: new Point(
              transform(coordinatesList[i], 'EPSG:27700', 'EPSG:3857'),
            )
          })
          markers.getSource().addFeature(marker)
}

Using this implementation I am expecting all the markers with custom Icon should render on map