How to get Mapviewer container-relative x and y pixel coordinates from the Mapviewer from clicks on the map?

Question

I'm working with an Oracle Mapviewer map embedded in an HTML page where I interact with the map via the Javascript api.

The displayInfoWindow function of the Mapviewer will generate a popup dialog inside the map container near the point the user clicks on the map, but this appears to be located on the map layer through GIS coordinates relative to the map itself, not pixel coordinates relative to the containing Mapviewer window. I need to get the x and y coordinates of the click when a user clicks the point on the map so that I can absolutely position a div on top of the map container at the correct coordinates. The infoWindow inside the Mapviewer isn't sufficient for my purposes, so I need to construct that in the containing page, but I need to be able to position it correctly.

How can I get the Mapviewer container-relative x and y pixel coordinates from the Mapviewer when a user clicks on the map?

Answer 1

What I wound up doing was adding an event handler on the Div that contains the MapViewer, and then as MapViewer doesn't consume click events, I just watched and handled the click event which provided the x + y pixel coordinates relative to the Div for me to handle. I'm using this in an Angular project, so I used ng-click on the Div.

<div id="mapDiv" ng-click="trackMouseClick($event)">
    <!-- MapViewer loads into the mapDiv -->
</div>

Then in my controller, I wrote the function to handle the events:

$scope.trackMouseClick = function(event) {
    <!-- event has offsetX and offsetY properties -->
    var xCoordinate = event.offsetX;
    var yCoordinate = event.offsetY;
}