I've been working on incorporating multiple markers into a Mapbox map using Angular. To achieve this, I have established two arrays:
- objectLongitudes:[456.5753561, 123.584079]
- objectLatitudes: [123.5259561, 456.584079]
Next, I attempted to iterate through the arrays in order to display them on the map:
mapboxgl.accessToken = environment.mapbox.accessToken;
// create marker for each longitude 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);
}
However, I'm encountering an issue where no markers are appearing on the map. Does anyone have any suggestions on how to resolve this?