nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

convert pixel x,y position on map to lat and long?

CamCode

My map takes up 100% width and height of the browser screen.. I have a draggable div that is super imposed over the map, I am capturing this divs position using offset(); to get the pixel top and left values currently.

My goals would be to convert these values to latitude and longitude... Could something like this be possible?

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Cam,

Have you considered map.toMap(ScreenPoint)?

https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#tomap

CamCode

Thanks, I thought that may have been depreciated.

So how may that apply to the below scenario for instance?

let ktop = $('elem').offset().top;

let ktlft = $('elem').offset().left;

coordinatesBx = ktop,

coordinatesBy = ktlft

RobertScheitlin__GISP

Cam,

Not sure what gave you that idea. The application would simply be:

<SPAN class="keyword token">var</SPAN> point <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ScreenPoint</SPAN><SPAN class="punctuation token">(</SPAN>coordinatesBx<SPAN class="punctuation token">,</SPAN>coordinatesBy<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>‍<SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Lat: "</SPAN> <SPAN class="operator token">+</SPAN> point<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLatitude</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">", Lon: "</SPAN> <SPAN class="operator token">+</SPAN> point<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLongitude</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

CamCode

Gotchya. It is reported Uncaught ReferenceError: ScreenPoint is not defined

RobertScheitlin__GISP

did you add the require for the ScreenPoint class?

CamCode

For some reason I am having a hard time in getting the import to resolve; is there a specific order this one should be called?

import ScreenPoint from "esri/geometry/ScreenPoint";

RobertScheitlin__GISP

Cam,

Are you using 4.x or 3.x?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.