javascript - Leaflet - select markers within the radius given with details provided

I know the tool in Leaflet, provided by this link:

http://www.gistechsolutions.com/leaflet/DEMO/Select/SelectPoints3.html

which enables me to select a markers within 150mi distance. This is fine, although there is an utter lack of the marker details when clicking on the map. Highlighted markers are seen in different colour within the radius, unfortunately I cannot populate their details in the i.e list on the side panel.

Is it possible at all?

Answer

Open the console (F12) you will see GeoJSON for the selected markers. So the data is there. In one of the simple examples, I use forEachFeature's on.click event to post the attributes to a HTML table (http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanel.html)

The issue I see is if you select 1 marker, the table is simple to populate, if you get 15 points, you need to make the table to be created dynamically. and may want them to collapse/open on a click.

https://www.bootply.com/GGAMvot45f or https://datatables.net/examples/api/row_details.html are examples of this.

Or since the selected set is really a new layer, you could use the simple example and just use it's on click to populate a fixed table. I usually use a tooltip to show the basic name so I know which on to select.

On second read here is the code that gets the GeoJSON from the selected set.

// See if meters is within radius, add the to array line 97 selPts.push(layer.feature);

line 111 geojsonLayer = L.geoJson(selPts, {

line 127 //Take array of features and make a GeoJSON feature collection var GeoJS = { type: "FeatureCollection", features: selPts };

// show selected GEOJSON data in console
console.log(JSON.stringify(GeoJS)); 

You could do this. var newLayerGeoJSON = JSON.stringify(GeoJS)

I didn't do a popup or push to a table for my green points but I could have. That was just not in the scope for this class example.