How do you add marker to map using leaflet map.on('click', function) event handler
in your fiddle code, your 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
function addMarker(e){
// Add marker to map at click location; add popup window
var newMarker = new L.marker(e.latlng).addTo(map);
}
});
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 © <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);
}