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