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

    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>

Answer 2

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)

Question

2 answers

solution1
3 2019-01-09 12:21:45

solution2
2 ACCPTED 2017-04-04 16:13:00

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

Question

2 answers

solution1 3 2019-01-09 12:21:45

solution2 2 ACCPTED 2017-04-04 16:13:00

solution1
3 2019-01-09 12:21:45

solution2
2 ACCPTED 2017-04-04 16:13:00