Mapbox set multiple markers

Hi,

I'm working with mapbox and placing several markers on the map. My code looks like this:

add.locations.forEach((location) => {
    console.log(location.long + " " + location.lat);
    // add marker to map
    let marker = new mapboxgl.Marker(el)
        .setLngLat([location.long, location.lat])
        .setPopup(popup)
        .addTo(this.map);

    this.markers.push(marker);
});

When I look into the console the console.log(location.long + " " + location.lat); with 2 different long and lat is visible. But on the map only the last location/pointer is there!?

What could be wrong here?

lostdreamer_nl

8 years ago

Best Answer

Level 53

When to let, or when to var.....

"Assuming strict mode, var will let you re-declare the same variable in the same scope. On the other hand, let will not:"

This should work:

add.locations.forEach((location) => {
    console.log(location.long + " " + location.lat);
    // add marker to map
    var marker = new mapboxgl.Marker(el)
        .setLngLat([location.long, location.lat])
        .setPopup(popup)
        .addTo(this.map);

    this.markers.push(marker);
});

1 like

Please or to participate in this conversation.