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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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 © <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>