3

I have a GeoJSON FeatureCollection object made up of several polygons and I would like to select the markers which lie within each polygon. The information contained within the markers is to be used to show average stats for each polygon.

I have seen some suggesting using http://turfjs.org/docs/#within or http://turfjs.org/docs/#inside.

Markers are simply in L.Marker form. I intend to use the onEachFeature function to have a popup for each polygon. Has anyone done this before and can recommend the best method?

Improve this question

2 Answers 2

Reset to default
2

I've done something similar, I used the draw tool to create a polygon and select the points inside. Your task is a little different. I did use the TURF JS CDN in my HTML head.

I read my GeoJSON in to a layer called allPoints, I had points and used icon instead of markers but same concept. My code below shows layer.toGeoJSON basically this is the Leaflet polygon. I would modify it to loop through the polygons and the turf.within will capture the points.

var shape2 = allPoints.toGeoJSON()

var ptsWithin2 = turf.within(shape2, layer.toGeoJSON());

alert('Found ' + ptsWithin2.features.length + ' features');
alert("results "+JSON.stringify(ptsWithin2));

Improve this answer
5
  • Thanks. I've done var searchWithin = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [[]]}}]}; using just one polygon and the coordinates for it. My markers aren't GeoJSON they are just L.Markers, would your method still work? Thanks
    – sm29
    May 2, 2017 at 21:29
  • 1
    I think I used .toGeoJSON() to convert it for turf, looks like markers should work in the same way. leafletjs.com/reference.html#marker-togeojson
    – Bill Chappell
    May 2, 2017 at 21:43
  • Thanks, I have it set up like this gist.github.com/mattspencer29/c233623f12c3d913c23eb9ef3b8dddd9. I would just like it to return each marker in each polygon (using GeoJSON properties or coordinates).
    – sm29
    May 3, 2017 at 9:22
  • I've been able to draw your polygons, I made a simple point layer and can symbolize it based on ratings. Your gist has two polygon layers and refers to to a PHP file (not included) for the points. How do you see this working? Do you select a single polygon and it selects points inside it? Do you export the selected points out or somehow highlight them? I'm confused here as to what your end game is.
    – Bill Chappell
    May 3, 2017 at 15:16
  • Thanks. I basically want to find the mean hygieneData[i].rating_value for each polygon. Each marker contains a rating value and therefore i need to export or have a method which returns each marker so i can find the mean.
    – sm29
    May 3, 2017 at 20:35
0

Here is an example of the logic working. My test point are already GeoJSON, I have PHP echo these as GeoJSON. Copy/Paste this HTML example to see it run the Modify as needed.

     <html>
<head>
  <meta charset=utf-8 />
  <title>Points Within</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

    <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>
<div id="map"></div>
<script>

var searchWithin = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "Id": 0, "Zone": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -1.576983165430079, 53.917874213202538 ], [ -1.575668840812682, 53.833757437687211 ], [ -1.662610537969044, 53.833939896652851 ], [ -1.662434014051257, 53.918053543420058 ], [ -1.576983165430079, 53.917874213202538 ] ] ] } },
{ "type": "Feature", "properties": { "Id": 0, "Zone": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -1.575668840812682, 53.833757437687211 ], [ -1.576983165430079, 53.917874213202538 ], [ -1.48383238441653, 53.917678723630672 ], [ -1.484008908334317, 53.833565076863636 ], [ -1.575668840812682, 53.833757437687211 ] ] ] } }
]}
//////////////////
var dataPts = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "ID": 1, "Lat": 53.89179593, "Lng": -1.62117004, "Rating": 1 }, "geometry": { "type": "Point", "coordinates": [ -1.62117004, 53.89179593 ] } },
{ "type": "Feature", "properties": { "ID": 2, "Lat": 53.8747, "Lng": -1.6239166, "Rating": 3 }, "geometry": { "type": "Point", "coordinates": [ -1.6239166, 53.8747 ] } },
{ "type": "Feature", "properties": { "ID": 3, "Lat": 53.88086, "Lng": -1.556625, "Rating": 2 }, "geometry": { "type": "Point", "coordinates": [ -1.556625, 53.88086 ] } },
{ "type": "Feature", "properties": { "ID": 4, "Lat": 53.863, "Lng": -1.518173, "Rating": 3 }, "geometry": { "type": "Point", "coordinates": [ -1.518173, 53.863 ] } },
{ "type": "Feature", "properties": { "ID": 5, "Lat": 53.8707, "Lng": -1.607437133, "Rating": 1 }, "geometry": { "type": "Point", "coordinates": [ -1.607437133, 53.8707 ] } }
]}
////////////////
    var map = L.map('map').setView([53.88, -1.5], 11);

    //basemap
    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(map);

    var polyList = {};

    var myPolyLayer = L.geoJSON();
    myPolyLayer.addData(searchWithin);

    var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
    };

    var myPts = L.geoJSON(null, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    })

    myPts.addData(dataPts);

//  myPolyLayer.addTo(map);
    myPts.addTo(map);

    myPolyLayer.eachLayer(function(layer) {

      var coords = layer.feature.geometry.coordinates;

        var polygon = turf.polygon(coords);
        var polygon2 =L.geoJson(polygon, {color: 'red'}).addTo(map);            
        var ptsWithin4 = turf.within(myPts.toGeoJSON(), polygon2.toGeoJSON());
        console.log( ptsWithin4.features.length +" points in this poly");
        alert("results "+JSON.stringify(ptsWithin4));

    })

</script>
</body>
</html>
Improve this answer

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.