How do you add marker to map using leaflet map.on('click', function) event handler

Question

I'm trying to use an event handler to add a marker to the map. I can manage this with a callback function, but not when I separate the function from the event handler.

Callback (http://fiddle.jshell.net/rhewitt/U6Gaa/7/):

map.on('click', function(e){
    var marker = new L.marker(e.latlng).addTo(map);
});

Separate function (http://jsfiddle.net/rhewitt/U6Gaa/6/):

function newMarker(e){
    var marker = new L.marker(e.latlng).addTo(map);
}

Ingar

I think #9912645 will help you for adding as well as deleting the markers. – Lionfish

Answer 1

In your fiddle code, the function is in the wrong scope. Try moving the function inside the map function instead of in it's own scope...

I.e. instead of:

});

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

use (note the 2 brackets moved further down)

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

});

Claustral

Answer 2

The main problem is that the variable map that you use inside the function addMarker is not the variable in which you store the created map. There are several ways to solve this problem but the easiest can be to assign the created map to the variable map declared in the first line. Here is the code:

var map, newMarker, markerLocation;
$(function(){
    // Initialize the map
    // This variable map is inside the scope of the jQuery function.
    // var map = L.map('map').setView([38.487, -75.641], 8);

    // Now map reference the global map declared in the first line
    map = L.map('map').setView([38.487, -75.641], 8);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);
    newMarkerGroup = new L.LayerGroup();
    map.on('click', addMarker);
});

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}

Centri

Answer 3

Here a demo, which adds up to 4 markers, when you click the map.

And removes them all again on the 5th mouse click:

var MARKERS_MAX = 4;

var map = L.map('map').setView([51.4661, 7.2491], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 
    '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// a layer group, used here like a container for markers
var markersGroup = L.layerGroup();
map.addLayer(markersGroup);

map.on('click', function(e) {
    // get the count of currently displayed markers
    var markersCount = markersGroup.getLayers().length;

    if (markersCount < MARKERS_MAX) {
        var marker = L.marker(e.latlng).addTo(markersGroup);
        return;
    }

    // remove the markers when MARKERS_MAX is reached
    markersGroup.clearLayers();
});

#map {
  width: 100%;
  height: 200px;
}

<link href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.css" type="text/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.js"></script>

<div id="map"></div>

To make counting and removing markers easier, I add them to a LayerGroup object instead of to the map.

But you could also just add them to the map with an .addTo(map); call.

Also a comment on the other answers - I think you do not need the new keyword, when creating a marker or any other Leaflet.js object.

Chaussure

Answer 4

var marker = L.marker([35.737448286487595, 51.39876293182373]).addTo(map);
var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');

Biophysics