CODEWITHSUNDEEP
javascriptevent-handlingleaflet
Roy
Roy

Reputation: 1518

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

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);
}

Upvotes: 29

Views: 86486

Answers (4)

Alexander Farber
Alexander Farber

Reputation: 22958

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

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

animated demo

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.

Upvotes: 7

Claies
Claies

Reputation: 22323

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);
}

});

Upvotes: 23

Hamed Soleymani
Hamed Soleymani

Reputation: 94

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

Upvotes: 0

Melo
Melo

Reputation: 191

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);
}

Upvotes: 17

Related Questions