Leaflet - point selection within geoJSON polygon

Question

I am trying to make my geoJSON polygon active with option of selection all markers lying inside.

Following this question: https://gis.stackexchange.com/questions/343927/selecting-points-within-geojson-polygon-bounds-using-leaflet

I was considering this example:

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

which is very well, but refers to the circle buffor only.

I was trying to make something exactly the same for my geoJSON layer poligons attached.

My code looks as follows:

 //MDU planners
gavin = L.geoJSON(Gavin);
loide = L.geoJSON(Loide);
sam = L.geoJSON(Sam);
jordan = L.geoJSON(Jordan);
steve = L.geoJSON(Steve);
danny = L.geoJSON(Danny);

and then:

  function ProcessClick(lat,lon){
console.log("You clicked the map at LAT: "+ lat+" and LONG: "+lon );
    if (theCircle != undefined) {
        map.removeLayer(theCircle);
    };
    if (theMarker != undefined) {
        map.removeLayer(theMarker);
    };
    if (geojsonLayer != undefined) {
        map.removeLayer(geojsonLayer);
    };
    theMarker = L.marker([lat,lon]).addTo(map);  //Add a marker to show where you clicked.
    SelectPoints(lat,lon);
    theMarker2 = L.marker([lat,lon]).addTo(map);  //Add a marker to show where you clicked. // Newmarker added in order to highlight the geoJSON polygon, where the points will be selected
    SelectPoints2(lat,lon);
 };

Next instead of:

  var selPts = [];

  function SelectPoints(lat,lon){
   var dist = document.getElementById("miles").value;
    xy = [lat,lon];  //center point of circle
   var theRadius = parseInt(dist) * 1609.34  //1609.34 meters in a mile  //dist is a string so it's 
 convered to an Interger.
    selPts.length =0;  //Reset the array if selecting new points

    job.eachLayer(function (layer) {
        layer_lat_long = layer.getLatLng(); // Lat, long of current point as it loops through - layer 1.
        distance_from_centerPoint = layer_lat_long.distanceTo(xy); // Distance from our circle marker To current point in meters
    if (distance_from_centerPoint <= theRadius && $('#cf').is(":checked")) { // See if meters is within radius, add the to array
        selPts.push(layer.feature);
    }
})

I added:

    var selPts2 = [];

     function SelectPoints2(lat,lon){
     var jo = jordan //geoJSON layer already attached as per above
    xy = [lat,lon];  //center point of circle
    var jorange = jo
    selPts2.length =0;  

    jordan.eachLayer(function (layer) {
                        layer_lat_long =  L.geoJson.getLatLng(); 
                        selPts.push(layer.feature);
                    }
                })

   map.on('click',function(e){  
    ProcessClick(jordan)    
    });

But since my console says, that:

Uncaught SyntaxError: Unexpected end of input

I must be totally wrong:

I saw something similar here:

Select one feature of multiple overlapping features (here polygons) on a Leaflet map

and here

Polygons with highlight features in Leaflet

But is not resolved and refers for the specified geoJson polygon features.

I am looking for sth like this:

http://www.gistechsolutions.com/leaflet/DEMO/basic/basic_Poly.html

but instead of popup I want to have all circlemarkers inside the polygon seen in the sidebar as per in the image below:

Is it possible to achieve?

Thank you for any help

EDIT:

According the @Falke Design user I tried the following links:

Determine if a point reside inside a leaflet polygon

Check if a polygon point is inside another in leaflet

and also:

https://turfjs.org/docs/#pointsWithinPolygon

where is a few JSfiddle examples:

http://jsfiddle.net/guspersson/6s1np2n4/

https://jsfiddle.net/4psL2hoo/1/

http://jsfiddle.net/ehpL8fho/14/

unfortunately not working.

I attached the:

  function isMarkerInsidePolygon(marker, poly) {
var inside = false;
var x = marker.getLatLng().lat, y = marker.getLatLng().lng;
for (var ii=0;ii<poly.getLatLngs().length;ii++){
    var polyPoints = poly.getLatLngs()[ii];
    for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = 
  i++) {
        var xi = polyPoints[i].lat, yi = polyPoints[i].lng;
        var xj = polyPoints[j].lat, yj = polyPoints[j].lng;

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
}

return inside;
   };

to my code, but nothing returned, similarily to the JSturf example, attached even as a dummy example.

 var points = turf.points([
[-46.6318, -23.5523],
[-46.6246, -23.5325],
[-46.6062, -23.5513],
[-46.663, -23.554],
[-46.643, -23.557]
 ]);

var searchWithin = turf.polygon([[
[-46.653,-23.543],
[-46.634,-23.5346],
[-46.613,-23.543],
[-46.614,-23.559],
[-46.631,-23.567],
[-46.653,-23.560],
[-46.653,-23.543]
 ]]);

 var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);

