diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx
index 1ecd4de49..01cbc4bd3 100644
--- a/gcs/src/components/mapComponents/markerPin.jsx
+++ b/gcs/src/components/mapComponents/markerPin.jsx
@@ -10,6 +10,7 @@ import { Tooltip } from "@mantine/core"
import { Marker } from "react-map-gl"
import { useDispatch } from "react-redux"
import { coordToInt } from "../../helpers/dataFormatters"
+import { getContainerPointFromEvent } from "../../helpers/pointer"
import {
updateContextMenuState,
updateDrawingItem,
@@ -31,16 +32,30 @@ const MarkerPin = React.memo(
return (
{
+ // Prevent right-click from initiating a drag on the marker
+ if (e.button === 2) {
+ e.preventDefault()
+ e.stopPropagation()
+ }
+ }}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
}}
onContextMenu={(e) => {
e.preventDefault()
+ e.stopPropagation()
+ // get map container
+ const container = e.currentTarget.closest(
+ ".maplibregl-map, .mapboxgl-map",
+ )
+ // use helper to get point inside container
+ const pt = getContainerPointFromEvent(e.nativeEvent, container)
dispatch(
updateContextMenuState({
isOpen: true,
- position: { x: e.nativeEvent.layerX, y: e.nativeEvent.layerY },
+ position: { x: pt.x, y: pt.y },
gpsCoords: { lat: lat, lng: lon },
markerId: id,
}),
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index 1fe7933cf..d6a6d3fbc 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -58,6 +58,7 @@ import {
updateContextMenuState,
} from "../../redux/slices/missionSlice"
import ContextMenuSpecificCommandItems from "../mapComponents/contextMenuSpecificCommandItems"
+import { getContainerPointFromEvent } from "../../helpers/pointer"
const tailwindColors = resolveConfig(tailwindConfig).theme.colors
@@ -293,10 +294,14 @@ function MapSectionNonMemo({
onDragStart={onDragstart}
onContextMenu={(e) => {
e.preventDefault()
+ // get map container
+ const canvas = e.target.getCanvas()
+ // use helper to get point inside container
+ const pt = getContainerPointFromEvent(e.originalEvent ?? e, canvas)
dispatch(
updateContextMenuState({
isOpen: true,
- position: e.point,
+ position: pt,
gpsCoords: e.lngLat,
markerId: null,
}),
diff --git a/gcs/src/helpers/pointer.js b/gcs/src/helpers/pointer.js
new file mode 100644
index 000000000..667697501
--- /dev/null
+++ b/gcs/src/helpers/pointer.js
@@ -0,0 +1,22 @@
+// Returns the point (x, y) inside a container for a pointer event.
+export function getContainerPointFromEvent(event, container) {
+ // Validate event and coordinates
+ const hasClientCoords =
+ event &&
+ typeof event.clientX === "number" &&
+ typeof event.clientY === "number"
+
+ if (!hasClientCoords) {
+ // Fallback safely if event is invalid; caller expects an {x, y} object
+ return { x: 0, y: 0 }
+ }
+
+ const rect =
+ container && typeof container.getBoundingClientRect === "function"
+ ? container.getBoundingClientRect()
+ : { left: 0, top: 0 }
+
+ const x = event.clientX - rect.left
+ const y = event.clientY - rect.top
+ return { x, y }
+}