Can't add markers programatically

[vignesh-web]

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.