Add new marker when I click on the map (OpenStreetMap, Leaflet JS)

Question

I want to add a new marker on the map when I right click,

function InitialiserCarte() {

var map = L.map('map').setView([48.866667, 2.333333], 17);

// create the tile layer with correct attribution
var tuileUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

var attrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

var osm = L.tileLayer(tuileUrl, {
    minZoom: 8, 
    maxZoom: 17,
    attribution: attrib
});

osm.addTo(map);

var marker = L.marker([48.866667, 2.333333]).addTo(map);}

and I call this function with this jquery (loading of the page)

$(document).ready(function(){
    InitialiserCarte();
});

Is it possible to add marker dynamically with a click action ?

Answer 1

Start here: the Leaflet Quick Start guide. The "Dealing with events" section talks about how to add events. From this Quick Start guide, here's some example code for adding a popup on a mouse click:

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

Try modifying the onMapClick function to add a marker instead of a popup. You'll need to use e.latlng to set the marker location.