From 01764adb94fb7f5e720c36033479c63da5684c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Fri, 8 Sep 2023 16:29:40 +0900
Subject: [PATCH] =?UTF-8?q?mapbox=20=EC=A3=BC=EC=84=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    4 -
 public/index.html                             |    4 +-
 src/components/map/mapbox/MapBoxMap.js        | 1044 +++++--------
 src/components/map/mapbox/dron/DronMarker.js  | 1314 ++++++++---------
 .../map/mapbox/feature/FeatureAirZone.js      |  784 +++++-----
 5 files changed, 1423 insertions(+), 1727 deletions(-)

diff --git a/package.json b/package.json
index f15f57f..20a457a 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "@fullcalendar/timegrid": "5.7.2",
     "@fullcalendar/timeline": "5.7.2",
     "@hookform/resolvers": "1.3.4",
-    "@mapbox/mapbox-gl-language": "1.0.1",
     "@stomp/stompjs": "^6.1.0",
     "@turf/buffer": "^6.5.0",
     "@turf/turf": "6.5.0",
@@ -56,7 +55,6 @@
     "jsts": "^2.9.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "1.6.0",
-    "mapbox-gl": "^2.15.0",
     "moment": "2.29.1",
     "nouislider": "14.6.2",
     "nouislider-react": "3.3.8",
@@ -84,7 +82,6 @@
     "react-indiana-drag-scroll": "^2.0.1",
     "react-intl": "3.11.0",
     "react-leaflet": "3.1.0",
-    "react-mapbox-gl": "^5.1.1",
     "react-paginate": "7.0.0",
     "react-perfect-scrollbar": "1.5.5",
     "react-player": "2.6.2",
@@ -111,7 +108,6 @@
     "sweetalert2": "10.14.0",
     "sweetalert2-react-content": "3.0.1",
     "swiper": "6.0.4",
-    "threebox-plugin": "2.2.7",
     "typesafe-actions": "^5.1.0",
     "uppy": "1.21.2",
     "webpack": "4.43.0",
diff --git a/public/index.html b/public/index.html
index ec89020..5ce8f63 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,12 +13,12 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
 
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
       type="text/css"
     />
