How to allow visitors to add new markers in Openlayers or Leaflet - leaflet

Question

I'm working on an open mapping project and am trying to create a map that would enable website visitors to add markers to the map with some info input fields (markers would be visible by all after approved).
I discovered OpenLayers and Leaflet which both seem promising, and spent some time putting together basic maps, but after a lot of searching I've been unable to find anything on allowing visitors to add new markers to maps made with these two tools. Anyone know if this is possible ~~ or if there's another open source tool that would work better for this application? I'm solid in HTML//CSS and know basics of JQUERY - but am not well versed in javascript so if there are more plug-n-play tools thats preferred, but if not I'm willing to do the work to learn...
Thanks!

Answer 1

Yes you can, check out https://openlayers.org/en/latest/examples/draw-features.html to draw the feature(Point/Line/Polygon) on map vector layer
and then you can grab that feature and save it in database and reproduce it later depending upon your business logic.
You can save the drawing from the above example some what like this in javascript:
var features = source.getSource().getFeatures();
To get Point's coordinates :
var lonlat = features[0].getGeometry().getCoordinates();
var longitude = lonlat[0];
var latitude = lonlat[1];
But as ghybs said, you need to do back end work as well.

Answer 2

you need in LEAFLET but this solution is in NUXTjs add this to you code:
#dblclick to you event method and get new lat al lng points to store in database o do something:
<div id="map-wrap" style="height: 100vh">
<no-ssr>
<l-map :zoom="13" :center="[-16.5002, -68.1493]" #dblclick="newMarkerbyClient">
<l-tile-layer
url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
></l-tile-layer>
<l-marker :lat-lng="[xPosition, yPosition]"></l-marker>
</l-map>
</no-ssr>
</div>
and you script
data() {
return {
xPosition: -16.5002,
yPosition: -68.1493,
}
},
methods: {
newMarkerbyClient(e) {
console.log("x: " + e.latlng.lat + " y:" + e.latlng.lng);
this.xPosition = e.latlng.lat;
this.yPosition = e.latlng.lng;
//xPosition and yPosition are you new point provided by client and you can do anything with this
}
}
Regards from BOLIVIA