Leaflet – Extracting Attributes for Markers on Click Event

javascriptleaflet

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 );
    markerList.push(marker);
      }
      markers.addLayers(markerList);
      map.addLayer(markers);

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)
        .openOn(map);
    }

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

Best Answer

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);
mcd.addLayer(MCDs);
Related Question