Mapbox allow user to click on map and pin? - mapbox

Question

As the question says I want to allow users to click on the map and add a pin, I need to do that in order to display to users where is the business located and because I don't know the location. I need to allow them to insert it. However, documentation is a bit confusing for me and either I cannot find it or I just missed it.
So far I have:
<div id="right" class="map">
<div id='map' style='width: 100%; height: 100%;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10'
});
</script>
</div>

Answer 1

You could add a marker using the mapbox gl js API.
Example is already there:
https://www.mapbox.com/blog/custom-markers-mapboxgl/
https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
If you want to add the marker on a clicked position you could use something like this:
map.on('click', (e) => {
var coords = `lat: ${e.lngLat.lat} <br> lng: ${e.lngLat.lng}`;
// create the popup
var popup = new mapboxgl.Popup().setText(coords);
// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';
// create the marker
new mapboxgl.Marker(el)
.setLngLat(e.lngLat)
.setPopup(popup)
.addTo(map);
});
.mapboxgl-marker {
height: 20px;
width: 20px;
z-index: 5;
border: 1px solid black;
border-radius: 50%;
background-color: #305bad;
}

Answer 2

You can add a click event handler to the map surface. In the handler, add a layer with your "pin". In the example below, I added a circle layer but you could just as easily add a symbol layer for a custom "pin".
self.map.on("click", function(e){
console.log("background click", e.lngLat);
var geojson = {
type: "FeatureCollection",
features: [{
type:"Feature",
geometry: { type: "Point", coordinates: [ e.lngLat.lng, e.lngLat.lat ]}
}]
};
self.map.addSource("pins", {
"type": "geojson",
"data": geojson
});
self.map.addLayer({
id: "pinsLayer",
type: "circle",
source: "pins",
paint: {
"circle-color": "red",
"circle-radius": 5
}
});
});