coordinates to screen position

[LefterisKoumis]

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.

[JoelBennett]

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";

[LefterisKoumis]

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

[JoelBennett · Accepted solution]

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";
});

[LefterisKoumis]

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.

[JoelBennett]

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);