topic Re: coordinates to screen position in ArcGIS JavaScript Maps SDK Questions

coordinates to screen position

LefterisKoumis — Thu, 17 Aug 2023 22:52:58 GMT

Hello all.

I want to place programmatically a div on the screen and I need its top left corner to be at a certain coordinate location (Lat/Long). How do I calculate the div's left and top property (in px) based on the lat/long?

So, what I am looking for is convert lat/long to px, so I can set the div's left and top position.

I tried this but didn't work.

div's id is "box"

const screenPoint = view.toScreen(point); document.getElementById('box').style.position = "absolute" document.getElementById('box').style.left = screenPoint.x +"px" document.getElementById('box').style.top = screenPoint.y+"px"

Thank you.

Re: coordinates to screen position

JoelBennett — Thu, 17 Aug 2023 23:16:57 GMT

This appears to work:

var screenPoint = view.toScreen(point); var rect = view.container.getBoundingClientRect(); var left = screenPoint.x + rect.left + window.scrollX; var top = screenPoint.y + rect.top + window.scrollY; var box = document.getElementById("box"); box.style.position = "absolute"; box.style.left = left.toString() + "px"; box.style.top = top.toString() + "px";

Re: coordinates to screen position

LefterisKoumis — Fri, 18 Aug 2023 00:29:35 GMT

I understand the logic but I am missing something.

See this codepen. It works if I set the let, top properties in the css. The ultimate goal for me is to be able to get the extent of the box based on its upper left corner (point) and its width/height. Thank you.

https://codepen.io/lkoumis1/pen/QWzWNLQ?editors=1100

Re: coordinates to screen position

JoelBennett — Fri, 18 Aug 2023 00:47:49 GMT

The point declaration is invalid, and it also needs to be wrapped in view.when:

view.when(function() { var point = new Point({x:-121.755, y:38.359}); var screenPoint = view.toScreen(point); var rect = view.container.getBoundingClientRect(); var left = screenPoint.x + rect.left + window.scrollX; var top = screenPoint.y + rect.top + window.scrollY; var box = document.getElementById("box"); box.style.position = "absolute"; box.style.left = left.toString() + "px"; box.style.top = top.toString() + "px"; });

Re: coordinates to screen position

LefterisKoumis — Fri, 18 Aug 2023 15:39:14 GMT

Just follow up to the above. I updated the codepen

https://codepen.io/lkoumis1/pen/QWzWNLQ

to capture the coords of the bottom right of the box (opposite corner of the point). But the coords widget shows that the recorded coords (shown in console.log) for the bottom right are not matching the widget's display.

Re: coordinates to screen position

JoelBennett — Fri, 18 Aug 2023 23:16:32 GMT

If you're wanting to get the map coordinates of the bottom-right point, it would be better to calculate from the pre-existing "screenPoint" variable instead:

var bottomrightX = screenPoint.x + 200 //200 is the width of the box pre css var bottomrightY = screenPoint.y + 300 //300 is the height of the box per

For consistency, you also might want to use the same coordinate system in your call to console.log:

console.log("POINT = " + ptUpdate.longitude + "," + ptUpdate.latitude);