Using Turf with Leaflet

[satrock1]

hello, i am a new js user, i use leaflet and leaflet-wfst. I know what to say that you need to write in leaflet-wfst for my problem, but I found a comment here stackexchange what you need use turf.union and turf.booleanContains, but I don't understand how to implement it, can you help please.

[stebogit]

@satrock1 I think the suggestion is to build a (Multi)Polygon combining the visited bounds (as polygons) and check on every new map load if the current map bounds are inside the visited area, to avoid loading already available layers. Conceptually something like this:

const prevBound1 = turf.polygon([[
    [-82.574787, 35.594087],
    [-82.574787, 35.615581],
    [-82.545261, 35.615581],
    [-82.545261, 35.594087],
    [-82.574787, 35.594087]
]], {"fill": "LimeGreen", "stroke-width": 0});

const prevBound2 = turf.polygon([[
    [-82.560024, 35.585153],
    [-82.560024, 35.602602],
    [-82.52964, 35.602602],
    [-82.52964, 35.585153],
    [-82.560024, 35.585153]
]], {"fill": "LimeGreen", "stroke-width": 0});

const cumulativeExploredBound = turf.union(
  prevBound1,
  prevBound2,
  {properties: {"fill": null, "stroke-width": 5, "stroke": "darkgreen"}}
);

const currentBound = turf.polygon([[
  [-82.56457328796387,35.60036895434144],
  [-82.55255699157715,35.60036895434144],
  [-82.55255699157715,35.607835994317284],
  [-82.56457328796387,35.607835994317284],
  [-82.56457328796387,35.60036895434144]]
], {"fill": "blue"});

console.log(turf.booleanContains(cumulativeExploredBound, currentBound)); // true