Using OpenLayers with markers on html?

Question

I am having problem showing a marker on page, I have this code which is implemented on my page, in console it is not showing any errors , the map is shown also with this code, but I cant see marker.

 <div class="map-section" id="map-sec">
 <div class="container">
 <div class="row mb-5 align-items-center">
 <div class="col-md-7 text-left">
 <h2 class="section-title mb-3">Map</h2>
 </div>
 </div>
 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 <div id="map" class="map"></div>
 <style>
 .map {
 height: 350px;
 width: 100%;
 }
 </style>
 <script type="text/javascript">
 var map = new ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 })
 ],
 view: new ol.View({
 center: ol.proj.fromLonLat([10.158792, 56.119577]),
 zoom: 15
 })
 });
 var icon = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.transform([10.158792, 56.119577], 'EPSG:4326', 'EPSG:3857'))
 });
 var iconLayerSource = new ol.source.Vector({ 
 features: [icon]
 });
 var iconLayer = new ol.layer.Vector({
 source: iconLayerSource,
 style: new ol.style.Style({
 image: new ol.style.Icon({ src:'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png'})
 })
 });
 </script>
 </div>
</div>

• Mike: It needs map.addLayer(iconLayer); as the last line of the script.
• TomazicM: @Mike It helps if answer is published as an answer, not as comment (as simple as it might be), so it's obvious that question has solution and one can quickly find it without need to wander through tiny comments.
• Adam: thanks, helped the solution , it just need to be added as the last line

Answer 1

As noted in the comments the primary issue is the layer needs to be added to the map.

Once that is working it's apparent the default center/center anchor setting for icons isn't appropriate for the image being used, it should be [0.5, 1] for center/bottom and for most displays a reduction of scale will be needed.

 var iconLayer = new ol.layer.Vector({
 source: iconLayerSource,
 style: new ol.style.Style({
 image: new ol.style.Icon({
 src:'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png',
 anchor: [0.5, 1],
 scale: 0.5
 }),
 })
 });
 map.addLayer(iconLayer);