Is anywhere some decent working example of this kind of problem?

Do you want do display the markers inside the circle or the polygon? — Falke Design, Dec 12 '19 at 09:39
Yes indeed! I would like to display markers inside of the geoJSON polygon! However I want to keep the circle too, which is not a problem I think. — Geographos, Dec 12 '19 at 09:40
https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html Have a look on my full map, since I have own server I am not dealing with jsfiddle so often. You can take insight into the code. Thanks. — Geographos, Dec 12 '19 at 09:47

score 0 · Answer 1 · answered Dec 12 '19 at 10:00

0

You can use the turf.js library. This is a powerful library for geometry calculations.

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5.1.6/turf.min.js"></script>

var jordancoords = jordan.toGeoJSON().geometry.coordinates
job.eachLayer(function (layer) {
   if(turf.booleanContains(jordancoords, layer.toGeoJSON().geometry.coordinates)){
        selPts.push(layer.feature);
   }
})

Else you can try this: https://stackoverflow.com/a/31813714/8283938

answered Dec 12 '19 at 10:00

Falke Design

10,635
3
15
30

Hi, I attached your code, but console says: Uncaught TypeError: Cannot read property 'coordinates' of undefined at (index):620 On top of that, I think, that some geoJson on-click option is missing. Shall I use sth like this? function onMapClick(e) { var contained = polygon.contains(e.latlng); var message = contained ? "This is inside the polygon!" : "This is not inside the polygon."; popup .setLatLng(e.latlng) .setContent(message) .openOn(mymap); } – Geographos Dec 12 '19 at 11:54
1

can you pls post the output: `console.log(JSON.stringify(jordan.toGeoJSON()));` – Falke Design Dec 12 '19 at 12:13
I have already a pointer instead of cursour on my geoJSON polygon, which is something - tbh it looks like I am in a good church but in a wrong pew. The console still says the same and there is no markerlists in the sidebar as per in the image attached. – Geographos Dec 12 '19 at 12:22
Some example, that I am working now is: http://www.gistechsolutions.com/leaflet/DEMO/Select/PolySelect.html – Geographos Dec 12 '19 at 12:27
In your question you have a sidebar now you have not. What do you want?? And if you not post the output of `console.log(JSON.stringify(jordan.toGeoJSON()));`, i can not help you. And yes the error is the same but you get this output and i need them. – Falke Design Dec 12 '19 at 12:36
This sidebar marked with orange box, as per in the picture. I want to have there the points bounded with my geoJSON polygon, if it's possible at all. – Geographos Dec 12 '19 at 12:38

score 0 · Answer 2 · answered Apr 27 '21 at 18:38

0

updated the button select example: https://jsfiddle.net/jsfiddM/hs0njxfq/12/

<div id="map"></div>
<button id="myButton">Button</button>

answered Apr 27 '21 at 18:38

Brian Mayrose

49
3

Leaflet - point selection within geoJSON polygon

2 Answers2