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"
})
}
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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' }); } }