0

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?

enter image description here

  • Looking at the source of the example it's very clear: inside SelectPoints function you can get all the info from individual markers that are within range. – TomazicM Sep 3 at 15:51
  • I've got quite a few lines in the SelectPoint function. One thing, that come to my mind is changing the: console.log(GeoJS.features.length +" Selected features"); something within this code, but I am not sure enough – Mariusz Krukar Sep 3 at 15:56
  • @Bill Chappel I saw it somewhere, but no in your examples. Could you precise where to find it? – Mariusz Krukar Sep 3 at 16:13
2

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.

1

Looks like I found what I needed:

The example is under this link:

http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanelSelect2.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.