Select to view content in your preferred language

coordinates to screen position

1058
5
Jump to solution
08-17-2023 03:52 PM
LefterisKoumis
Regular Contributor II

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.

 

 

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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

View solution in original post

0 Kudos
5 Replies
JoelBennett
MVP Regular Contributor

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";
0 Kudos
LefterisKoumis
Regular Contributor II

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

0 Kudos
JoelBennett
MVP Regular Contributor

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";
});
0 Kudos
LefterisKoumis
Regular Contributor II

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.

0 Kudos
JoelBennett
MVP Regular Contributor

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