Add marker to map using OpenLayers and Angular 6

Question

I an investigating the OpenLayers 4.3.4 for my project in angular 6. I implemented it to show the map :-) But I can't make it show markers. I have looked a lot on this question and answer ( How to add marker by method, openlayers 4, angular 4 ), but I can't make it work :-|

I am getting this error:

core.js:1448 ERROR TypeError: layer.getLayerStatesArray is not a function

Thanks very much in advance

 import { Component, OnInit } from '@angular/core';
 import OlInteraction from 'ol/interaction';
 import OlTileLayer from 'ol/layer/tile';
 import OlMap from 'ol/map';
 import OlOverlay from 'ol/overlay';
 import OlProj from 'ol/proj';
 import OlXYZ from 'ol/source/xyz';
 import OlView from 'ol/view';
 import * as ol from 'openlayers';



export class OpenStreetMapComponent implements OnInit {

map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
olOverlay: OlOverlay;
olFeature: OlFeature;
markerSource: ol.source.Vector;

constructor() {
}

ngOnInit() {

    this.markerSource = new ol.source.Vector();

    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          opacity: 0.75,
          src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
        }))
      });

  this.source = new OlXYZ({
    // Tiles from Mapbox (Light)
    url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
  });

  this.view = new OlView({
    center: OlProj.fromLonLat([9.501785, 56.26392]),
    zoom: 7,
  });

  this.map = new OlMap({
    interactions: OlInteraction.defaults({mouseWheelZoom: false}),
    target: 'map',
    layers: [ new ol.layer.Tile({
        source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
        source: this.markerSource,
        style: markerStyle,
      }), ],
    view: this.view
  });

  this.addMarker(9.501785, 56.26392);
 //this.olOverlay = new OlOverlay();
}

addMarker(lon: number, lat: number) {
    console.log(lat);
    console.log(lon);

    var iconFeatures = [];

    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
        'EPSG:3857')),
      name: 'Null Island',
      population: 4000,
      rainfall: 500
    });

    iconFeatures.push(iconFeature);
    console.log('iconfrature');
    var vectorSource = new ol.source.Vector({
      features: iconFeatures //add an array of features
    });

    this.markerSource.addFeature(iconFeature);

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
      }))
    });

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

    this.map.addLayer(vectorLayer);

  }

}

Answer 1

start with something easier, like a marker without anything create the layer

var source = new ol.source.vector({});
var layer = new ol.layer.vector({ source: source});
    map.addLayer(layer );

create the marker

var marker = new ol.Feature({
    geometry: new ol.geom.Point([0,0]) // dont worry about coordinate type 0,0 will be in west coast of africa
}); 

add it to the source

source.addFeature(marker);