Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
referring to a codepen demo at <a href="https://codepen.io/Maximusssssu/pen/zYpZYZX?editors=1111"></a>. As you can see when you click on map, it will place a marker, may I know how to add multiple markers so that the previous marker that I have added does not go away? I would prefer the coordinates(latitide,longitude) to be stored in an array. Please show a demo for understanding :)


What I have tried:

function add_marker (event) {
  var coordinates = event.lngLat;
  console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat);
  marker.setLngLat(coordinates).addTo(map);
}

map.on('click', add_marker);
Posted
Comments
Bob@work 30-Mar-22 16:04pm    
The example sample site works properly in Chrome Version 99.0.4844.84 (Official Build) (64-bit). Code is much different than what you have under "What I have tried:".

According to the mapbox help site, multiple markers need to be added to a set of markers - your code simply acts to move the one marker you are creating and replacing with each click. The line that adds the current click coordinates to the set of markers is:

c.push(coordinates);

See:
https://docs.mapbox.com/help/getting-started/add-markers/#:~:text=To%20add%20multiple%20markers%2C

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900