How to insert a marker on an Open Layers map?

Question

Currently building a map application. Tried every method I found on the internet to add the markup but still doesn't work. Did I do something wrong?

This is my Angular code:

Somehow it's much easier to use Leaflet, but I don't want to give up on Open Layers so early.

export class MapComponent implements OnInit{
  
  map! : Map;
  marker! :any;
  center = fromLonLat([5.5697, 50.6330]);
  iconFeature = new Feature({
    geometry : new Point(fromLonLat([5.5697, 50.6330]))
  })
  
  ngOnInit(): void {

    this.map = new Map({
      view : new View({
        center : this.center,
        zoom : 0
      }),
      layers : [

         new LayerVector({
          source : new SourceVector({
            features : [this.iconFeature]
          }),
          style : new Style({
            image : new Icon({
              anchor : [0.5, 46],
              src : '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
            })
          })
         }),
         new TileLayer({
           source : new OSM()
         })
      ],
      target :  "map"
    })   
  }

}

Answer 1

can u try this example of code

import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as LayerVector } from 'ol/layer';
import { OSM, Vector as SourceVector } from 'ol/source';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj';
import { Icon, Style } from 'ol/style';

export class MapComponent implements OnInit{
  
  map!: Map;
  center = fromLonLat([5.5697, 50.6330]);

  ngOnInit(): void {

    const marker = new Feature({
      geometry: new Point(fromLonLat([5.5697, 50.6330]))
    });

    const markerLayer = new LayerVector({
      source: new SourceVector({
        features: [marker]
      }),
      style: new Style({
        image: new Icon({
          anchor: [0.5, 1],
          src: '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
        })
      })
    });

    this.map = new Map({
      view: new View({
        center: this.center,
        zoom: 0
      }),
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        markerLayer
      ],
      target: 'map'
    });
  }
}