Frontline polygon merge

MapPolygons.js

@@ -20,39 +20,27 @@ map.on('load', () => {
     const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);
     const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
 
-    var frontlineFeatureCollection = [];
-    var frontlineFeatureCollectionA = [];
-
-    if (frontlineData.style === BOTH_SIDES) {
-         frontlineFeatureCollection = {
-            type: "FeatureCollection",
-            features: [
-                frontlineGeoJSON.bodyLeft,
-                ...frontlineGeoJSON.protrusionsLeft
-            ]
-        };
-        frontlineFeatureCollectionA = {
-        type: "FeatureCollection",
-        features: [
-            frontlineGeoJSON.bodyRight,
-            ...frontlineGeoJSON.protrusionsRight
-        ]
-    };
-    }else {
-        frontlineFeatureCollection = {
-            type: "FeatureCollection",
-            features: [
-                frontlineGeoJSON.body,
-                ...frontlineGeoJSON.protrusions
-            ]
-        };
-    };
-
     // FRONTLINE
-    map.addSource("frontlinePolygon", {
-        "type": "geojson",
-        "data": frontlineFeatureCollection
-    });
+    if (frontlineData.style === LEFT_SIDE){
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.leftPoly
+        });
+    }else if (frontlineData.style === RIGHT_SIDE){
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.rightPoly
+        });
+    } else {
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.rightPoly
+        });
+        map.addSource("frontlinePolygonSecond", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.leftPoly
+        });
+    }
 
     map.addLayer({
         "id": "frontlinePolygon",
@@ -76,15 +64,10 @@ map.on('load', () => {
     });
 
     if (frontlineData.style === BOTH_SIDES) {
-        map.addSource("frontlinePolygonA", {
-            "type": "geojson",
-            "data": frontlineFeatureCollectionA
-        });
-
         map.addLayer({
-            "id": "frontlinePolygonA",
+            "id": "frontlinePolygonSecond",
             "type": "fill",
-            "source": "frontlinePolygonA",
+            "source": "frontlinePolygonSecond",
             "layout": {},
             "paint": {
                 "fill-color": "green",
@@ -92,9 +75,9 @@ map.on('load', () => {
             }
         });
         map.addLayer({
-            "id": "frontlinePolygonA-outline",
+            "id": "frontlinePolygonSecond-outline",
             "type": "line",
-            "source": "frontlinePolygonA",
+            "source": "frontlinePolygonSecond",
             "paint": {
                 "line-color": "#000000",
                 "line-width": 2,
@@ -254,22 +237,30 @@ const arrowData = {
 //ARROW
 
 //FRONTLINE
+/*
 const frontlinePoints = [
         [10.42076, 40.08804],
         [25.42076, 80.08804],
         [65.42076, 75.08804]
     ];
+    */
+const frontlinePoints = [
+        [14.32076, 50.08804],
+        [15.42076, 51.08804],
+        [16.42076, 52.08804],
+        [18.42076, 50.08804]
+    ];
 const frontlineData = {
     points: frontlinePoints,
     splineStep: 0.08,
-    offsetDistance: 20000,
+    offsetDistance: 10000,
     style: BOTH_SIDES,
     };
 const protrusionData = {
-    length: 30000,
-    startSize: 10000,
-    endSize: 1000,
-    gap: 30000,
+    length: 15000,
+    startSize: 5000,
+    endSize: 500,
+    gap: 15000,
 };
 //FRONTLINE