공역데이터블록 이벤트 임시 수정

src/components/map/mapbox/feature/FeatureAirZone.js

@@ -47,18 +47,18 @@ export default function FeatureAirZone(props) {
   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 +
+      data.title +
       '</span>' +
       '</div>' +
-      '</div>' +
+      // '<div class="tooltip-txt">' +
+      // '<div class="tooltip-txt-list">' +
+      // '<span>' +
+      // data.description +
+      // '</span>' +
+      // '</div>' +
+      // '</div>' +
       '</div>';
 
     if (popup) {
@@ -67,10 +67,10 @@ export default function FeatureAirZone(props) {
 
     // Create a popup element
     popup = new props.mapboxgl.Popup({
-      offset: [20, -20],
+      offset: [0, 0],
       closeButton: false,
-      closeOnClick: false,
+      closeOnClick: true,
-      closeOnMove: true
+      closeOnMove: false
     })
       .setLngLat(data.coord)
       .setHTML(content)
@@ -95,7 +95,7 @@ export default function FeatureAirZone(props) {
       });
     });
 
-    props.map.on('mouseover', 'maine', e => {
+    props.map.on('click', 'maine', e => {
       props.map.getCanvas().style.cursor = 'pointer';
       const feature = e.features[0];
       const data = feature.properties;
@@ -105,12 +105,22 @@ export default function FeatureAirZone(props) {
       infowindowOpen(data);
     });
 
-    props.map.on('mouseout', 'maine', () => {
+    // props.map.on('mouseover', 'maine', e => {
-      props.map.getCanvas().style.cursor = '';
+    //   props.map.getCanvas().style.cursor = 'pointer';
-      if (popup) {
+    //   const feature = e.features[0];
-        popup.remove();
+    //   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();
+    //   }
+    // });
 
     const buildingsLayer = props.map.getLayer('add-3d-buildings');
     if (buildingsLayer) {