Extract attributes for markers in leaflet, onClick event

Question

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?

Thanks in advance! :)

Answer 1

Since you already create a Popup for each Marker, you could already embed your JSON data into its content.

But if for whatever reason you cannot do it, you just have to reference your JSON data from your created Leaflet Markers, as described in:

Leaflet: Including metadata with CircleMarkers

Within your loop, use any of the 3 described methods to attach your jsonDataObject[i] to your marker.

Then in your "click" handler, your clicked Marker is accessible as e.target, then depending on how you attached your JSON data, you can retrieve it with e.target.myJsonData, e.target.options.myJsonData or e.target.getProps().myJsonData.

For example:

var jsonDataObject = [{
    "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
  }
];

var map = L.map('map').setView([41.65, -72.67], 9);

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, {
    autoClose: false
  });
  map.addLayer(marker);
  marker.on('click', onClick_Marker)
  // Attach the corresponding JSON data to your marker:
  marker.myJsonData = jsonDataObject[i];
}

function onClick_Marker(e) {
  var marker = e.target;
  popup = L.popup()
    .setLatLng(marker.getLatLng())
    .setContent("The number id is: " + marker.myJsonData.id)
    .openOn(map);
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>