Location of iconFeature openlayers3

Question

I have the following code for displaying map with a marker. I am using OpenLayers3. The problem is that the Marker is not displayed in the correct position normally. It must be displayed in Canada but it is displayed in the middle of the map

    var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point([-72.66, 45.04]),
     name: 'Null Island'
    });

    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/v3.20.0/examples/data/icon.png'
     }))
    });

    iconFeature.setStyle(iconStyle);

    var vectorSource = new ol.source.Vector({
     features: [iconFeature]
    });

    var vectorLayer = new ol.layer.Vector({
     source: vectorSource
    });


    //map
   var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-72, 45]),
      zoom: 6
    })
  });

How i can make the marker in the correct location. Thanks.

Answer 1

OSM layer is projected in EPSG:3857 projection system. But the coordinates passed to iconFeature is in WGS84 projection system. While setting the center the coordinates are converted. Need to apply same for iconFeature Object too.

Transform iconFeature feature objects's coordinates like did for center.

var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point(ol.proj.fromLonLat([-72.66, 45.04])),
     name: 'Null Island'
});

See the updated code in this plunker link

.