Create multiple markers on a Mapbox map with Angular

Issue

I am trying to create multiple markers on a Mapbox map with Angular. To do that I have created two arrays:

• objectLongitudes:[456.5753561, 123.584079]
• objectLatitudes: [123.5259561, 456.584079]

Then I try to loop through the arrays in order to plot them on the map:

    mapboxgl.accessToken = environment.mapbox.accessToken;

    // create marker for each lonfitude and latitude
    for (let i = 0; i < this.objectLongitudes?.length || ""; i++) {
      console.log("objectLongitude", this.objectLongitudes[i]);
      console.log("objectLatitude", this.objectLatitudes[i]);
      let marker = new mapboxgl
        .Marker({})
        .setLngLat([this.objectLongitudes[i], this.objectLatitudes[i]])
        .addTo(this.map);
    }

Unfortunately, no markers are created. Anyone an idea, how to fix that?

Solution

Solved it:

          this.objects.subscribe((data) => {
            console.log("data", data);
            this.objectCoordinates = data.map((object) => {
              return {
                objectLongitude: object.objectLongitude,
                objectLatitude: object.objectLatitude,
              }
            }
            );
            console.log("objectCoordinates", this.objectCoordinates);
            this.objectCoordinates.forEach((object) => {
              console.log("object", object);
              new mapboxgl.Marker()
                .setLngLat([object.objectLongitude, object.objectLatitude])
                .addTo(this.map);
            });
          });

Answered By - HansiFLK