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

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