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 ?

May be related to http://stackoverflow.com/questions/18388288/how-do-you-add-marker-to-map-using-leaflet-map-onclick-function-event-handl and http://stackoverflow.com/questions/9912145/leaflet-how-to-find-existing-markers-and-delete-markers/24342585#24342585 — user2441511, Apr 06 '17 at 18:12

score 3 · Answer 1 · answered Jan 09 '19 at 12:21

    function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(macarte);
    var marker = L.marker(e.latlng).addTo(macarte)
}

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin="" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
    <style type="text/css">
        #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
            height:1000px;
            width: 1000px;
        }
    </style>
</head>
<script type="text/javascript">
    var theme = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
    var lat = 8.619543;
    var lon = 0.82;
    var alt =481;
    var macarte = null;
    //var trace = new Array();
    var i = 0;
    //var marker1;
    var markerClusters; // Servira à stocker les groupes de marqueurs
    var popup = L.popup();
  function initMap(){

      // Nous définissons le dossier qui contiendra les marqueurs
      //var iconBase = 'img';
      // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
      macarte = L.map('map').setView([lat, lon], 5);
      markerClusters = L.markerClusterGroup; // Nous initialisons les groupes de marqueurs
      // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
      L.tileLayer(theme, {
          // Il est toujours bien de laisser le lien vers la source des données
          //attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
          minZoom: 1,
          maxZoom: 20
      }).addTo(macarte);
      macarte.on('click', onMapClick);
  }


    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(macarte);
        var marker = L.marker(e.latlng).addTo(macarte)
    }




    $(document).ready(function(){
        initMap();
    });
</script>
<div id="imap">
    <div id="map">
        <!-- Ici s'affichera la carte -->
    </div>
</div>

score 2 · Accepted Answer · answered Apr 04 '17 at 16:13

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.

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

2 Answers2