Can't add markers programatically

I am trying add markers dynamically/programatically after map is renderer but nothing is happening. Please see my code below

Service Code:

import { Injectable } from '@angular/core';
import { MapboxMarker, MapboxView, Mapbox } from "@nativescript-community/ui-mapbox";
import { registerElement } from '@nativescript/angular';
import { isIOS } from "@nativescript/core/platform";

@Injectable({
  providedIn: 'root'
})
export class MapService {
  mapboxView: MapboxView;
  mapbox: Mapbox;
  /**
   * Creates an instance of Mapbox.
   * @param config
   * @memberof Mapbox
   */
  constructor() {
    registerElement("Mapbox", () => require("@nativescript-community/ui-mapbox").MapboxView);
  }

  generateMap(view: any) {
    const settings = {
      container: view,
      accessToken: 'pk.eyJ1IjoiaGV5aXR6c3llZCIsImEiOiJjbDA5aTZlb3gwMGxsM2puejdyeTQyZnNjIn0.aJUDueGHXwKea-kN8lxn2g',
      style: 'traffic_day',
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 18, // 0 (most of the world) to 20, default 0
      showUserLocation: false, // default false
      hideAttribution: false, // default false
      hideLogo: false, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          selected: true,
          iconPath: '~/assets/Img/map.png',
          onTap: () => console.log("'Nice location' marker tapped"),
          onCalloutTap: () => console.log("'Nice location' marker callout tapped")
        }
      ]
    };


    const mapView = new MapboxView();
    mapView.setConfig(settings);
    view.content = mapView;
  }

}

Component.ts code:

import { Component, OnInit } from '@angular/core';
import { MapService } from 'map/map.service';
import { Page } from "@nativescript/core/ui/page";
import { ContentView } from "@nativescript/core/ui/content-view";

@Component({
  selector: 'app-map-service-demo',
  templateUrl: './map-service-demo.component.html',
  styleUrls: ['./map-service-demo.component.css']
})
export class MapServiceDemoComponent implements OnInit {

  constructor(public map: MapService, public page: Page) { }

  ngOnInit(): void {
    const contentView : ContentView = <ContentView>this.page.getViewById( 'mapContainer' );
    this.map.generateMap(contentView);
  }

}

Component.html code:

<StackLayout>
    <ContentView height="100%" width="100%" id="mapContainer">
    </ContentView>
</StackLayout>

The above implementation is not displaying markers by default even there is markers: [{}] property available in the settings.

Moreover, In the below code, from where we can refer mapbox

mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])

Please guide me on adding markers programatically.

Start with MapService.generateMap, following the MapboxView construction, setConfig(settings), and assignment to the ContentView. Compare the configured markers array with the addMarkers example and determine how the MapboxView instance should be referenced. Done means the configured marker displays and the programmatic marker path is clear.