Here's a ui_template that displays an image with a draggable overlayed icon. On either a mouse click/drag or mobile touch events, it returns the relative normalized (from 0 to 1) coordinates. template here, example flow below:
<img id="imgmap" style="position: absolute; top: 0px; left: 0px;" src="https://upload.wikimedia.org/wikipedia/en/2/26/Black_and_white_political_map_of_the_world.png" draggable="false">
<img id="imgcursor" style="position: absolute; top: 0px; left: 0px; height: 40px; width: 40px " src="http://www.pngall.com/wp-content/uploads/2017/05/Map-Marker-PNG-File.png">
<div id="coords" style="color: black; z-index: 100; pointer-events:none;"></div>
<script>
(function($scope) {
$('#imgmap').on('touchstart touchmove',function(e){
e.preventDefault();
const map = document.getElementById("imgmap");
let rect = map.getBoundingClientRect();
let xCoordinate = ((e.touches[0].clientX - rect.left)/ (rect.right- rect.left)).toFixed(4);
let yCoordinate = ((e.touches[0].clientY - rect.top)/(rect.bottom - rect.top)).toFixed(4);
if (xCoordinate < 1 && xCoordinate > 0 && yCoordinate < 1 && yCoordinate > 0){
$("#coords").text( "X: " + xCoordinate + ", Y: " + yCoordinate);
$("#imgcursor").css( "left", (e.touches[0].clientX - rect.left) - 20 ); // offset to half of the cursor's width
$("#imgcursor").css( "top", (e.touches[0].clientY - rect.top) - 20 ); // offset to half of the cursor's height
$scope.send({"payload":{"coordX": xCoordinate, "coordY": yCoordinate}});
}
});
$('#imgmap').on('mousemove mousedown mouseup',function(e){
e.preventDefault();
const map = document.getElementById("imgmap");
let rect = map.getBoundingClientRect();
let xCoordinate = ((e.clientX - rect.left)/ (rect.right- rect.left)).toFixed(4);
let yCoordinate = ((e.clientY - rect.top)/(rect.bottom - rect.top)).toFixed(4);
if (xCoordinate < 1 && xCoordinate > 0 && yCoordinate < 1 && yCoordinate > 0 && e.buttons == 1){
$("#coords").text( "X: " + xCoordinate + ", Y: " + yCoordinate);
$("#imgcursor").css( "left", (e.clientX - rect.left) - 20); // offset to half of the cursor's width
$("#imgcursor").css( "top", (e.clientY - rect.top) - 20 ); // offset to half of the cursor's height
$scope.send({"payload":{"coordX": xCoordinate, "coordY": yCoordinate}});
}
});
})(scope);
</script>