Unique identification of sheet markers
I've been researching this topic for a while now, but I have yet to find an answer to my specific question. I am currently working with Leaflet.js. Each marker has popup text that is fetched from the MySQL database. However, some of this data does not appear in the popup and is only associated with the marker.
What I would like to do is, whenever a specific marker is clicked, the data associated with it is reflected somewhere other than the popup (i.e. in the DIV).
Is there a way to uniquely identify the marker so that you can pull the data associated with it and repeat it elsewhere?
Edit: Here's some code to make things clearer:
Here are 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>' + '<strong>Date:</strong>' + ' ' + json_data[i].dateOccurred)
.addTo(map);
}
And here's 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 fetch data via PHP and then encode it to JSON.
Also, thank you guys for your help! :)
source to share
You can try adding a custom attribute to the marker and then getting 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);
source to share