MapView.toMap doesn't supprort native mouse event

Question

From the api docs,  MapView.toMap support to take screenPoint or MouseEvent (which shows as a DOM mouse event type) and return a map Point. However, when implementing the code, I notice that the MouseEvent must be esri supported event (https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#events-summary).

In my case, I need to let  a div element to catch the right click event and convert the mouse position to be a map point, instead of relying on the mapView.on('click', clickCB).  Thus, Im not able to directly get the esri supported event.  I wonder Is there any public utils  I can use to convert dom mouse event to esri supported event, or directly to screenPoint.

Here is what i found from the code,  there is

screenUtils.createScreenPointFromNativeEvent(MapRef.current, event)to convert dom mouse click to screenPoint, but I dont find it in the esri docs. does anyone know if I can use it in my code?

Martin_B · Answer

Are you cleaning up your event listeners after they are used? In React, leaving event listeners without cleaning them up may lead to unexpected behaviour. A new event listener could be added to your component on each re-render.

This article may be of help if you are not already cleaning them up. 😊

If this does not solve the problem, it would help a lot of you could provide some of your code for further debugging.

YangJin · Answer

hmm, weird.. in my react case, screenpoint and {screenX, screenY} from native dom event are different.

RRubalcava · Answer

view.toMap supports native mouse events. All it needs are screen x and y coordinates. That's all that a ScreenPoint is.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#ScreenPoint

Here is a demo:

https://codepen.io/odoe/pen/wvRxezP?editors=0010

elem.addEventListener("click", (event) => {
	const pt = view.toMap(event);

view.graphics.add({
		geometry: pt,
		attributes: {
			name: "My Point"
		},
		popupTemplate: {
			title: "{name}",
			content: "This is my mouse event"
		}
	});
});