How to add marker by method, openlayers 4, angular 4

Question

I want to add live position markers in my map.
As first step i just want to show one static point (lat, lon) or marker in my map, definded by the addMarker method in my code.
Here is my code:

import {Component, OnInit, AfterViewInit, ViewEncapsulation, Input, ElementRef, ViewChilds} from '@angular/core';
import { WmslayerService} from './wmslayer.service';
import { MapService} from './map.service';
import {AddwmslayerService} from '../../menue/addlayer/formlayer/addwmslayer.service';


import * as ol from 'openlayers';


@Component({
  selector: 'olmap',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {


  iconFeatures = [];
  layername: string;
  layerurl: string;

  mapId2: string;
  mapIndex: number;
  layerName: string;

  layer = [];
  layers = [];


  constructor(private mapService: MapService, private wmslayerService: WmslayerService,
              private addLayerService: AddwmslayerService, private tempdatagiaService: TempdatagiaService,
              private geomqttService: GeomqttService) {}


ngAfterViewInit() {
    setTimeout (() => {

let map = new ol.Map({
        target: this.mapId2,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
          }),
          //vector
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([6.661594, 50.433237]),
          zoom: 3,
        })
      });

      //// for loop, to add some layer

      for (let layer of this.wmslayerService.layer) {

        console.log(layer);

        let examplelayer = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: layer.layerurl,
            params: {
              'LAYERS': layer.layername,
              'TILED': true
            },
            projection: 'EPSG:4326',
            serverType: 'geoserver'
          })
        });
        this.layers.push(examplelayer);
        map.addLayer(examplelayer);
      }
      this.mapIndex = this.mapService.addMap(map);
      this.layername = this.layerName;
      console.log(this.mapIndex);
    },300)}

// -- addlayer dynamicly--

  addNewLayer(url: string, name: string) {
    console.log(name);
    let addedlayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: url,
        params: {
          'LAYERS': name,
          'TILED': true
        },
        projection: 'EPSG:4326'
      })
    });
    this.layers.push(addedlayer);
    this.mapService.getMap(this.mapIndex).addLayer(addedlayer);
  }



  addMarker(lon: string, lat: string) {
    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);

    var vectorSource = new ol.source.Vector({
      features: iconFeatures //add an array of features
    });

    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
    });

    map.addLayer(vectorLayer);

  }
}

The last line map.addLayer(vectorLayer); is not working.
The addMarker method will be triggered by a click event.
How could i get the method working?
Has someone a better idea or a stable solution to show live datapoints in an openlayers 4 map?

Answer 1

You do not need to create a new layer every time you want to show an additional marker. It's usually easier to create a single "marker layer" and just add features to it's source. All you need is keeping a reference to the layer's source and call addFeature on it.

Coordinates are not strings, but decimals: addMarker(lon: decimal, lat: decimal)

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

var 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'
  }))
});

let map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    new ol.layer.Vector({
      source: markerSource,
      style: markerStyle,
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([6.661594, 50.433237]),
    zoom: 3,
  })
});


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

  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
  });

  markerSource.addFeature(iconFeature);
}

map.on('singleclick',function(event){
  var lonLat = ol.proj.toLonLat(event.coordinate);
  addMarker(lonLat[0], lonLat[1]);
});

#map {
  /* just for testing purposes */
  width: 100%;
  min-width: 240px;
  max-width: 500px;
  height: 200px;
}

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js"></script>

<button onclick="addMarker(8.54, 47.37)">add marker at 8.54, 47.37</button>
<div id="map"></div>