Search code examples
javascriptleafletturfjs

Point "inside" many polygons


I am trying to use the turf-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>

Solution

  • Regarding to the docs there is no possibility to directly add a featureCollection as a parameter into turf-inside(). turf-inside() needs a polygon or mulipolygon. But you can write your own little function to check whether a point is inside your featureCollection like this:

    function checkIsInside(poly) {
      for(poly of poly.features) {
        var isInside = turf.inside(pt1, poly);
        if(isInside) {
          return true
        } else {
          return false
        }
      } 
    };
    

    Here I created a JS FIDDLE which will alert true or false if the point is in some of your polygons in you feature colleciton.