From 5a5607914bf2a2e042bd52aee8df8f4be89069db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Thu, 25 Jul 2024 14:53:06 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=B8=94=EB=A1=9D?=
 =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20center=20=ED=8F=AC?=
 =?UTF-8?q?=EC=9D=B8=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/ControlApprovalsContainer.js       | 23 +++++++++++++++++--
 .../flight/OperationApprovalsContainer.js     | 23 +++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js
index 97012388..05593e47 100644
--- a/src/containers/flight/ControlApprovalsContainer.js
+++ b/src/containers/flight/ControlApprovalsContainer.js
@@ -310,7 +310,21 @@ export default function ControlApprovalsContainer({ mode }) {
         type: 'geojson',
         data: controlLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('controlLayer'));
+      // mapInstance.addLayer(flightlayerWayPoint('controlLayer'));
+      const centerPoint = {
+        id: 'waypoint-center',
+        type: 'circle',
+        source: 'controlLayer',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#8a1c05',
+          'circle-stroke-color': '#000000',
+          'circle-stroke-width': 1
+        },
+        filter: ['in', '$type', 'Point']
+      };
+      mapInstance.addLayer(centerPoint);
+
       mapInstance.addLayer(flightlayerBuffer('controlLayer'));
       mapInstance.addLayer(flightlayerPolygon('controlLayer'));
       mapInstance.addLayer(flightlayerPolyline('controlLayer'));
@@ -342,6 +356,10 @@ export default function ControlApprovalsContainer({ mode }) {
       circle.properties.center = [areas.lon, areas.lat];
       circle.geometry.coordinates = circleCoords;
 
+      const point = InitFeature('Point', 'POINT');
+      point.geometry.coordinates = [areas.lon, areas.lat];
+      controlLayer.features.push(point);
+
       controlLayer.features.push(circle);
 
       fitZoomPaths = circleCoords[0];
@@ -377,7 +395,8 @@ export default function ControlApprovalsContainer({ mode }) {
 
     if (mapObject) {
       const dataBlock = new mapboxgl.Popup({
-        offset: [0, 0],
+        anchor: 'bottom-left',
+        offset: [20, -20],
         closeButton: false,
         closeOnClick: false,
         closeOnMove: false
diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index d1a69884..2a7778a5 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/src/containers/flight/OperationApprovalsContainer.js
@@ -370,7 +370,21 @@ export default function OperationApprovalsContainer({ mode }) {
         type: 'geojson',
         data: operationLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('operationLayer'));
+      // mapInstance.addLayer(flightlayerWayPoint('operationLayer'));
+      const centerPoint = {
+        id: 'waypoint-center',
+        type: 'circle',
+        source: 'operationLayer',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#8a1c05',
+          'circle-stroke-color': '#000000',
+          'circle-stroke-width': 1
+        },
+        filter: ['in', '$type', 'Point']
+      };
+      mapInstance.addLayer(centerPoint);
+
       mapInstance.addLayer(flightlayerBuffer('operationLayer'));
       mapInstance.addLayer(flightlayerPolygon('operationLayer'));
       mapInstance.addLayer(flightlayerPolyline('operationLayer'));
@@ -408,6 +422,10 @@ export default function OperationApprovalsContainer({ mode }) {
           key: area?.planAreaSno
         };
 
+        const point = InitFeature('Point', 'POINT');
+        point.geometry.coordinates = [area.lon, area.lat];
+        operationLayer.features.push(point);
+
         operationLayer.features.push(circle);
       });
 
@@ -464,7 +482,8 @@ export default function OperationApprovalsContainer({ mode }) {
 
       if (mapObject) {
         const dataBlock = new mapboxgl.Popup({
-          offset: [0, 0],
+          anchor: 'bottom-left',
+          offset: [20, -20],
           closeButton: false,
           closeOnClick: false,
           closeOnMove: false