I'm using a JSON file to plot the markers in Leaflet:

"id": 1,
"date": "1/1/2015",
"Title": "Trinity College",
"Latitude": 41.745167,
"Longitude": -72.69263}, 
    "id": 2,
    "date": "1/2/2015",
    "Title": "Wesleyan University",
    "Latitude": 41.55709,
    "Longitude": -72.65691

What I'm doing is the following:

   var markers = new L.markerClusterGroup(); //clustering function

  var markerList = [];

  for (var i = 0; i < jsonDataObject.length; i++) {
    var marker = L.marker(L.latLng(parseFloat(jsonDataObject[i].Latitude), parseFloat(jsonDataObject[i].Longitude)));
    marker.bindPopup(jsonDataObject[i].Title );

However because I'll add extra functionalities for each individual markers, I want to add 'click' event for each marker and in this function accessing the JSON attributes for each marker. For example:

marker.on('click', onClick_Marker)

function onClick_Marker(e) {
        popup = L.popup()
        .setContent("The number id is: " + e.id)

How to get access individual attributes, from the JSON file, in a pop-up window?

1 Answer 1


Why don't you just grab the extra attributes in your marker creation and define the popup then. You won't need the extra onclick event.

var Line1 = jsonDataObject[i].field1;
var Line2 = jsonDataObject[i].field2;
MCDs = L.marker([lat,lng]).bindPopup("<b>Address: </b>" + Line1 + "<br />State: " + Line2);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.