Uniquely identifying Leaflet Markers


I've done some research on this topic before, but I have yet to find an answer to my particular question. I am currently working with Leaflet.js. Each marker has popup text that is pulled from a MySQL database. However, some of this data does not display in the popup and is only associated with the marker.

What I would like to do is whenever a particular marker is clicked, data that is associated with it is echoed in a location other than in the popup (ie. in a DIV).

Is there a way to uniquely identify a marker so that you can pull data that is associated with it and echo it elsewhere?

Edit: Here's some code to make things a bit clearer:

Here is some of my JS:

var json_data = <?php echo json_encode($data); ?>; for (var i = 0; i < json_data.length; i++) { L.marker([json_data[i].latitude, json_data[i].longitude]) .bindPopup(json_data[i].firstName + ' ' + json_data[i].lastName + '<br>' + 'Date:' + ' ' + json_data[i].dateOccurred) .addTo(map); }

And here is my PHP:

$query = "SELECT * FROM incident, victim WHERE incident.incidentID = victim.incidentID"; //converting the data from mySQL to PHP $data = array(); //setting up an emtpy PHP array for the data to go into if($result = mysqli_query($db,$query)) { while ($row = mysqli_fetch_assoc($result)) { $data[] = $row; } } ?>

Basically I pull the data via PHP and then encode it into JSON.

Also, thank you for your help, guys!! :)


You can try adding a custom attribute to the marker and then get that attribute in the onClick event:

//Handle marker click var onMarkerClick = function(e){ alert("You clicked on marker with customId: " +this.options.myCustomId); } //Create marker with custom attribute var marker = L.marker([36.83711,-2.464459], {myCustomId: "abc123"}); marker.on('click', onMarkerClick);

Example on JSFiddle



  • Silverlight synchronous calls to the wcf
  • Google Colab not updating package?
  • Team Foundation Server: Assign work item to a group instead of an individual user
  • ASP.NET - Image is not showing up
  • Error establishing a database connection on wordpress
  • What should I do about an internal error when I declare a generic “array of T”?
  • Get spring boot pagination number starts from 1 instead of 0
  • Failed to resolve: firebase-auth-15.0.0 [closed]
  • Authorize Attribute Authentication with Postman in Web Api
  • Unable to run testNG tests from maven
  • Swift manually rotate view controller
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • 'Edit' function for forum posts and such
  • Generate and export point cloud from Project Tango
  • Thumbnails for mxml components in Flex
  • Ember.js + JQuery-UI Tooltip - Tooltip does not reflect the model / controller changes
  • java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/SpringDispatcher-ser
  • How to write seo friendly url's using htaccess?
  • JQuery: Infinite input select
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • how to get the location(lat/lng) on google maps v3 from the location(x,y)
  • Cloud Code: Creating a Parse.File from URL
  • Terminal run dalvikvm with am.jar
  • jQuery scrollTop if URL has hash
  • How to handle div that is created dynamically in a table
  • Computing the discrete fourier transform of audio data with FFTW
  • Make checkout phone field optional for specific countries in WooCommerce
  • customize soft keyboard key preview
  • Cross compile glibc for arm, got undefined reference to some unwind functions
  • Using Service Component Runtime
  • How to use FirstOrDefault inside Include
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined