Skip to main content

Working with Polygons in Auravant Made Easier with Turf.js

· 5 min read
Guille Gonzalez
Project Leader

Were you facing polygon challenges in Auravant development? Keep reading for a solution!

thumbnail image

Hello everyone!

In this article, we will be discussing Turf.js, an excellent JavaScript library that simplifies geospatial analysis. Whether you are a GIS (Geographic Information Systems) expert or just a developer working with extensions, Turf.js can be a valuable asset when dealing with the polygons on your property. Let's get started!

What is Turf.js?

Turf.js is like the magical assistant of geospatial analysis, manifested as an open-source JavaScript library. It takes complex tasks related to maps and simplifies them. Here's an example to help you understand better:

const point = turf.point([-73.935242, 40.730610]); // Create a point
const polygon = turf.polygon([[
[-73.988418, 40.747727],
[-73.949141, 40.747727],
[-73.949141, 40.717124],
[-73.988418, 40.717124],
[-73.988418, 40.747727]
]]); // Create a polygon

const isInside = turf.booleanPointInPolygon(point, polygon);

console.log(isInside); // True!

Look how simple it is! In just a few lines, we've determined if a point is inside a polygon. Turf.js does all the magic for us.

Why Choose Turf.js?

  1. Easy to Use One of the best things about Turf.js is its user-friendly API. Forget about complex equations and cryptic formulas. With Turf.js, you can perform amazing geospatial operations with just a few lines of code.

  2. Comprehensive Functionality Turf.js offers a wide variety of geospatial functions, from basic distance and area calculations to advanced operations like spatial unions and topological checks. It's like having a complete set of geospatial tools at your disposal.

  3. Optimal Performance The library is designed for exceptional performance. It leverages the capabilities of modern web browsers and can handle large datasets efficiently. This is crucial for applications that require real-time client-side geospatial analysis.

A Real-World Example

So far so good, but what does this have to do with Auravant? If you haven't noticed yet, when we obtain information about our property, we see a property that provides the georeferenced polygon of the lot in WKT format. If you're not familiar with WKT, I recommend this article on Everything You Need to Know About Geospatial Representation.

Let's continue. Many times, we want to relate a GeoJSON information layer with our lot. This is where Turf.js comes to our aid. Suppose we have a geographical layer with information about a specific soil type, and we want to know if a specific lot has that type of soil.

On one side, we have the polygon of the lot, and on the other, the polygon of the soil type. You're starting to see where this is going. Let's see how to use the Auravant SDK and Turf.js to relate these layers.

First, we get the polygon of the selected lot on the platform:

const lot = avt.state.async_getActualField()
.then(res => {
console.log(res)
return res
})

/* We will get something like this:
{
"result": "success",
"info": {
"id": "000000",
"bounds": [
-59.7994038300101,
-37.1375243175337,
-59.7794483731461,
-37.1246961699717
],
"nombre": "tosca",
"area": 120.121,
"centroide": "POINT(-59.7897197433957 -37.1315452604907)",
"wkt": "POLYGON((-59.7993662571025 -37.1288761511949,-59.7994038300101 -37.1289692369715,-59.7935696897473 -37.1337889219541,-59.7918327990397 -37.1351641026127,-59.7904780925349 -37.1362219338886,-59.7889467199963 -37.1373505038563,-59.7883786329894 -37.1375243175337,-59.779595069232 -37.1351769663482,-59.7794803270419 -37.1351343505663,-59.779476495263 -37.1351017151021,-59.7794609152629 -37.1349690190443,-59.7794483731461 -37.1348088742837,-59.7795962544985 -37.1345059379021,-59.7806005529878 -37.133707938882,-59.7825428590177 -37.1322148299723,-59.7924286200181 -37.1246961699717,-59.7993662571025 -37.1288761511949))"
}
}
*/

Now, we can use a library like WKT to convert the polygon from WKT format to GeoJSON. And why? Well, Turf.js is a library that works with GeoJSON format.

const lotGeoJSON = {
"type": "Polygon",
"coordinates": [
[
[ -59.7993662571025, -37.1288761511949 ],
[ -59.7994038300101, -37.1289692369715 ],
[ -59.7935696897473, -37.1337889219541 ],
[ -59.7918327990397, -37.1351641026127 ],
[ -59.7904780925349, -37.1362219338886 ],
[ -59.7889467199963, -37.1373505038563 ],
[ -59.7883786329894, -37.1375243175337 ],
[ -59.7795950692320, -37.1351769663482 ],
[ -59.7794803270419, -37.1351343505663 ],
[ -59.7794764952630, -37.1351017151021 ],
[ -59.7794609152629, -37.1349690190443 ],
[ -59.7794483731461, -37.1348088742837 ],
[ -59.7795962544985, -37.1345059379021 ],
[ -59.7806005529878, -37.1337079388820 ],
[ -59.7825428590177, -37.1322148299723 ],
[ -59.7924286200181, -37.1246961699717 ],
[ -59.7993662571025, -37.1288761511949 ]
]
]
}

Next, let's assume we have a soil type layer with this definition:

const layer = {
"type": "Feature

",
"id": "3331f815-d624-1475-867e-678adf714fd0",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-59.80395818059076,
-37.120915774733184
],
[
-59.802993851538666,
-37.129971413178914
],
[
-59.788957506447126,
-37.129117153950325
],
[
-59.78756458670522,
-37.121513822004076
],
[
-59.80395818059076,
-37.120915774733184
]
]
]
},
"properties": {
"distances": [
"1.01km",
"1.25km",
"854.4m",
"1.46km"
],
"soil_type": "sandy"
}
}

Now, we use the "intersect" function of Turf.js to determine the intersection between both polygons:

const intersection = turf.intersect(layer, lotGeoJSON)

And that's it, quite simple. The interesting part is that the result of this function returns another GeoJSON with the resulting polygon, and we can work with it. For example, we can calculate the area with the turf.area function, then we can use the total area of the lot and the area of the intersection to determine the percentage of the lot that has this soil type.

Bonus Track

There are interesting SDK functions that can be combined with this result. Here's a list of functions that help obtain polygons and draw them on the map:

  • Draw feature 🔗
  • Start Draw 🔗
  • Add tooltip to feature 🔗

Conclusion

In summary, Turf.js emerges as a great companion in the exciting world of geospatial analysis. This JavaScript library, with its user-friendly interface and powerful set of functions, significantly simplifies the resolution of complex problems related to maps and polygons. Its ability to handle large datasets with optimal performance is a valuable resource for real-time applications. So, the next time you face a geospatial challenge, don't hesitate to turn to Turf.js to streamline your tasks and take your analyses to the next level.