[GIS] Point “inside” many polygons (leafletjs, turfjs, geojson)

javascriptturf

I'm trying to use "inside" function of turf js and leafletjs. I've prepered the basic example with one geojson point and one polygon but I cannot do the same with more than two polygons (geojson). Any ideas?

<!DOCTYPE html>
<html>
<head>

    <title>Mobile tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>

    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; }</style>
</head>
<body>

<div id='map'></div>

<script>

var pt1 = {
    "type" : "Feature",
    "properties" : {
        "marker-color" : "#f00"
    },
    "geometry" : {
        "type" : "Point",
        "coordinates" : [15.853271484375, 52.649729197309426]  //   19.16015625,52.119998657638156

    }
};

        var poly = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              13.842773437499998,
              50.42951794712287
            ],
            [
              13.842773437499998,
              54.213861000644926
            ],
            [
              16.89697265625,
              54.213861000644926
            ],
            [
              16.89697265625,
              50.42951794712287
            ],
            [
              13.842773437499998,
              50.42951794712287
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              19.094238281249996,
              52.669720383688166
            ],
            [
              18.544921875,
              52.16045455774706
            ],
            [
              18.43505859375,
              51.08282186160978
            ],
            [
              20.06103515625,
              50.65294336725709
            ],
            [
              20.80810546875,
              51.467696956223364
            ],
            [
              20.830078125,
              52.29504228453735
            ],
            [
              19.094238281249996,
              52.669720383688166
            ]
          ]
        ]
      }
    }
  ]
};

        var features = {"type" : "FeatureCollection", "features" : [pt1, poly]};

        //=features

        var isInside1 = turf.inside(pt1, poly);
        //=isInside1


        console.log(isInside1)



    var map = L.map('map').fitWorld().setView([52.119998657638156, 19.16015625], 6); 
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);

    L.geoJSON(poly).addTo(map);
    L.geoJSON(pt1).addTo(map);

</script>



</body>
</html>

Best Answer

It looks like the problem is that you are trying to pass a feature collection (containing two polygons) as a parameter to turf.inside, which takes individual features (a point feature and a polygon feature). You could run turf.inside twice. Once on the point and the first polygon, and then again on the point and second polygon. Another potential solution would be to run turf.within and pass it a feature collection containing the point, and a feature collection containing both polygons. Does that answer your question? If so, here is a link to the turf.within docs.

http://turfjs.org/docs/#within

Related Question