-    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script> -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <script
diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 07e8158..d265536 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -1,672 +1,372 @@
-import { MAPBOX_TOKEN } from '../../../configs/constants';
-import { useEffect, useState, useRef } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { DronMarker } from './dron/DronMarker';
-// import { DronHistory } from './dron/DronHistory';
-// import NaverMapControl from './NaverMapControl';
-// import { NaverMapSearch } from './search/NaverMapSearch';
-import { FeatureAirZone } from './feature/FeatureAirZone';
-// import DronPlan from './dron/DronPlan';
-// import NewDronPlan from './dron/NewDronPlan';
-// import { NewDronHistory } from './dron/NewDronHistroy';
-// import DronToast from './dron/DronToast';
-// import SensorZone from './sensor/SensorZone';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import mapboxgl from 'mapbox-gl';
-import threebox from 'threebox-plugin';
-import MapboxLanguage from '@mapbox/mapbox-gl-language';
-// mapboxgl.accessToken = MAPBOX_TOKEN;
-export default function MapBoxMap() {
-  // const mapContainer = useRef(null);
-  // const map = useRef(null);
-  // useEffect(() => {
-  //   if (map.current) return;
-  //   map.current = new mapboxgl.Map({
-  //     container: mapContainer.current,
-  //     style: 'mapbox://styles/mapbox/streets-v12',
-  //     center: [126.793722, 37.558522],
-  //     zoom: 9
-  //   });
-  // });
-
-  // return (
-  //   <div id='map'>
-  //     <div
-  //       style={{ width: '100%', height: '100vh' }}
-  //       ref={mapContainer}
-  //       className='map-container'
-  //     />
-  //   </div>
-  // );
-  const dispatch = useDispatch();
-  const naver = window.naver;
-
-  const [mapObject, setMapObject] = useState(null);
-  const [isMapLoaded, setMapLoaded] = useState(false);
-  const [arrPolyline, setArrPolyline] = useState([]);
-  const mapContainer = useRef(null);
-
-  const uamPosition = {
-    type: 'FeatureCollection',
-    features: [
-      {
-        type: 'Feature',
-        properties: {
-          name: 'V1',
-          background: '#ffffff',
-          border: '#15298A',
-          spanColor: '#000000'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.540668, 37.4797865]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'V2',
-          background: '#ffffff',
-          border: '#15298A',
-          spanColor: '#000000'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6107763, 37.521245]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'V3',
-          background: '#ffffff',
-          border: '#15298A',
-          spanColor: '#000000'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6243464, 37.5642352]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'V4',
-          background: '#ffffff',
-          border: '#15298A',
-          spanColor: '#000000'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6650669, 37.3658236]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'V5',
-          background: '#ffffff',
-          border: '#15298A',
-          spanColor: '#000000'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.7074861, 37.4520753]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R1',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.5801572, 37.492581]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R2',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6036588, 37.542031]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R3',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6005224, 37.5764269]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R4',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6600404, 37.5790407]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R5',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.649562, 37.524016]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R6',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.693722, 37.5506488]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R7',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6023981, 37.4712333]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R8',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6202759, 37.4046495]
-        }
-      },
-      {
-        type: 'Feature',
-        properties: {
-          name: 'R9',
-          background: '#429629',
-          border: '#ffffff',
-          spanColor: '#ffffff'
-        },
-        geometry: {
-          type: 'Point',
-          coordinates: [126.6296542, 37.3450207]
-        }
-      }
-    ]
-  };
-
-  useEffect(() => {
-    mapBoxMapInit();
-  }, []);
-
-  useEffect(() => {
-    if (mapObject) {
-      uamPosition.features.map(uam => {
-        const el = document.createElement('div');
-        const elChild = document.createElement('span');
-        elChild.innerText = uam.properties.name;
-        elChild.style.color = uam.properties.spanColor;
-        el.className = 'marker';
-        el.style.background = uam.properties.background;
-        el.style.borderRadius = '50%';
-        el.style.border = `4px solid ${uam.properties.border}`;
-        el.style.padding = '5px';
-        el.style.width = '40px';
-        el.style.height = '40px';
-        el.style.textAlign = 'center';
-        el.appendChild(elChild);
-
-        new mapboxgl.Marker(el)
-          .setLngLat(uam.geometry.coordinates)
-          .addTo(mapObject);
-      });
-    }
-  }, [mapObject]);
-  let popup;
-  const mapBoxMapInit = () => {
-    mapboxgl.accessToken = MAPBOX_TOKEN;
-    // const mapOptions = {
-    //   center: new naver.maps.LatLng(37.520357, 126.610166),
-    //   // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
-    //   // zoom: 10,
-    //   zoom: 14,
-    //   zoomControl: true,
-    //   mapTypeId: naver.maps.MapTypeId.NORMAR,
-    //   zoomControlOptions: {
-    //     position: naver.maps.Position.TOP_LEFT,
-
-    //     style: naver.maps.ZoomControlStyle.SMALL
-    //   }
-    // };
-    const map = new mapboxgl.Map({
-      container: 'map', // container ID
-      style: 'mapbox://styles/mapbox/streets-v12', // style URL
-      center: [127.85101412107547, 37.520357], // starting position [lng, lat]
-      zoom: 8.5, // starting zoom
-      antialias: true
-      // pitch: 64.9,
-      // bearing: 172.5
-    });
-
-    const language = new MapboxLanguage();
-    map.addControl(language);
-
-    // const tb = (window.tb = new threebox.Threebox(
-    //   map,
-    //   map.getCanvas().getContext('webgl'),
-    //   {
-    //     defaultLights: true,
-    //     enableSelectingObjects: true,
-    //     enableDraggingObjects: true,
-    //     enableRotatingObjects: true,
-    //     enableTooltips: true
-    //   }
-    // ));
-
-    map.on('load', () => {
-      const layers = map.getStyle().layers;
-
-      const labelLayerId = layers.find(
-        layer => layer.type === 'symbol' && layer.layout['text-field']
-      ).id;
-
-      // 지형 3d start
-      map.addSource('mapbox-dem', {
-        type: 'raster-dem',
-        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-        tileSize: 512,
-        maxZoom: 16
-      });
-      map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
-      map.addLayer({
-        id: 'contour-labels',
-        type: 'symbol',
-        source: {
-          type: 'vector',
-          url: 'mapbox://mapbox.mapbox-terrain-v2'
-        },
-        'source-layer': 'contour',
-        layout: {
-          visibility: 'visible',
-          'symbol-placement': 'line',
-          'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
-        },
-        paint: {
-          'icon-color': '#877b59',
-          'icon-halo-width': 1,
-          'text-color': '#877b59',
-          'text-halo-width': 1
-        }
-      });
-      map.addLayer({
-        id: 'sky',
-        type: 'sky',
-        paint: {
-          'sky-type': 'atmosphere',
-          'sky-atmosphere-sun': [0.0, 90.0],
-          'sky-atmosphere-sun-intensity': 15
-        }
-      });
-      // 지형 3d end
-      // 등고선 start
-      map.addLayer({
-        id: 'contours',
-        type: 'line',
-        source: {
-          type: 'vector',
-          url: 'mapbox://mapbox.mapbox-terrain-v2'
-        },
-        'source-layer': 'contour',
-        layout: {
-          visibility: 'visible',
-          'line-join': 'round',
-          'line-cap': 'round'
-        },
-        paint: {
-          'line-color': '#877b59',
-          'line-width': 1
-        }
-      });
-      // 등고선 end
-      // 3d building
-      map.addLayer(
-        {
-          id: 'add-3d-buildings',
-          source: 'composite',
-          'source-layer': 'building',
-          filter: ['==', 'extrude', 'true'],
-          type: 'fill-extrusion',
-          minzoom: 15,
-          paint: {
-            'fill-extrusion-color': '#aaa',
-
-            // Use an 'interpolate' expression to
-            // add a smooth transition effect to
-            // the buildings as the user zooms in.
-            'fill-extrusion-height': [
-              'interpolate',
-              ['linear'],
-              ['zoom'],
-              15,
-              0,
-              15.05,
-              ['get', 'height']
-            ],
-            'fill-extrusion-base': [
-              'interpolate',
-              ['linear'],
-              ['zoom'],
-              15,
-              0,
-              15.05,
-              ['get', 'min_height']
-            ],
-            'fill-extrusion-opacity': 0.6
-          }
-        },
-        labelLayerId
-      );
-      // 3d building
-      setMapObject(map);
-      setMapLoaded(true);
-    });
-    // map.on('style.load', () => {
-    //   map.addLayer({
-    //     id: 'custom-threebox-model',
-    //     type: 'custom',
-    //     renderingMode: '3d',
-    //     onAdd: function () {
-    //       // Creative Commons License attribution:  Metlife Building model by https://sketchfab.com/NanoRay
-    //       // https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
-    //       const scale = -20;
-    //       const options = {
-    //         obj: './src/components/map/mapbox/diorama/scene.gltf',
-    //         // obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
-    //         type: 'gltf',
-    //         units: 'meters',
-    //         scale: 1,
-    //         anchor: 'center',
-    //         rotation: { x: 90, y: 0, z: 0 }
-    //       };
-
-    //       tb.loadObj(options, model => {
-    //         model.setCoords([127.85101412107547, 37.520357, 1000]);
-    //         model.setRotation({ x: 0, y: 0, z: 241 });
-    //         tb.add(model);
-    //       });
-    //     },
-
-    //     render: function () {
-    //       tb.update();
-    //     }
-    //   });
-    // });
-    // map.on('mouseover', 'maine', e => {
-    //   const feature = e.features[0];
-    //   const properties = feature.properties;
-
-    //   // Remove the existing popup if it exists
-    //   if (popup) {
-    //     popup.remove();
-    //   }
-
-    //   // Create a new popup with the feature's properties
-    //   popup = new mapboxgl.Popup()
-    //     .setLngLat(e.lngLat)
-    //     .setHTML(
-    //       Object.entries(properties)
-    //         .map(([key, value]) => `${key}: ${value}`)
-    //         .join('<br>')
-    //     )
-    //     .addTo(map);
-    // });
-
-    // map.on('mouseout', 'maine', () => {
-    //   if (popup) {
-    //     popup.remove();
-    //   }
-    // });
-    // airPort?.map(air => polyArea(air, map));
-  };
-
-  const createUamArea = uam => {
-    const title = uam.title;
-    const position = new naver.maps.LatLng(uam.lat, uam.lon);
-
-    const circle = new naver.maps.Circle({
-      strokeColor: '#283046',
-      strokeOpacity: 1,
-      fillColor: '#7367F0',
-      fillOpacity: 0.1,
-      center: position,
-      // map: mapObject,
-      radius: 100,
-      clickable: true
-    });
-
-    // circle.setMap(mapObject);
-  };
-
-  const handleHistoryInit = line => {
-    setArrPolyline([...arrPolyline, line]);
-  };
-
-  //   const polyArea = air => {
-  //   const polyArr = [];
-  //   const radius = air.buffer;
-  //   const position = air.center;
-  //   const color = '#000';
-  //   const opacity = 0.7;
-
-  //   let angle = 0;
-  //   for (let i = 0; i < 4; i++) {
-  //     angle += 90;
-  //     let buffer = 0;
-  //     for (let j = 0; j < 9; j++) {
-  //       buffer += 1000;
-
-  //       const coord = turf.destination(
-  //         turf.point([position[0], position[1]]),
-  //         buffer / 1000,
-  //         angle,
-  //         { units: 'kilometers' }
-  //       ).geometry.coordinates;
-
-  //       let reduce = 0;
-  //       reduce = air.reduce[j];
-
-  //       if (angle % 180 === 0) {
-  //         const polyEW = {
-  //           type: 'Feature',
-  //           geometry: {
-  //             type: 'LineString',
-  //             coordinates: [
-  //               turf.destination(
-  //                 turf.point([coord[0], coord[1]]),
-  //                 (radius - reduce) / 1000,
-  //                 90,
-  //                 { units: 'kilometers' }
-  //               ).geometry.coordinates,
-  //               turf.destination(
-  //                 turf.point([coord[0], coord[1]]),
-  //                 (radius - reduce) / 1000,
-  //                 270,
-  //                 { units: 'kilometers' }
-  //               ).geometry.coordinates
-  //             ]
-  //           },
-  //           properties: {
-  //             stroke: color,
-  //             'stroke-width': 0.8,
-  //             'stroke-opacity': opacity
-  //           }
-  //         };
-  //         polyArr.push(polyEW);
-  //       } else {
-  //         const polyNS = {
-  //           type: 'Feature',
-  //           geometry: {
-  //             type: 'LineString',
-  //             coordinates: [
-  //               turf.destination(
-  //                 turf.point([coord[0], coord[1]]),
-  //                 (radius - reduce) / 1000,
-  //                 0,
-  //                 { units: 'kilometers' }
-  //               ).geometry.coordinates,
-  //               turf.destination(
-  //                 turf.point([coord[0], coord[1]]),
-  //                 (radius - reduce) / 1000,
-  //                 180,
-  //                 { units: 'kilometers' }
-  //               ).geometry.coordinates
-  //             ]
-  //           },
-  //           properties: {
-  //             stroke: color,
-  //             'stroke-width': 0.8,
-  //             'stroke-opacity': opacity
-  //           }
-  //         };
-  //         polyArr.push(polyNS);
-  //       }
-  //     }
-  //   }
-
-  //   const NS = {
-  //     type: 'Feature',
-  //     geometry: {
-  //       type: 'LineString',
-  //       coordinates: [
-  //         turf.destination(
-  //           turf.point([position[0], position[1]]),
-  //           radius / 1000,
-  //           0,
-  //           { units: 'kilometers' }
-  //         ).geometry.coordinates,
-  //         turf.destination(
-  //           turf.point([position[0], position[1]]),
-  //           radius / 1000,
-  //           180,
-  //           { units: 'kilometers' }
-  //         ).geometry.coordinates
-  //       ]
-  //     },
-  //     properties: {
-  //       stroke: color,
-  //       'stroke-width': 0.8,
-  //       'stroke-opacity': opacity
-  //     }
-  //   };
-  //   polyArr.push(NS);
-
-  //   const EW = {
-  //     type: 'Feature',
-  //     geometry: {
-  //       type: 'LineString',
-  //       coordinates: [
-  //         turf.destination(
-  //           turf.point([position[0], position[1]]),
-  //           radius / 1000,
-  //           90,
-  //           { units: 'kilometers' }
-  //         ).geometry.coordinates,
-  //         turf.destination(
-  //           turf.point([position[0], position[1]]),
-  //           radius / 1000,
-  //           270,
-  //           { units: 'kilometers' }
-  //         ).geometry.coordinates
-  //       ]
-  //     },
-  //     properties: {
-  //       stroke: color,
-  //       'stroke-width': 0.8,
-  //       'stroke-opacity': opacity
-  //     }
-  //   };
-  //   polyArr.push(EW);
-
-  //   setPoly(m => [...m, polyArr]);
-  // };
-
-  return (
-    <>
-      <div
-        id='map'
-        ref={mapContainer}
-        style={{ width: '100%', height: '100vh' }}
-      ></div>
-      {isMapLoaded && mapObject ? (
-        <>
-          <DronMarker map={mapObject} mapboxgl={mapboxgl} />
-
-          {/* <DronPlan map={mapObject} naver={naver} />
-          <NewDronPlan map={mapObject} naver={naver} />
-
-          <NaverMapControl map={mapObject} /> */}
-
-          {/* <DronHistory
-            map={mapObject}
-            naver={naver}
-            arrPolyline={arrPolyline}
-            handleHistoryInit={handleHistoryInit}
-          /> */}
-          {/* <NewDronHistory
-            map={mapObject}
-            naver={naver}
-            arrPolyline={arrPolyline}
-            handleHistoryInit={handleHistoryInit}
-          /> */}
-
-          {/* <DronToast /> */}
-
-          <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
-          {/* <NaverMapSearch map={mapObject} naver={naver} /> */}
-          {/* <SensorZone map={mapObject} naver={naver} /> */}
-        </>
-      ) : null}
-
-      {/* */}
-    </>
-  );
-}
+// import { MAPBOX_TOKEN } from '../../../configs/constants';
+// import { useEffect, useState, useRef } from 'react';
+// import { DronMarker } from './dron/DronMarker';
+// import { FeatureAirZone } from './feature/FeatureAirZone';
+// import 'mapbox-gl/dist/mapbox-gl.css';
+// import mapboxgl from 'mapbox-gl';
+// import MapboxLanguage from '@mapbox/mapbox-gl-language';
+
+// export default function MapBoxMap() {
+//   const naver = window.naver;
+
+//   const [mapObject, setMapObject] = useState(null);
+//   const [isMapLoaded, setMapLoaded] = useState(false);
+//   const mapContainer = useRef(null);
+
+//   const uamPosition = {
+//     type: 'FeatureCollection',
+//     features: [
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'V1',
+//           background: '#ffffff',
+//           border: '#15298A',
+//           spanColor: '#000000'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.540668, 37.4797865]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'V2',
+//           background: '#ffffff',
+//           border: '#15298A',
+//           spanColor: '#000000'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6107763, 37.521245]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'V3',
+//           background: '#ffffff',
+//           border: '#15298A',
+//           spanColor: '#000000'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6243464, 37.5642352]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'V4',
+//           background: '#ffffff',
+//           border: '#15298A',
+//           spanColor: '#000000'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6650669, 37.3658236]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'V5',
+//           background: '#ffffff',
+//           border: '#15298A',
+//           spanColor: '#000000'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.7074861, 37.4520753]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R1',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.5801572, 37.492581]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R2',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6036588, 37.542031]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R3',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6005224, 37.5764269]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R4',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6600404, 37.5790407]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R5',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.649562, 37.524016]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R6',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.693722, 37.5506488]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R7',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6023981, 37.4712333]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R8',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6202759, 37.4046495]
+//         }
+//       },
+//       {
+//         type: 'Feature',
+//         properties: {
+//           name: 'R9',
+//           background: '#429629',
+//           border: '#ffffff',
+//           spanColor: '#ffffff'
+//         },
+//         geometry: {
+//           type: 'Point',
+//           coordinates: [126.6296542, 37.3450207]
+//         }
+//       }
+//     ]
+//   };
+
+//   useEffect(() => {
+//     mapBoxMapInit();
+//   }, []);
+
+//   useEffect(() => {
+//     if (mapObject) {
+//       uamPosition.features.map(uam => {
+//         const el = document.createElement('div');
+//         const elChild = document.createElement('span');
+//         elChild.innerText = uam.properties.name;
+//         elChild.style.color = uam.properties.spanColor;
+//         el.className = 'marker';
+//         el.style.background = uam.properties.background;
+//         el.style.borderRadius = '50%';
+//         el.style.border = `4px solid ${uam.properties.border}`;
+//         el.style.padding = '5px';
+//         el.style.width = '40px';
+//         el.style.height = '40px';
+//         el.style.textAlign = 'center';
+//         el.appendChild(elChild);
+
+//         new mapboxgl.Marker(el)
+//           .setLngLat(uam.geometry.coordinates)
+//           .addTo(mapObject);
+//       });
+//     }
+//   }, [mapObject]);
+
+//   const mapBoxMapInit = () => {
+//     mapboxgl.accessToken = MAPBOX_TOKEN;
+
+//     const map = new mapboxgl.Map({
+//       container: 'map', // container ID
+//       style: 'mapbox://styles/mapbox/streets-v12', // style URL
+//       center: [126.611401, 37.519695], // starting position [lng, lat]
+//       zoom: 11, // starting zoom
+//       antialias: true
+//     });
+
+//     const language = new MapboxLanguage();
+//     map.addControl(language);
+
+//     map.on('load', () => {
+//       const layers = map.getStyle().layers;
+
+//       const labelLayerId = layers.find(
+//         layer => layer.type === 'symbol' && layer.layout['text-field']
+//       ).id;
+
+//       // 지형 3d start
+//       map.addSource('mapbox-dem', {
+//         type: 'raster-dem',
+//         url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+//         tileSize: 512,
+//         maxZoom: 16
+//       });
+//       map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+//       map.addLayer({
+//         id: 'contour-labels',
+//         type: 'symbol',
+//         source: {
+//           type: 'vector',
+//           url: 'mapbox://mapbox.mapbox-terrain-v2'
+//         },
+//         'source-layer': 'contour',
+//         layout: {
+//           visibility: 'visible',
+//           'symbol-placement': 'line',
+//           'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
+//         },
+//         paint: {
+//           'icon-color': '#877b59',
+//           'icon-halo-width': 1,
+//           'text-color': '#877b59',
+//           'text-halo-width': 1
+//         }
+//       });
+//       map.addLayer({
+//         id: 'sky',
+//         type: 'sky',
+//         paint: {
+//           'sky-type': 'atmosphere',
+//           'sky-atmosphere-sun': [0.0, 90.0],
+//           'sky-atmosphere-sun-intensity': 15
+//         }
+//       });
+//       // 지형 3d end
+//       // 등고선 start
+//       map.addLayer({
+//         id: 'contours',
+//         type: 'line',
+//         source: {
+//           type: 'vector',
+//           url: 'mapbox://mapbox.mapbox-terrain-v2'
+//         },
+//         'source-layer': 'contour',
+//         layout: {
+//           visibility: 'visible',
+//           'line-join': 'round',
+//           'line-cap': 'round'
+//         },
+//         paint: {
+//           'line-color': '#877b59',
+//           'line-width': 1
+//         }
+//       });
+//       // 등고선 end
+//       // 3d building
+//       map.addLayer(
+//         {
+//           id: 'add-3d-buildings',
+//           source: 'composite',
+//           'source-layer': 'building',
+//           filter: ['==', 'extrude', 'true'],
+//           type: 'fill-extrusion',
+//           minzoom: 15,
+//           paint: {
+//             'fill-extrusion-color': '#aaa',
+
+//             // Use an 'interpolate' expression to
+//             // add a smooth transition effect to
+//             // the buildings as the user zooms in.
+//             'fill-extrusion-height': [
+//               'interpolate',
+//               ['linear'],
+//               ['zoom'],
+//               15,
+//               0,
+//               15.05,
+//               ['get', 'height']
+//             ],
+//             'fill-extrusion-base': [
+//               'interpolate',
+//               ['linear'],
+//               ['zoom'],
+//               15,
+//               0,
+//               15.05,
+//               ['get', 'min_height']
+//             ],
+//             'fill-extrusion-opacity': 0.6
+//           }
+//         },
+//         labelLayerId
+//       );
+//       // 3d building
+//       setMapObject(map);
+//       setMapLoaded(true);
+//     });
+//   };
+
+//   return (
+//     <>
+//       <div
+//         id='map'
+//         ref={mapContainer}
+//         style={{ width: '100%', height: '100vh' }}
+//       ></div>
+//       {isMapLoaded && mapObject ? (
+//         <>
+//           <DronMarker map={mapObject} mapboxgl={mapboxgl} />
+//           <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+//         </>
+//       ) : null}
+
+//       {/* */}
+//     </>
+//   );
+// }
diff --git a/src/components/map/mapbox/dron/DronMarker.js b/src/components/map/mapbox/dron/DronMarker.js
index bbcd23d..9e8b149 100644
--- a/src/components/map/mapbox/dron/DronMarker.js
+++ b/src/components/map/mapbox/dron/DronMarker.js
@@ -1,657 +1,657 @@
-import $ from 'jquery';
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import '../../../../assets/css/custom.css';
-import FlightIcon from '../../../../assets/images/airplan_org.svg';
-import FlightDetailIcon from '../../../../assets/images/airplan_pp.svg';
-import DronIcon from '../../../../assets/images/drone-marker-icon.png';
-import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png';
-import DronUamIcon from '../../../../assets/images/uam_icon.png';
-import DronUamDetailIcon from '../../../../assets/images/uam_icon_purple.png';
-import {
-  controlGpDtlAction,
-  controlGpFlightPlanAction,
-  controlGpCountAction
-} from '../../../../modules/control/gp';
-import {
-  objectClickAction,
-  objectUnClickAction
-} from '../../../../modules/control/map/actions/controlMapActions';
-import { JOIN_LIST } from '../../../../modules/basis/group/actions/basisGroupAction';
-
-export const DronMarker = props => {
-  const dispatch = useDispatch();
-
-  const { controlGpList, controlGroupAuthInfo } = useSelector(
-    state => state.controlGpState
-  );
-  const { objectId, isClickObject } = useSelector(
-    state => state.controlMapReducer,
-    shallowEqual
-  );
-  // const { controlGroupAuthInfo } = useSelector(
-  //   state => state.controlGroupAuthState
-  // );
-  const { controlGpArcrftWarnList } = useSelector(
-    state => state.controlGpLogState
-  );
-
-  const { user } = useSelector(state => state.authState);
-  const { joinList } = useSelector(state => state.groupState);
-
-  const [arrMarkers, setArrMarkers] = useState([]);
-  const [arrInfos, setArrInfos] = useState([]);
-
-  const [count, setCount] = useState({
-    drone: [],
-    flight: []
-  });
-
-  let mapboxgl = props.mapboxgl;
-  let map = props.map;
-  let CustomOverlay;
-  let infoWindow;
-  // const infowindowOpen = data => {
-  //   const content = `
-  //       <div class="dblock-box">
-  //         <div class="dblock-ti">
-  //           <span>${data?.id}</span>
-  //         </div>
-  //         <div class="dblock-txt>
-  //           <div class="dblock-txt-list">
-  //             <div>
-  //               <span style="width: 250px; display: inline-block;">${
-  //                 data?.speed
-  //               }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
-  //     data?.heading
-  //   }</span>
-  //               <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
-  //                 6
-  //               )} | ${(data?.coord._lng).toFixed(6)}</span>
-  //             </div>
-  //           </div>
-  //         </div>
-  //       </div>
-  //     `;
-
-  //   infoWindow = new naver.maps.InfoWindow({
-  //     class: 'tooltip-dblock',
-  //     content: content,
-  //     maxWidth: 160,
-  //     backgroundColor: '#283046', //박스안쪽영역 컬러
-  //     // borderColor: '#333', //테두리컬러
-  //     // borderWidth: 3, //테두리 굵기
-  //     // anchorSize: new naver.maps.Size(30, -10),
-  //     anchorSkew: false,
-  //     anchorColor: '#283046',
-
-  //     pixelOffset: new naver.maps.Point(20, -20)
-  //   });
-
-  //   infoWindow.open(props.map, data.coord);
-  // };
-
-  // useLayoutEffect(() => {
-  //   dispatch(controlGroupAuthAction.request());
-  // }, [controlGpList]);
-
-  useEffect(() => {
-    if (count.drone.length > 0 || count.flight.length > 0) {
-      dispatch(
-        controlGpCountAction.request({
-          count
-        })
-      );
-    } else {
-      const count = {
-        drone: [],
-        flight: []
-      };
-      dispatch(
-        controlGpCountAction.request({
-          count
-        })
-      );
-    }
-  }, [count]);
-
-  useEffect(() => {
-    dispatch(
-      JOIN_LIST.request({
-        cstmrSno: user?.cstmrSno
-      })
-    );
-  }, []);
-
-  useEffect(() => {
-    if (arrMarkers.length != 0) {
-      markerInfo(arrMarkers);
-    }
-  }, [arrMarkers]);
-
-  useEffect(() => {
-    markerInit();
-  }, [controlGpList]);
-
-  //   useEffect(() => {
-  //     let imageUrl;
-  //     arrMarkers.map(clickMarker => {
-  //       if (objectId === clickMarker.controlId && isClickObject) {
-  //         // console.log(clickMarker.gps.objectId, '><><');
-  //         imageUrl =
-  //           // clickMarker.type === 'DRONE' ? DronUamDetailIcon : FlightDetailIcon;
-  //           clickMarker.type === 'DRONE'
-  //             ? clickMarker.gps.objectId.includes('UAM')
-  //               ? DronUamDetailIcon
-  //               : DronDetailIcon
-  //             : FlightDetailIcon;
-  //         clickMarker.setIcon({
-  //           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
-  //           origin: new naver.maps.Point(0, 0),
-  //           anchor: new naver.maps.Point(15, 15)
-  //         });
-  //       } else {
-  //         // imageUrl = clickMarker.type === 'DRONE' ? DronUamIcon : FlightIcon;
-  //         imageUrl =
-  //           clickMarker.type === 'DRONE'
-  //             ? clickMarker.gps.objectId.includes('UAM')
-  //               ? DronUamIcon
-  //               : DronIcon
-  //             : FlightIcon;
-  //         clickMarker.setIcon({
-  //           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
-  //           origin: new naver.maps.Point(0, 0),
-  //           anchor: new naver.maps.Point(15, 15)
-  //         });
-  //       }
-  //     });
-  //   }, [objectId, isClickObject]);
-
-  // useEffect(() => {
-  //   arrMarkers.map(clickMarker => {
-  //     if (objectId === clickMarker.controlId) {
-  //       dispatch(controlGpDtlAction.request(objectId));
-  //       props.map.setCenter(clickMarker.getPosition());
-  //       props.map.setZoom(13, true);
-  //     }
-  //   });
-  // }, [objectId]);
-
-  //마커를 그린다.
-  const addMarkers = (position, id, controlId, gps) => {
-    const gpsCnt = {
-      gps: gps,
-      type: ''
-    };
-
-    const markerOption = {};
-
-    if (id.substring(0, 2) === 'PA') {
-      const pal = controlGroupAuthInfo?.find(
-        prev => prev.idntfNum === gps.objectId
-      );
-      if (pal || !pal || id.includes('NAMWON')) {
-        if (id.includes('UAM')) {
-          markerOption.url = DronUamIcon;
-        } else {
-          markerOption.url = DronIcon;
-        }
-
-        markerOption.type = 'DRONE';
-        gpsCnt.type = 'drone';
-      } else {
-        if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
-          markerOption.url = FlightIcon;
-          markerOption.type = 'FLIGHT';
-          gpsCnt.type = 'flight';
-        } else {
-          const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
-          if (
-            terminal?.groupAuthCd === 'MASTER' ||
-            terminal?.groupAuthCd === 'LEADER'
-          ) {
-            markerOption.url = FlightIcon;
-            markerOption.type = 'FLIGHT';
-            gpsCnt.type = 'flight';
-          }
-        }
-      }
-    } else {
-      if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
-        markerOption.url = FlightIcon;
-        markerOption.type = 'FLIGHT';
-        gpsCnt.type = 'flight';
-      } else {
-        const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
-        if (
-          terminal?.groupAuthCd === 'MASTER' ||
-          terminal?.groupAuthCd === 'LEADER'
-        ) {
-          markerOption.url = FlightIcon;
-          markerOption.type = 'FLIGHT';
-          gpsCnt.type = 'flight';
-        }
-      }
-    }
-
-    if (gpsCnt.type === 'drone') {
-      setCount(prev => ({
-        ...prev,
-        drone: [...prev.drone, gpsCnt]
-      }));
-    } else if (gpsCnt.type === 'flight') {
-      setCount(prev => ({
-        ...prev,
-        flight: [...prev.flight, gpsCnt]
-      }));
-    }
-
-    // if (id.substring(0, 2) === 'PA') {
-    //   const pal = controlGroupAuthInfo?.find(
-    //     prev => prev.idntfNum === gps.objectId
-    //   );
-    //   markerOption.url = pal ? DronIcon : FlightIcon;
-    //   markerOption.type = pal ? 'DRONE' : 'FLIGHT';
-    // } else {
-    //   markerOption.url = FlightIcon;
-    //   markerOption.type = 'FLIGHT';
-    // }
-
-    // markerOption.origin = new naver.maps.Point(0, 0);
-    // markerOption.anchor = new naver.maps.Point(15, 15);
-
-    // const marker = new naver.maps.Marker({
-    //   position: position,
-    //   title: id,
-    //   id: id,
-    //   controlId: controlId,
-    //   type: markerOption.type,
-    //   icon: {
-    //     content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
-    //     origin: markerOption.origin,
-    //     anchor: markerOption.anchor
-    //   },
-    //   gps: gps
-    // });
-    // marker.setMap(props.map);
-    const el = document.createElement('img');
-    el.id = id;
-    el.src = markerOption.url;
-    el.style.transform = `rotate(${gps.heading}deg)`;
-
-    const marker = new props.mapboxgl.Marker({
-      element: el,
-      rotation: gps.heading
-    })
-      .setLngLat(position)
-      .addTo(props.map);
-    marker.id = id;
-    marker.title = id;
-    marker.controlId = controlId;
-    marker.type = markerOption.type;
-    marker.gps = gps;
-    marker.position = position;
-    marker.icon = {
-      content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
-      origin: markerOption.origin,
-      anchor: markerOption.anchor
-    };
-
-    dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
-    // dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
-
-    /** drone 상세보기 */
-    marker.getElement().addEventListener('click', function (e) {
-      handlerDronClick(marker.controlId, marker.id);
-    });
-
-    if (markerOption.url) {
-      setArrMarkers(m => [...m, marker]);
-    }
-  };
-
-  const handlerDronClick = (controlId, idntfNum) => {
-    // get detail, history, flight-plan
-    dispatch(objectClickAction(controlId));
-    // dispatch(controlGpDtlAction.request(controlId));
-    // dispatch(controlGpFlightPlanAction.request(idntfNum));
-  };
-
-  //마커를 삭제 한다.
-  const removeMarkers = marker => {
-    // marker.setMap(null);
-    marker.remove();
-  };
-
-  const removeInfos = info => {
-    // info.setMap(null);
-    info.remove();
-  };
-
-  //마커에 위치를 이동한다.
-  const moveMarkers = (marker, position, gps) => {
-    const getIcon = marker.icon;
-
-    marker.setLngLat(position);
-    const warnList = controlGpArcrftWarnList?.filter(
-      i => i.cntrlId === gps.controlId
-    );
-
-    if (warnList?.length > 0) {
-      if (warnList[0].controlWarnCd) {
-        // marker.setIcon({
-        //   content: `<img ${getIcon.content.substr(
-        //     getIcon.content.indexOf('src'),
-        //     getIcon.content.indexOf('alt') - 6
-        //   )} alt="" style="transform: rotate(${
-        //     gps.heading
-        //   }deg); filter: invert(16%) sepia(79%) saturate(4975%) hue-rotate(359deg) brightness(104%) contrast(129%)" />`,
-        //   anchor: getIcon.anchor
-        // });
-      } else {
-        // console.log(marker);
-        // marker.setIcon({
-        //   content: `<img ${getIcon.content.substr(
-        //     getIcon.content.indexOf('src'),
-        //     getIcon.content.indexOf('alt') - 6
-        //   )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
-        //   anchor: getIcon.anchor
-        // });
-        marker.setRotation(gps.heading);
-      }
-      return;
-    }
-    marker.setRotation(gps.heading);
-    // marker.setIcon({
-    //   content: `<img ${getIcon.content.substr(
-    //     getIcon.content.indexOf('src'),
-    //     getIcon.content.indexOf('alt') - 6
-    //   )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
-    //   anchor: getIcon.anchor
-    // });
-  };
-
-  const moveInfos = (info, position, item, idx) => {
-    if (info) {
-      info.setLngLat([position.lng, position.lat]);
-      //   info.setPosition(position, info);
-      //   // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
-      //   // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
-      //   info._element.html(`
-      //     <div class="dblock-ti">
-      //       <span>${info?._id}</span>
-      //     </div>
-      //     <div class="dblock-txt">
-      //       <div class="dblock-txt-list">
-      //           <span>${item?.elev}M</span>
-      //           <span>${item?.speed}km</span>
-      //           ${
-      //             typeof item?.lat === 'number' && typeof item?.lng === 'number'
-      //               ? `
-      //               <span>
-      //                 ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
-      //               </span>`
-      //               : ''
-      //           }
-      //       </div>
-      //     </div>
-      // `);
-    }
-  };
-
-  //데이터가 없는 마커를 모두 삭제 한다.
-  const allRemoveMarkers = () => {
-    let isUnClick = false;
-    if (arrMarkers && controlGpList) {
-      arrMarkers.map(marker => {
-        const isExists = controlGpList.find(
-          item => item.objectId === marker.id
-        );
-
-        if (!isExists) {
-          removeMarkers(marker);
-          const arrData = arrMarkers.filter(item => item.id != marker.id);
-
-          const drone = count.drone.filter(d => d.gps.objectId != marker.id);
-          const flight = count.flight.filter(d => d.gps.objectId != marker.id);
-
-          setCount({
-            drone: drone,
-            flight: flight
-          });
-
-          removeArrMarkers(arrData);
-          if (marker.controlId === objectId) {
-            dispatch(objectUnClickAction());
-          }
-        }
-      });
-
-      arrInfos.map(info => {
-        const isExists = controlGpList.find(item => item.objectId === info._id);
-        if (!isExists) {
-          removeInfos(info);
-          const arrData = arrInfos.filter(item => item.id != info._id);
-          removeArrInfos(arrData);
-        }
-      });
-    }
-    return isUnClick;
-  };
-
-  //마커를 셋팅 한다.
-  const markerInit = () => {
-    if (controlGpList) {
-      allRemoveMarkers();
-      controlGpList.map((item, idx) => {
-        // let position = new naver.maps.LatLng(item.lat, item.lng);
-        let position = new props.mapboxgl.LngLat(item.lng, item.lat);
-
-        if (arrMarkers.length > 0) {
-          const isExists = arrMarkers.find(ele => ele.id === item.objectId);
-          const isInfos = arrInfos.find(info => info._id === item.objectId);
-          if (isExists) {
-            moveMarkers(isExists, position, item);
-            moveInfos(isInfos, position, item, idx);
-          } else {
-            addMarkers(position, item.objectId, item.controlId, item);
-          }
-        } else {
-          addMarkers(position, item.objectId, item.controlId, item);
-        }
-      });
-    }
-  };
-
-  //운항정보 창 셋팅
-  const infoInit = (marker, gps, idx) => {
-    CustomOverlay = function (options) {
-      this._element = $(`
-      <div class="dblock-box">
-        <div class="dblock-ti">
-          <span>${marker?.id}</span>
-        </div>
-        <div class="dblock-txt">
-          <div class="dblock-txt-list">
-              <span>${gps?.elev}M</span>
-              <span>${gps?.speed}km</span>
-              ${
-                typeof gps?.lat === 'number' && typeof gps?.lng === 'number'
-                  ? `
-                  <span>
-                    ${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)}
-                  </span>`
-                  : ''
-              }
-          </div>
-        </div>
-      </div>
-        `);
-
-      // this._element = $(`
-      //     <div class="tooltip-box" style="width: 150px;">
-      //     <div class="tooltip-ti">
-      //     <span>${marker?.id}</span>
-      //     </div>
-      //     <div class="tooltip-txt>
-      //       <div class="tooltip-txt-list">
-      //         <div>
-      //           <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
-      //         </div>
-      //         <div>
-      //           <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
-      //         </div>
-      //         <div>
-      //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
-      //         </div>
-      //       </div>
-      //     </div>
-      //   </div>
-      // `)
-
-      this.setPosition(options.position, idx);
-      this.setMap(options.map || null);
-      this.setId(options.id);
-      this.setIdx(idx);
-      this.setControlId(options.controlId);
-    };
-
-    CustomOverlay.prototype = new naver.maps.OverlayView();
-    CustomOverlay.prototype.constructor = CustomOverlay;
-
-    //메소드 재정의
-    //필수
-    CustomOverlay.prototype.onAdd = function () {
-      let overlayLayer = this.getPanes().overlayLayer;
-
-      this._element.appendTo(overlayLayer);
-    };
-
-    CustomOverlay.prototype.draw = function (idx) {
-      if (!this.getMap()) {
-        return;
-      }
-
-      let projection = this.getProjection(),
-        position = this.getPosition(),
-        pixelPosition = projection.fromCoordToOffset(position);
-
-      // let cnt = 0;
-      // let index = idx?._idx;
-      // cnt = index * 98;
-      this._element.css('left', pixelPosition.x);
-      this._element.css('top', pixelPosition.y);
-      // this._element.css('top', pixelPosition.y + -cnt)
-    };
-
-    CustomOverlay.prototype.onRemove = function () {
-      let overlayLayer = this.getPanes().overlayLayer;
-
-      this._element.remove();
-      this._element.off();
-    };
-
-    //속성
-    CustomOverlay.prototype.setPosition = function (position, idx) {
-      this._position = position;
-      this.draw(idx);
-    };
-
-    CustomOverlay.prototype.getPosition = function () {
-      return this._position;
-    };
-
-    CustomOverlay.prototype.setId = function (id) {
-      this._id = id;
-    };
-
-    CustomOverlay.prototype.getId = function () {
-      return this._id;
-    };
-
-    CustomOverlay.prototype.setIdx = function (idx) {
-      this._idx = idx;
-    };
-
-    CustomOverlay.prototype.getIdx = function () {
-      return this._idx;
-    };
-
-    CustomOverlay.prototype.setControlId = function (controlId) {
-      this._controlId = controlId;
-    };
-
-    CustomOverlay.prototype.getControlId = function () {
-      return this._controlId;
-    };
-  };
-
-  const removeArrMarkers = arrData => {
-    setArrMarkers(arrData);
-  };
-
-  const removeArrInfos = arrData => {
-    setArrInfos(arrData);
-  };
-
-  const markerInfo = arrMarkers => {
-    arrMarkers.forEach((marker, idx) => {
-      if (arrInfos.filter(i => i._controlId === marker.controlId).length > 0) {
-        return;
-      }
-
-      const info = new props.mapboxgl.Popup({
-        closeButton: false,
-        closeOnClick: false
-      })
-        .setLngLat([marker.position.lng, marker.position.lat])
-        .setHTML(
-          `
-        <div class="dblock-box">
-          <div class="dblock-ti">
-            <span>${marker?.id}</span>
-          </div>
-          <div class="dblock-txt">
-            <div class="dblock-txt-list">
-                <span>${marker.gps?.elev}M</span>
-                <span>${marker.gps?.speed}km</span>
-                ${
-                  typeof marker.gps?.lat === 'number' &&
-                  typeof marker.gps?.lng === 'number'
-                    ? `
-                    <span>
-                      ${(marker.gps?.lat).toFixed(
-                        6
-                      )} ${(marker.gps?.lng).toFixed(6)}
-                    </span>`
-                    : ''
-                }
-            </div>
-          </div>
-        </div>
-          `
-        )
-        .addTo(props.map);
-      // infoInit(marker, controlGpList[idx], idx);
-      info._id = marker.id;
-      info.gps = marker.gps;
-      // if (controlGpList.length != 0) {
-      //   const info = new CustomOverlay({
-      //     position: new naver.maps.LatLng(
-      //       controlGpList[idx]?.lat,
-      //       controlGpList[idx]?.lng
-      //     ),
-      //     // map: map,
-      //     id: marker.id,
-      //     idx: idx,
-      //     controlId: marker.controlId
-      //   });
-      //   info.setMap(map);
-
-      setArrInfos(m => [...m, info]);
-      // }
-    });
-  };
-
-  return null;
-};
+// import $ from 'jquery';
+// import { useEffect, useState } from 'react';
+// import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+// import '../../../../assets/css/custom.css';
+// import FlightIcon from '../../../../assets/images/airplan_org.svg';
+// import FlightDetailIcon from '../../../../assets/images/airplan_pp.svg';
+// import DronIcon from '../../../../assets/images/drone-marker-icon.png';
+// import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png';
+// import DronUamIcon from '../../../../assets/images/uam_icon.png';
+// import DronUamDetailIcon from '../../../../assets/images/uam_icon_purple.png';
+// import {
+//   controlGpDtlAction,
+//   controlGpFlightPlanAction,
+//   controlGpCountAction
+// } from '../../../../modules/control/gp';
+// import {
+//   objectClickAction,
+//   objectUnClickAction
+// } from '../../../../modules/control/map/actions/controlMapActions';
+// import { JOIN_LIST } from '../../../../modules/basis/group/actions/basisGroupAction';
+
+// export const DronMarker = props => {
+//   const dispatch = useDispatch();
+
+//   const { controlGpList, controlGroupAuthInfo } = useSelector(
+//     state => state.controlGpState
+//   );
+//   const { objectId, isClickObject } = useSelector(
+//     state => state.controlMapReducer,
+//     shallowEqual
+//   );
+//   // const { controlGroupAuthInfo } = useSelector(
+//   //   state => state.controlGroupAuthState
+//   // );
+//   const { controlGpArcrftWarnList } = useSelector(
+//     state => state.controlGpLogState
+//   );
+
+//   const { user } = useSelector(state => state.authState);
+//   const { joinList } = useSelector(state => state.groupState);
+
+//   const [arrMarkers, setArrMarkers] = useState([]);
+//   const [arrInfos, setArrInfos] = useState([]);
+
+//   const [count, setCount] = useState({
+//     drone: [],
+//     flight: []
+//   });
+
+//   let mapboxgl = props.mapboxgl;
+//   let map = props.map;
+//   let CustomOverlay;
+//   let infoWindow;
+//   // const infowindowOpen = data => {
+//   //   const content = `
+//   //       <div class="dblock-box">
+//   //         <div class="dblock-ti">
+//   //           <span>${data?.id}</span>
+//   //         </div>
+//   //         <div class="dblock-txt>
+//   //           <div class="dblock-txt-list">
+//   //             <div>
+//   //               <span style="width: 250px; display: inline-block;">${
+//   //                 data?.speed
+//   //               }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
+//   //     data?.heading
+//   //   }</span>
+//   //               <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
+//   //                 6
+//   //               )} | ${(data?.coord._lng).toFixed(6)}</span>
+//   //             </div>
+//   //           </div>
+//   //         </div>
+//   //       </div>
+//   //     `;
+
+//   //   infoWindow = new naver.maps.InfoWindow({
+//   //     class: 'tooltip-dblock',
+//   //     content: content,
+//   //     maxWidth: 160,
+//   //     backgroundColor: '#283046', //박스안쪽영역 컬러
+//   //     // borderColor: '#333', //테두리컬러
+//   //     // borderWidth: 3, //테두리 굵기
+//   //     // anchorSize: new naver.maps.Size(30, -10),
+//   //     anchorSkew: false,
+//   //     anchorColor: '#283046',
+
+//   //     pixelOffset: new naver.maps.Point(20, -20)
+//   //   });
+
+//   //   infoWindow.open(props.map, data.coord);
+//   // };
+
+//   // useLayoutEffect(() => {
+//   //   dispatch(controlGroupAuthAction.request());
+//   // }, [controlGpList]);
+
+//   useEffect(() => {
+//     if (count.drone.length > 0 || count.flight.length > 0) {
+//       dispatch(
+//         controlGpCountAction.request({
+//           count
+//         })
+//       );
+//     } else {
+//       const count = {
+//         drone: [],
+//         flight: []
+//       };
+//       dispatch(
+//         controlGpCountAction.request({
+//           count
+//         })
+//       );
+//     }
+//   }, [count]);
+
+//   useEffect(() => {
+//     dispatch(
+//       JOIN_LIST.request({
+//         cstmrSno: user?.cstmrSno
+//       })
+//     );
+//   }, []);
+
+//   useEffect(() => {
+//     if (arrMarkers.length != 0) {
+//       markerInfo(arrMarkers);
+//     }
+//   }, [arrMarkers]);
+
+//   useEffect(() => {
+//     markerInit();
+//   }, [controlGpList]);
+
+//   //   useEffect(() => {
+//   //     let imageUrl;
+//   //     arrMarkers.map(clickMarker => {
+//   //       if (objectId === clickMarker.controlId && isClickObject) {
+//   //         // console.log(clickMarker.gps.objectId, '><><');
+//   //         imageUrl =
+//   //           // clickMarker.type === 'DRONE' ? DronUamDetailIcon : FlightDetailIcon;
+//   //           clickMarker.type === 'DRONE'
+//   //             ? clickMarker.gps.objectId.includes('UAM')
+//   //               ? DronUamDetailIcon
+//   //               : DronDetailIcon
+//   //             : FlightDetailIcon;
+//   //         clickMarker.setIcon({
+//   //           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
+//   //           origin: new naver.maps.Point(0, 0),
+//   //           anchor: new naver.maps.Point(15, 15)
+//   //         });
+//   //       } else {
+//   //         // imageUrl = clickMarker.type === 'DRONE' ? DronUamIcon : FlightIcon;
+//   //         imageUrl =
+//   //           clickMarker.type === 'DRONE'
+//   //             ? clickMarker.gps.objectId.includes('UAM')
+//   //               ? DronUamIcon
+//   //               : DronIcon
+//   //             : FlightIcon;
+//   //         clickMarker.setIcon({
+//   //           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
+//   //           origin: new naver.maps.Point(0, 0),
+//   //           anchor: new naver.maps.Point(15, 15)
+//   //         });
+//   //       }
+//   //     });
+//   //   }, [objectId, isClickObject]);
+
+//   // useEffect(() => {
+//   //   arrMarkers.map(clickMarker => {
+//   //     if (objectId === clickMarker.controlId) {
+//   //       dispatch(controlGpDtlAction.request(objectId));
+//   //       props.map.setCenter(clickMarker.getPosition());
+//   //       props.map.setZoom(13, true);
+//   //     }
+//   //   });
+//   // }, [objectId]);
+
+//   //마커를 그린다.
+//   const addMarkers = (position, id, controlId, gps) => {
+//     const gpsCnt = {
+//       gps: gps,
+//       type: ''
+//     };
+
+//     const markerOption = {};
+
+//     if (id.substring(0, 2) === 'PA') {
+//       const pal = controlGroupAuthInfo?.find(
+//         prev => prev.idntfNum === gps.objectId
+//       );
+//       if (pal || !pal || id.includes('NAMWON')) {
+//         if (id.includes('UAM')) {
+//           markerOption.url = DronUamIcon;
+//         } else {
+//           markerOption.url = DronIcon;
+//         }
+
+//         markerOption.type = 'DRONE';
+//         gpsCnt.type = 'drone';
+//       } else {
+//         if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
+//           markerOption.url = FlightIcon;
+//           markerOption.type = 'FLIGHT';
+//           gpsCnt.type = 'flight';
+//         } else {
+//           const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
+//           if (
+//             terminal?.groupAuthCd === 'MASTER' ||
+//             terminal?.groupAuthCd === 'LEADER'
+//           ) {
+//             markerOption.url = FlightIcon;
+//             markerOption.type = 'FLIGHT';
+//             gpsCnt.type = 'flight';
+//           }
+//         }
+//       }
+//     } else {
+//       if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
+//         markerOption.url = FlightIcon;
+//         markerOption.type = 'FLIGHT';
+//         gpsCnt.type = 'flight';
+//       } else {
+//         const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
+//         if (
+//           terminal?.groupAuthCd === 'MASTER' ||
+//           terminal?.groupAuthCd === 'LEADER'
+//         ) {
+//           markerOption.url = FlightIcon;
+//           markerOption.type = 'FLIGHT';
+//           gpsCnt.type = 'flight';
+//         }
+//       }
+//     }
+
+//     if (gpsCnt.type === 'drone') {
+//       setCount(prev => ({
+//         ...prev,
+//         drone: [...prev.drone, gpsCnt]
+//       }));
+//     } else if (gpsCnt.type === 'flight') {
+//       setCount(prev => ({
+//         ...prev,
+//         flight: [...prev.flight, gpsCnt]
+//       }));
+//     }
+
+//     // if (id.substring(0, 2) === 'PA') {
+//     //   const pal = controlGroupAuthInfo?.find(
+//     //     prev => prev.idntfNum === gps.objectId
+//     //   );
+//     //   markerOption.url = pal ? DronIcon : FlightIcon;
+//     //   markerOption.type = pal ? 'DRONE' : 'FLIGHT';
+//     // } else {
+//     //   markerOption.url = FlightIcon;
+//     //   markerOption.type = 'FLIGHT';
+//     // }
+
+//     // markerOption.origin = new naver.maps.Point(0, 0);
+//     // markerOption.anchor = new naver.maps.Point(15, 15);
+
+//     // const marker = new naver.maps.Marker({
+//     //   position: position,
+//     //   title: id,
+//     //   id: id,
+//     //   controlId: controlId,
+//     //   type: markerOption.type,
+//     //   icon: {
+//     //     content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
+//     //     origin: markerOption.origin,
+//     //     anchor: markerOption.anchor
+//     //   },
+//     //   gps: gps
+//     // });
+//     // marker.setMap(props.map);
+//     const el = document.createElement('img');
+//     el.id = id;
+//     el.src = markerOption.url;
+//     el.style.transform = `rotate(${gps.heading}deg)`;
+
+//     const marker = new props.mapboxgl.Marker({
+//       element: el,
+//       rotation: gps.heading
+//     })
+//       .setLngLat(position)
+//       .addTo(props.map);
+//     marker.id = id;
+//     marker.title = id;
+//     marker.controlId = controlId;
+//     marker.type = markerOption.type;
+//     marker.gps = gps;
+//     marker.position = position;
+//     marker.icon = {
+//       content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
+//       origin: markerOption.origin,
+//       anchor: markerOption.anchor
+//     };
+
+//     dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
+//     // dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
+
+//     /** drone 상세보기 */
+//     marker.getElement().addEventListener('click', function (e) {
+//       handlerDronClick(marker.controlId, marker.id);
+//     });
+
+//     if (markerOption.url) {
+//       setArrMarkers(m => [...m, marker]);
+//     }
+//   };
+
+//   const handlerDronClick = (controlId, idntfNum) => {
+//     // get detail, history, flight-plan
+//     dispatch(objectClickAction(controlId));
+//     // dispatch(controlGpDtlAction.request(controlId));
+//     // dispatch(controlGpFlightPlanAction.request(idntfNum));
+//   };
+
+//   //마커를 삭제 한다.
+//   const removeMarkers = marker => {
+//     // marker.setMap(null);
+//     marker.remove();
+//   };
+
+//   const removeInfos = info => {
+//     // info.setMap(null);
+//     info.remove();
+//   };
+
+//   //마커에 위치를 이동한다.
+//   const moveMarkers = (marker, position, gps) => {
+//     const getIcon = marker.icon;
+
+//     marker.setLngLat(position);
+//     const warnList = controlGpArcrftWarnList?.filter(
+//       i => i.cntrlId === gps.controlId
+//     );
+
+//     if (warnList?.length > 0) {
+//       if (warnList[0].controlWarnCd) {
+//         // marker.setIcon({
+//         //   content: `<img ${getIcon.content.substr(
+//         //     getIcon.content.indexOf('src'),
+//         //     getIcon.content.indexOf('alt') - 6
+//         //   )} alt="" style="transform: rotate(${
+//         //     gps.heading
+//         //   }deg); filter: invert(16%) sepia(79%) saturate(4975%) hue-rotate(359deg) brightness(104%) contrast(129%)" />`,
+//         //   anchor: getIcon.anchor
+//         // });
+//       } else {
+//         // console.log(marker);
+//         // marker.setIcon({
+//         //   content: `<img ${getIcon.content.substr(
+//         //     getIcon.content.indexOf('src'),
+//         //     getIcon.content.indexOf('alt') - 6
+//         //   )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
+//         //   anchor: getIcon.anchor
+//         // });
+//         marker.setRotation(gps.heading);
+//       }
+//       return;
+//     }
+//     marker.setRotation(gps.heading);
+//     // marker.setIcon({
+//     //   content: `<img ${getIcon.content.substr(
+//     //     getIcon.content.indexOf('src'),
+//     //     getIcon.content.indexOf('alt') - 6
+//     //   )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
+//     //   anchor: getIcon.anchor
+//     // });
+//   };
+
+//   const moveInfos = (info, position, item, idx) => {
+//     if (info) {
+//       info.setLngLat([position.lng, position.lat]);
+//       //   info.setPosition(position, info);
+//       //   // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
+//       //   // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
+//       //   info._element.html(`
+//       //     <div class="dblock-ti">
+//       //       <span>${info?._id}</span>
+//       //     </div>
+//       //     <div class="dblock-txt">
+//       //       <div class="dblock-txt-list">
+//       //           <span>${item?.elev}M</span>
+//       //           <span>${item?.speed}km</span>
+//       //           ${
+//       //             typeof item?.lat === 'number' && typeof item?.lng === 'number'
+//       //               ? `
+//       //               <span>
+//       //                 ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
+//       //               </span>`
+//       //               : ''
+//       //           }
+//       //       </div>
+//       //     </div>
+//       // `);
+//     }
+//   };
+
+//   //데이터가 없는 마커를 모두 삭제 한다.
+//   const allRemoveMarkers = () => {
+//     let isUnClick = false;
+//     if (arrMarkers && controlGpList) {
+//       arrMarkers.map(marker => {
+//         const isExists = controlGpList.find(
+//           item => item.objectId === marker.id
+//         );
+
+//         if (!isExists) {
+//           removeMarkers(marker);
+//           const arrData = arrMarkers.filter(item => item.id != marker.id);
+
+//           const drone = count.drone.filter(d => d.gps.objectId != marker.id);
+//           const flight = count.flight.filter(d => d.gps.objectId != marker.id);
+
+//           setCount({
+//             drone: drone,
+//             flight: flight
+//           });
+
+//           removeArrMarkers(arrData);
+//           if (marker.controlId === objectId) {
+//             dispatch(objectUnClickAction());
+//           }
+//         }
+//       });
+
+//       arrInfos.map(info => {
+//         const isExists = controlGpList.find(item => item.objectId === info._id);
+//         if (!isExists) {
+//           removeInfos(info);
+//           const arrData = arrInfos.filter(item => item.id != info._id);
+//           removeArrInfos(arrData);
+//         }
+//       });
+//     }
+//     return isUnClick;
+//   };
+
+//   //마커를 셋팅 한다.
+//   const markerInit = () => {
+//     if (controlGpList) {
+//       allRemoveMarkers();
+//       controlGpList.map((item, idx) => {
+//         // let position = new naver.maps.LatLng(item.lat, item.lng);
+//         let position = new props.mapboxgl.LngLat(item.lng, item.lat);
+
+//         if (arrMarkers.length > 0) {
+//           const isExists = arrMarkers.find(ele => ele.id === item.objectId);
+//           const isInfos = arrInfos.find(info => info._id === item.objectId);
+//           if (isExists) {
+//             moveMarkers(isExists, position, item);
+//             moveInfos(isInfos, position, item, idx);
+//           } else {
+//             addMarkers(position, item.objectId, item.controlId, item);
+//           }
+//         } else {
+//           addMarkers(position, item.objectId, item.controlId, item);
+//         }
+//       });
+//     }
+//   };
+
+//   //운항정보 창 셋팅
+//   const infoInit = (marker, gps, idx) => {
+//     CustomOverlay = function (options) {
+//       this._element = $(`
+//       <div class="dblock-box">
+//         <div class="dblock-ti">
+//           <span>${marker?.id}</span>
+//         </div>
+//         <div class="dblock-txt">
+//           <div class="dblock-txt-list">
+//               <span>${gps?.elev}M</span>
+//               <span>${gps?.speed}km</span>
+//               ${
+//                 typeof gps?.lat === 'number' && typeof gps?.lng === 'number'
+//                   ? `
+//                   <span>
+//                     ${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)}
+//                   </span>`
+//                   : ''
+//               }
+//           </div>
+//         </div>
+//       </div>
+//         `);
+
+//       // this._element = $(`
+//       //     <div class="tooltip-box" style="width: 150px;">
+//       //     <div class="tooltip-ti">
+//       //     <span>${marker?.id}</span>
+//       //     </div>
+//       //     <div class="tooltip-txt>
+//       //       <div class="tooltip-txt-list">
+//       //         <div>
+//       //           <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
+//       //         </div>
+//       //         <div>
+//       //           <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
+//       //         </div>
+//       //         <div>
+//       //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
+//       //         </div>
+//       //       </div>
+//       //     </div>
+//       //   </div>
+//       // `)
+
+//       this.setPosition(options.position, idx);
+//       this.setMap(options.map || null);
+//       this.setId(options.id);
+//       this.setIdx(idx);
+//       this.setControlId(options.controlId);
+//     };
+
+//     CustomOverlay.prototype = new naver.maps.OverlayView();
+//     CustomOverlay.prototype.constructor = CustomOverlay;
+
+//     //메소드 재정의
+//     //필수
+//     CustomOverlay.prototype.onAdd = function () {
+//       let overlayLayer = this.getPanes().overlayLayer;
+
+//       this._element.appendTo(overlayLayer);
+//     };
+
+//     CustomOverlay.prototype.draw = function (idx) {
+//       if (!this.getMap()) {
+//         return;
+//       }
+
+//       let projection = this.getProjection(),
+//         position = this.getPosition(),
+//         pixelPosition = projection.fromCoordToOffset(position);
+
+//       // let cnt = 0;
+//       // let index = idx?._idx;
+//       // cnt = index * 98;
+//       this._element.css('left', pixelPosition.x);
+//       this._element.css('top', pixelPosition.y);
+//       // this._element.css('top', pixelPosition.y + -cnt)
+//     };
+
+//     CustomOverlay.prototype.onRemove = function () {
+//       let overlayLayer = this.getPanes().overlayLayer;
+
+//       this._element.remove();
+//       this._element.off();
+//     };
+
+//     //속성
+//     CustomOverlay.prototype.setPosition = function (position, idx) {
+//       this._position = position;
+//       this.draw(idx);
+//     };
+
+//     CustomOverlay.prototype.getPosition = function () {
+//       return this._position;
+//     };
+
+//     CustomOverlay.prototype.setId = function (id) {
+//       this._id = id;
+//     };
+
+//     CustomOverlay.prototype.getId = function () {
+//       return this._id;
+//     };
+
+//     CustomOverlay.prototype.setIdx = function (idx) {
+//       this._idx = idx;
+//     };
+
+//     CustomOverlay.prototype.getIdx = function () {
+//       return this._idx;
+//     };
+
+//     CustomOverlay.prototype.setControlId = function (controlId) {
+//       this._controlId = controlId;
+//     };
+
+//     CustomOverlay.prototype.getControlId = function () {
+//       return this._controlId;
+//     };
+//   };
+
+//   const removeArrMarkers = arrData => {
+//     setArrMarkers(arrData);
+//   };
+
+//   const removeArrInfos = arrData => {
+//     setArrInfos(arrData);
+//   };
+
+//   const markerInfo = arrMarkers => {
+//     arrMarkers.forEach((marker, idx) => {
+//       if (arrInfos.filter(i => i._controlId === marker.controlId).length > 0) {
+//         return;
+//       }
+
+//       const info = new props.mapboxgl.Popup({
+//         closeButton: false,
+//         closeOnClick: false
+//       })
+//         .setLngLat([marker.position.lng, marker.position.lat])
+//         .setHTML(
+//           `
+//         <div class="dblock-box">
+//           <div class="dblock-ti">
+//             <span>${marker?.id}</span>
+//           </div>
+//           <div class="dblock-txt">
+//             <div class="dblock-txt-list">
+//                 <span>${marker.gps?.elev}M</span>
+//                 <span>${marker.gps?.speed}km</span>
+//                 ${
+//                   typeof marker.gps?.lat === 'number' &&
+//                   typeof marker.gps?.lng === 'number'
+//                     ? `
+//                     <span>
+//                       ${(marker.gps?.lat).toFixed(
+//                         6
+//                       )} ${(marker.gps?.lng).toFixed(6)}
+//                     </span>`
+//                     : ''
+//                 }
+//             </div>
+//           </div>
+//         </div>
+//           `
+//         )
+//         .addTo(props.map);
+//       // infoInit(marker, controlGpList[idx], idx);
+//       info._id = marker.id;
+//       info.gps = marker.gps;
+//       // if (controlGpList.length != 0) {
+//       //   const info = new CustomOverlay({
+//       //     position: new naver.maps.LatLng(
+//       //       controlGpList[idx]?.lat,
+//       //       controlGpList[idx]?.lng
+//       //     ),
+//       //     // map: map,
+//       //     id: marker.id,
+//       //     idx: idx,
+//       //     controlId: marker.controlId
+//       //   });
+//       //   info.setMap(map);
+
+//       setArrInfos(m => [...m, info]);
+//       // }
+//     });
+//   };
+
+//   return null;
+// };
diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js
index f434389..b41d94f 100644
--- a/src/components/map/mapbox/feature/FeatureAirZone.js
+++ b/src/components/map/mapbox/feature/FeatureAirZone.js
@@ -1,392 +1,392 @@
-import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import * as turf from '@turf/turf';
-import geoJson from '../../../../components/map/geojson/airArea.json';
-import gimPo from '../../../../components/map/geojson/airportAirArea.json';
-import '../../../../assets/css/custom.css';
-
-// 격자 공역 Source
-const airPort = [
-  {
-    title: '김포공항',
-    buffer: 9300,
-    center: [126.793722, 37.558522],
-    reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
-  },
-  {
-    title: '인천공항',
-    buffer: 9300,
-    center: [126.4409428, 37.4588105],
-    reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
-  },
-  {
-    title: '제주공항',
-    buffer: 9300,
-    center: [126.4930205, 33.506848],
-    reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
-  },
-  {
-    title: '정석비행장',
-    buffer: 9300,
-    center: [126.7142598, 33.3943517],
-    reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
-  }
-];
-
-export const FeatureAirZone = props => {
-  const mapControl = useSelector(state => state.controlMapReducer);
-  let popup;
-  let infoWindow;
-
-  useEffect(() => {
-    featureAirZoneInit();
-  }, [mapControl]);
-
-  const infowindowOpen = data => {
-    const content =
-      '<div class="tooltip-box">' +
-      '<div class="tooltip-ti">' +
-      '<span>' +
-      data.title +
-      '</span>' +
-      '</div>' +
-      '<div class="tooltip-txt">' +
-      '<div class="tooltip-txt-list">' +
-      '<span>' +
-      data.description +
-      '</span>' +
-      '</div>' +
-      '</div>' +
-      '</div>';
-
-    if (popup) {
-      popup.remove();
-    }
-
-    // Create a popup element
-    popup = new props.mapboxgl.Popup({
-      offset: [20, -20],
-      closeButton: false,
-      closeOnClick: false,
-      closeOnMove: true
-    })
-      .setLngLat(data.coord)
-      .setHTML(content)
-      .addTo(props.map);
-  };
-
-  const featureAirEvent = markers => {
-    markers.forEach(marker => {
-      marker.getElement().addEventListener('mouseover', e => {
-        const data = {};
-        data.coord = marker.getLngLat();
-        data.title = marker.properties.name;
-        data.description = marker.properties.description;
-
-        infowindowOpen(data);
-      });
-      marker.getElement().addEventListener('mouseout', () => {
-        if (popup) {
-          popup.remove();
-        }
-      });
-    });
-
-    props.map.on('mouseover', 'maine', e => {
-      props.map.getCanvas().style.cursor = 'pointer';
-      const feature = e.features[0];
-      const data = feature.properties;
-      data.coord = e.lngLat;
-      data.title = feature.properties.name;
-
-      infowindowOpen(data);
-    });
-
-    props.map.on('mouseout', 'maine', () => {
-      props.map.getCanvas().style.cursor = '';
-      if (popup) {
-        popup.remove();
-      }
-    });
-
-    props.map.on('click', e => {
-      // 클릭한 지점의 피처들을 얻어옵니다.
-      const features = props.map.queryRenderedFeatures(e.point, {
-        layers: ['add-3d-buildings'] // 빌딩 레이어의 ID를 지정합니다.
-      });
-
-      // 빌딩 피처가 있는 경우
-      if (features.length > 0) {
-        // 첫 번째 빌딩 피처의 높이 값을 얻어옵니다.
-        const height = features[0].properties.height;
-
-        // 팝업을 생성하고 지도에 추가합니다.
-        new props.mapboxgl.Popup()
-          .setLngLat(e.lngLat)
-          .setHTML(`Building height: ${height}m`)
-          .addTo(props.map);
-      }
-    });
-  };
-
-  // 공역 생성 함수
-  const featureAirZoneInit = () => {
-    let arrGeoJson = [];
-
-    const useGeoJson = {
-      ...geoJson,
-      features: [...geoJson.features, ...gimPo.features]
-    };
-
-    // props.map.data.removeGeoJson(useGeoJson);
-    if (props.map.getLayer('maine')) {
-      props.map.removeLayer('maine');
-      props.map.removeSource('maine');
-    }
-
-    // 공역 색상 및 공역 표출 정보에 따른 노출
-    useGeoJson.features.map(item => {
-      if (item.properties.type === '0001' && mapControl.area0001) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#FF3648' }
-        });
-      } else if (item.properties.type === '0002' && mapControl.area0002) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#FFA1AA' }
-        });
-      } else if (item.properties.type === '0003' && mapControl.area0003) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#FFA800' }
-        });
-      } else if (item.properties.type === '0004' && mapControl.area0004) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#A16B00' }
-        });
-      } else if (item.properties.type === '0005' && mapControl.area0005) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#AB40FF' }
-        });
-      } else if (item.properties.type === '0006' && mapControl.area0006) {
-        arrGeoJson.push({
-          ...item,
-          properties: { ...item.properties, color: '#009cad' }
-        });
-      }
-    });
-    useGeoJson.features = arrGeoJson;
-
-    // 공역 생성 start
-    props.map.addSource('maine', {
-      type: 'geojson',
-      data: {
-        ...useGeoJson
-      }
-    });
-    props.map.addLayer({
-      id: 'maine',
-      type: 'fill',
-      source: 'maine',
-      layout: {},
-      paint: {
-        'fill-color': ['get', 'color'],
-        'fill-opacity': 0.5
-      }
-    });
-    // 공역 생성 end
-
-    // 비행장 마커 생성
-    const markers = useGeoJson.features
-      .filter(i => i.geometry.type === 'Point')
-      .map(i => {
-        const marker = new props.mapboxgl.Marker()
-          .setLngLat(i.geometry.coordinates)
-          .addTo(props.map);
-        marker.properties = i.properties;
-        return marker;
-      });
-
-    // 격자 공역 생성
-    airPort.map(air => polyArea(air));
-    // 마우스 오버 이벤트 생성
-    featureAirEvent(markers);
-  };
-
-  // 격자 공역 셋팅 함수
-  const polyArea = air => {
-    const polyArr = [];
-    const radius = air.buffer;
-    const position = air.center;
-    const color = '#000';
-    const opacity = 0.7;
-
-    let angle = 0;
-    let layerId = 1;
-    for (let i = 0; i < 4; i++) {
-      angle += 90;
-      let buffer = 0;
-      for (let j = 0; j < 9; j++) {
-        buffer += 1000;
-
-        const coord = turf.destination(
-          turf.point([position[0], position[1]]),
-          buffer / 1000,
-          angle,
-          { units: 'kilometers' }
-        ).geometry.coordinates;
-
-        let reduce = 0;
-        reduce = air.reduce[j];
-
-        if (angle % 180 === 0) {
-          const polyEW = {
-            id: layerId++,
-            type: 'Feature',
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                turf.destination(
-                  turf.point([coord[0], coord[1]]),
-                  (radius - reduce) / 1000,
-                  90,
-                  { units: 'kilometers' }
-                ).geometry.coordinates,
-                turf.destination(
-                  turf.point([coord[0], coord[1]]),
-                  (radius - reduce) / 1000,
-                  270,
-                  { units: 'kilometers' }
-                ).geometry.coordinates
-              ]
-            },
-            properties: {
-              stroke: color,
-              'stroke-width': 0.8,
-              'stroke-opacity': opacity
-            }
-          };
-          polyArr.push(polyEW);
-        } else {
-          const polyNS = {
-            id: layerId++,
-            type: 'Feature',
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                turf.destination(
-                  turf.point([coord[0], coord[1]]),
-                  (radius - reduce) / 1000,
-                  0,
-                  { units: 'kilometers' }
-                ).geometry.coordinates,
-                turf.destination(
-                  turf.point([coord[0], coord[1]]),
-                  (radius - reduce) / 1000,
-                  180,
-                  { units: 'kilometers' }
-                ).geometry.coordinates
-              ]
-            },
-            properties: {
-              stroke: color,
-              'stroke-width': 0.8,
-              'stroke-opacity': opacity
-            }
-          };
-          polyArr.push(polyNS);
-        }
-      }
-    }
-
-    const NS = {
-      id: layerId++,
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: [
-          turf.destination(
-            turf.point([position[0], position[1]]),
-            radius / 1000,
-            0,
-            { units: 'kilometers' }
-          ).geometry.coordinates,
-          turf.destination(
-            turf.point([position[0], position[1]]),
-            radius / 1000,
-            180,
-            { units: 'kilometers' }
-          ).geometry.coordinates
-        ]
-      },
-      properties: {
-        stroke: color,
-        'stroke-width': 0.8,
-        'stroke-opacity': opacity
-      }
-    };
-    polyArr.push(NS);
-
-    const EW = {
-      id: layerId++,
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: [
-          turf.destination(
-            turf.point([position[0], position[1]]),
-            radius / 1000,
-            90,
-            { units: 'kilometers' }
-          ).geometry.coordinates,
-          turf.destination(
-            turf.point([position[0], position[1]]),
-            radius / 1000,
-            270,
-            { units: 'kilometers' }
-          ).geometry.coordinates
-        ]
-      },
-      properties: {
-        stroke: color,
-        'stroke-width': 0.8,
-        'stroke-opacity': opacity
-      }
-    };
-
-    polyArr.push(EW);
-    if (props.map.getLayer(air.title)) {
-      props.map.removeLayer(air.title);
-      props.map.removeSource(air.title);
-    }
-    props.map.addSource(air.title, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: polyArr
-      }
-    });
-
-    props.map.addLayer({
-      id: air.title,
-      type: 'line',
-      source: air.title,
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round'
-      },
-      paint: {
-        'line-color': color,
-        'line-width': 0.8,
-        'line-opacity': opacity
-      }
-    });
-
-    // Grid area
-  };
-
-  return null;
-};
+// import { useEffect, useState } from 'react';
+// import { useSelector } from 'react-redux';
+// import * as turf from '@turf/turf';
+// import geoJson from '../../../../components/map/geojson/airArea.json';
+// import gimPo from '../../../../components/map/geojson/airportAirArea.json';
+// import '../../../../assets/css/custom.css';
+
+// // 격자 공역 Source
+// const airPort = [
+//   {
+//     title: '김포공항',
+//     buffer: 9300,
+//     center: [126.793722, 37.558522],
+//     reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
+//   },
+//   {
+//     title: '인천공항',
+//     buffer: 9300,
+//     center: [126.4409428, 37.4588105],
+//     reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
+//   },
+//   {
+//     title: '제주공항',
+//     buffer: 9300,
+//     center: [126.4930205, 33.506848],
+//     reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
+//   },
+//   {
+//     title: '정석비행장',
+//     buffer: 9300,
+//     center: [126.7142598, 33.3943517],
+//     reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
+//   }
+// ];
+
+// export const FeatureAirZone = props => {
+//   const mapControl = useSelector(state => state.controlMapReducer);
+//   let popup;
+//   let infoWindow;
+
+//   useEffect(() => {
+//     featureAirZoneInit();
+//   }, [mapControl]);
+
+//   const infowindowOpen = data => {
+//     const content =
+//       '<div class="tooltip-box">' +
+//       '<div class="tooltip-ti">' +
+//       '<span>' +
+//       data.title +
+//       '</span>' +
+//       '</div>' +
+//       '<div class="tooltip-txt">' +
+//       '<div class="tooltip-txt-list">' +
+//       '<span>' +
+//       data.description +
+//       '</span>' +
+//       '</div>' +
+//       '</div>' +
+//       '</div>';
+
+//     if (popup) {
+//       popup.remove();
+//     }
+
+//     // Create a popup element
+//     popup = new props.mapboxgl.Popup({
+//       offset: [20, -20],
+//       closeButton: false,
+//       closeOnClick: false,
+//       closeOnMove: true
+//     })
+//       .setLngLat(data.coord)
+//       .setHTML(content)
+//       .addTo(props.map);
+//   };
+
+//   const featureAirEvent = markers => {
+//     markers.forEach(marker => {
+//       marker.getElement().addEventListener('mouseover', e => {
+//         const data = {};
+//         data.coord = marker.getLngLat();
+//         data.title = marker.properties.name;
+//         data.description = marker.properties.description;
+
+//         infowindowOpen(data);
+//       });
+//       marker.getElement().addEventListener('mouseout', () => {
+//         if (popup) {
+//           popup.remove();
+//         }
+//       });
+//     });
+
+//     props.map.on('mouseover', 'maine', e => {
+//       props.map.getCanvas().style.cursor = 'pointer';
+//       const feature = e.features[0];
+//       const data = feature.properties;
+//       data.coord = e.lngLat;
+//       data.title = feature.properties.name;
+
+//       infowindowOpen(data);
+//     });
+
+//     props.map.on('mouseout', 'maine', () => {
+//       props.map.getCanvas().style.cursor = '';
+//       if (popup) {
+//         popup.remove();
+//       }
+//     });
+
+//     props.map.on('click', e => {
+//       // 클릭한 지점의 피처들을 얻어옵니다.
+//       const features = props.map.queryRenderedFeatures(e.point, {
+//         layers: ['add-3d-buildings'] // 빌딩 레이어의 ID를 지정합니다.
+//       });
+
+//       // 빌딩 피처가 있는 경우
+//       if (features.length > 0) {
+//         // 첫 번째 빌딩 피처의 높이 값을 얻어옵니다.
+//         const height = features[0].properties.height;
+
+//         // 팝업을 생성하고 지도에 추가합니다.
+//         new props.mapboxgl.Popup()
+//           .setLngLat(e.lngLat)
+//           .setHTML(`Building height: ${height}m`)
+//           .addTo(props.map);
+//       }
+//     });
+//   };
+
+//   // 공역 생성 함수
+//   const featureAirZoneInit = () => {
+//     let arrGeoJson = [];
+
+//     const useGeoJson = {
+//       ...geoJson,
+//       features: [...geoJson.features, ...gimPo.features]
+//     };
+
+//     // props.map.data.removeGeoJson(useGeoJson);
+//     if (props.map.getLayer('maine')) {
+//       props.map.removeLayer('maine');
+//       props.map.removeSource('maine');
+//     }
+
+//     // 공역 색상 및 공역 표출 정보에 따른 노출
+//     useGeoJson.features.map(item => {
+//       if (item.properties.type === '0001' && mapControl.area0001) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#FF3648' }
+//         });
+//       } else if (item.properties.type === '0002' && mapControl.area0002) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#FFA1AA' }
+//         });
+//       } else if (item.properties.type === '0003' && mapControl.area0003) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#FFA800' }
+//         });
+//       } else if (item.properties.type === '0004' && mapControl.area0004) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#A16B00' }
+//         });
+//       } else if (item.properties.type === '0005' && mapControl.area0005) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#AB40FF' }
+//         });
+//       } else if (item.properties.type === '0006' && mapControl.area0006) {
+//         arrGeoJson.push({
+//           ...item,
+//           properties: { ...item.properties, color: '#009cad' }
+//         });
+//       }
+//     });
+//     useGeoJson.features = arrGeoJson;
+
+//     // 공역 생성 start
+//     props.map.addSource('maine', {
+//       type: 'geojson',
+//       data: {
+//         ...useGeoJson
+//       }
+//     });
+//     props.map.addLayer({
+//       id: 'maine',
+//       type: 'fill',
+//       source: 'maine',
+//       layout: {},
+//       paint: {
+//         'fill-color': ['get', 'color'],
+//         'fill-opacity': 0.5
+//       }
+//     });
+//     // 공역 생성 end
+
+//     // 비행장 마커 생성
+//     const markers = useGeoJson.features
+//       .filter(i => i.geometry.type === 'Point')
+//       .map(i => {
+//         const marker = new props.mapboxgl.Marker()
+//           .setLngLat(i.geometry.coordinates)
+//           .addTo(props.map);
+//         marker.properties = i.properties;
+//         return marker;
+//       });
+
+//     // 격자 공역 생성
+//     airPort.map(air => polyArea(air));
+//     // 마우스 오버 이벤트 생성
+//     featureAirEvent(markers);
+//   };
+
+//   // 격자 공역 셋팅 함수
+//   const polyArea = air => {
+//     const polyArr = [];
+//     const radius = air.buffer;
+//     const position = air.center;
+//     const color = '#000';
+//     const opacity = 0.7;
+
+//     let angle = 0;
+//     let layerId = 1;
+//     for (let i = 0; i < 4; i++) {
+//       angle += 90;
+//       let buffer = 0;
+//       for (let j = 0; j < 9; j++) {
+//         buffer += 1000;
+
+//         const coord = turf.destination(
+//           turf.point([position[0], position[1]]),
+//           buffer / 1000,
+//           angle,
+//           { units: 'kilometers' }
+//         ).geometry.coordinates;
+
+//         let reduce = 0;
+//         reduce = air.reduce[j];
+
+//         if (angle % 180 === 0) {
+//           const polyEW = {
+//             id: layerId++,
+//             type: 'Feature',
+//             geometry: {
+//               type: 'LineString',
+//               coordinates: [
+//                 turf.destination(
+//                   turf.point([coord[0], coord[1]]),
+//                   (radius - reduce) / 1000,
+//                   90,
+//                   { units: 'kilometers' }
+//                 ).geometry.coordinates,
+//                 turf.destination(
+//                   turf.point([coord[0], coord[1]]),
+//                   (radius - reduce) / 1000,
+//                   270,
+//                   { units: 'kilometers' }
+//                 ).geometry.coordinates
+//               ]
+//             },
+//             properties: {
+//               stroke: color,
+//               'stroke-width': 0.8,
+//               'stroke-opacity': opacity
+//             }
+//           };
+//           polyArr.push(polyEW);
+//         } else {
+//           const polyNS = {
+//             id: layerId++,
+//             type: 'Feature',
+//             geometry: {
+//               type: 'LineString',
+//               coordinates: [
+//                 turf.destination(
+//                   turf.point([coord[0], coord[1]]),
+//                   (radius - reduce) / 1000,
+//                   0,
+//                   { units: 'kilometers' }
+//                 ).geometry.coordinates,
+//                 turf.destination(
+//                   turf.point([coord[0], coord[1]]),
+//                   (radius - reduce) / 1000,
+//                   180,
+//                   { units: 'kilometers' }
+//                 ).geometry.coordinates
+//               ]
+//             },
+//             properties: {
+//               stroke: color,
+//               'stroke-width': 0.8,
+//               'stroke-opacity': opacity
+//             }
+//           };
+//           polyArr.push(polyNS);
+//         }
+//       }
+//     }
+
+//     const NS = {
+//       id: layerId++,
+//       type: 'Feature',
+//       geometry: {
+//         type: 'LineString',
+//         coordinates: [
+//           turf.destination(
+//             turf.point([position[0], position[1]]),
+//             radius / 1000,
+//             0,
+//             { units: 'kilometers' }
+//           ).geometry.coordinates,
+//           turf.destination(
+//             turf.point([position[0], position[1]]),
+//             radius / 1000,
+//             180,
+//             { units: 'kilometers' }
+//           ).geometry.coordinates
+//         ]
+//       },
+//       properties: {
+//         stroke: color,
+//         'stroke-width': 0.8,
+//         'stroke-opacity': opacity
+//       }
+//     };
+//     polyArr.push(NS);
+
+//     const EW = {
+//       id: layerId++,
+//       type: 'Feature',
+//       geometry: {
+//         type: 'LineString',
+//         coordinates: [
+//           turf.destination(
+//             turf.point([position[0], position[1]]),
+//             radius / 1000,
+//             90,
+//             { units: 'kilometers' }
+//           ).geometry.coordinates,
+//           turf.destination(
+//             turf.point([position[0], position[1]]),
+//             radius / 1000,
+//             270,
+//             { units: 'kilometers' }
+//           ).geometry.coordinates
+//         ]
+//       },
+//       properties: {
+//         stroke: color,
+//         'stroke-width': 0.8,
+//         'stroke-opacity': opacity
+//       }
+//     };
+
+//     polyArr.push(EW);
+//     if (props.map.getLayer(air.title)) {
+//       props.map.removeLayer(air.title);
+//       props.map.removeSource(air.title);
+//     }
+//     props.map.addSource(air.title, {
+//       type: 'geojson',
+//       data: {
+//         type: 'FeatureCollection',
+//         features: polyArr
+//       }
+//     });
+
+//     props.map.addLayer({
+//       id: air.title,
+//       type: 'line',
+//       source: air.title,
+//       layout: {
+//         'line-join': 'round',
+//         'line-cap': 'round'
+//       },
+//       paint: {
+//         'line-color': color,
+//         'line-width': 0.8,
+//         'line-opacity': opacity
+//       }
+//     });
+
+//     // Grid area
+//   };
+
+//   return null;
+// };