Intersect/union/difference features

by amay077

HTML

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="5">

  <base href="./">
  <link rel="stylesheet" href="index.css">

  <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
  
</head>

<body>
<div id="map" style="width:100%; height: calc(100vh);"></div>
<script src="index.js"></script>
</body>
</html>

CSS

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

JavaScript

const polygonD = {
  "type":"Feature",
  "properties":{
  },
  "geometry":{
    "type":"Polygon",
    "coordinates":[
      [
        [
          8.93463134765625,
          45.596743928454124
        ],
        [
          8.922271728515625,
          45.34249365462379
        ],
        [
          9.089813232421875,
          45.35118016078372
        ],
        [
          9.185943603515625,
          45.38784182444948
        ],
        [
          9.20379638671875,
          45.447607208669474
        ],
        [
          9.202423095703125,
          45.51885728113613
        ],
        [
          9.1461181640625,
          45.57463894211682
        ],
        [
          9.056854248046873,
          45.59962654582256
        ],
        [
          8.98406982421875,
          45.60154820846371
        ],
        [
          8.93463134765625,
          45.596743928454124
        ]
      ],
      [
        [
          8.967590332031248,
          45.55060191034006
        ],
        [
          9.032135009765623,
          45.55541013942947
        ],
        [
          9.081573486328123,
          45.54964021515788
        ],
        [
          9.14337158203125,
          45.51308360513236
        ],
        [
          9.147491455078123,
          45.4707252135953
        ],
        [
          9.131011962890623,
          45.42158812329091
        ],
        [
          9.062347412109373,
          45.383983820995105
        ],
        [
          8.960723876953123,
          45.381090145612646
        ],
        [
          8.967590332031248,
          45.55060191034006
        ]
      ]
    ]
  }
};

const polygonG = {
  "type":"Feature",
  "properties":{
    
  },
  "geometry":{
    "type":"Polygon",
    "coordinates":[
      [
        [
          9.402923583984375,
          45.56214096905609
        ],
        [
          9.31915283203125,
          45.60539133629575
        ],
        [
          9.213409423828125,
          45.61403741135093
  ...