EDIT: My current code with a partial solution is here: https://jsfiddle.net/crashvector/xczj76om/26/
Thanks to @zakariah1 for pointing me in the right direction.
I don't have a popup for the download yet, but I am outputting the names of the samples from the zoom box.
I have a leaflet map that brings in data from a json, and generates layers and clusters dynamically. Each marker has a download button that passes the name of that marker to a follow on php script that then accesses a database and provides the sample data to the user.
The next thing I am trying to do is be able to select multiple markers and pass those names to the same php script. (The script parses the input into an array, so it functions when being passed a single name, or a long list.)
I was trying to use this code to make a bulk selection, but it throws an error for lat being undefined.
map.on("boxzoomend", function(e) {
for (var i = 0; i < markers.length; i++) {
if (e.boxZoomBounds.contains(markers[i])) {
console.log(markers[i]);
}
}
});
I've been trying to sort through some older solutions that could work like incorporating leaflet draw, or other plugins. But I'm not making much headway in that dept.
But as I think about it, I not only need a way to select multiple markers (Either by drawing a box, or some sort of ctrl/shift click arrangement,) but I also need a prompt to pop up for downloading the data. (Since my current download link is generated in the marker itself and only meant for that specific marker.)
Here is a fiddle to an example of my map: https://jsfiddle.net/crashvector/xczj76om/19/
GOAL: The end result would allow a user to select multiple markers, and then either generate a button or a popup prompt to download the associated data. The link would look something like:
`http://server/download.php?sample_name='sample_1 sample_2 sample_3 sample_4'>Download Microbial Community Data</button>'
Any insight is greatly appreciated!
EDIT Current attempt is here: https://jsfiddle.net/crashvector/xczj76om/24/
I have created an array to hold all of the points regardless of layer. And then I push the name and latlng into that array as each marker is generated.
I then am dumping the array to the console to make sure it's there, and then pointing the boxzoomed function to the latlngs in the array. I was able to get this to work when then only data in the array was the latlngs. But now that i've incorporated the sample name, it doesn't work. (I'm sure this is because I don't understand the notation needed to either store or retrieve the values.)
Am I heading the right way?
//adding an array to hold all marker locations and names
var bulk_list = [];
for (var i = 0; i < markers.length; ++i) {
var popup = '<br/><b>Sample Name:</b> ' + markers[i]["Sample Name"] +
'<br/><b>Location Description:</b> ' + markers[i]["Location Description"] +
'<br/><b>Date Taken:</b> ' + markers[i].Date +
'<br/><b>Classification:</b> ' + markers[i].Classification +
'<br/><button onclick="window.location=`zip_download.php?sample_name_list=' + markers[i]["Sample Name"] + '`" download="' + markers[i]["Sample Name"] + ' community data.csv">Download Microbial Community Data</button>'
//define markers
var m = L.marker([markers[i].Lattitude, markers[i].Longitude], {
icon: icons[markers[i].Classification]
})
.bindPopup(popup);
category = markers[i].Classification;
//pushing each markers name and latlng to the bulklist array
var data = {};
var name = markers[i]["Sample Name"];
var latlng = L.latLng([markers[i].Lattitude, markers[i].Longitude]);
data.name = name;
data.latlng = latlng;
bulk_list.push(data);
// Initialize the category array if not already set.
if (typeof categories[category] === "undefined") {
categories[category] = L.featureGroup.subGroup(parentGroup, m).addTo(map);
layersControl.addOverlay(categories[category], category);
}
categories[category].addLayer(m);
}
//output bulklist to show it worked
console.log(bulk_list);
//output sample names of points in the zoom box
map.on("boxzoomend", function(e) {
for (var i = 0; i < bulk_list.length; i++) {
if (e.boxZoomBounds.contains(bulk_list.latlng[i])) {
console.log(bulk_list.name[i]);
}
}
});
