Can I use latitutde and longitude with ImageElement?

[Sparkles]

I'm using ImageElement and MediaLayer, such as in this example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch-3d

to upload a png as the map. In the example, they use x and y coordinates. I'm wondering if it's possible to integrate latitude and longitude into the image instead?

If it's not possible to use lat/long instead, are there util functions available to convert x/y to lat/long for different spatialReferences? The only one I could find was in WebMercatorUtils (but I don't think I'm able to use WebMercator with an image/ImageElement)... which leads me to my next question:

Also, is it possible to upload my own image/ use ImageElement with the WebMercator spatialReference? When I set the spatialReference to WebMercator, my custom image disappears and I see a round globe with no map/images, which I guess would make sense since WebMercator is for a round globe..

If it's not possible to use WebMercator with my own image/ImageElement, is there an easy way to convert points between 2 different coordinate systems? (from one that works with a custom image into WebMercator)?

Thanks so much for the help! 

[Sage_Wall]

Sure you can use any supported spatial reference, just make sure you set the correct wkid in the spatialReference property of the georeference.  This sample uses NAD1927 lat/lon (wkid 4267) to georeference a USGS geology map.https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-control-points/

[Sparkles]

Thanks for the help! I'm a little confused how I'd enter the lat and long values as the image corners. I only see an option to insert x and y. 

Also, I think the example uses 2193. Where did you see 4267? Thanks so much for the help!

[Sage_Wall]

A constant named spatialReference is defined on line 88 and then used throughout the rest of the sample.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=layers-medialayer-contro...

const spatialReference = new SpatialReference({ wkid: 4267 });

[Sparkles]

const imageSettings = {
units: "meter",
width: 120,
height: 170,
minx: 1769934.4770259405,
miny: 5905359.483770887
};

For example in this code, how would I enter lat and long instead? thanks!

[Sage_Wall]

All you need to do is replace the values in meters with those in degrees and when defining the extent use a geographic coordinate system WKID.  There isn't anything special about the imageSettings object it's just holding values that are used later used to create the extent.

      const imageSettings = {
        units: "degrees",
        width: 0.125,
        height: 0.125,
        minx: -107.875,
        miny: 37.875
      };
      let extent = new Extent({
        spatialReference: {
          wkid: 4267
        },
        // South-West corner of the image
        xmin: imageSettings.minx,
        ymin: imageSettings.miny,
        // North-East corner of the image
        xmax: imageSettings.minx + imageSettings.width,
        ymax: imageSettings.miny + imageSettings.height
      });

[Sparkles]

or would I just have to use a x, y to lat,long converstion formula every time I want to interact with the map? (Such as draw a polyline or point with the sketch widget, then want the lat/long of those points

[Sage_Wall]

Hi  @Sparkles  (love the name by the way 😀),

Latitude and longitude are valid x and y values when creating a point in a geographic coordinate system.  You can also define the Point using latitude and longitude properties as well.  I simplified the example, to hopefully make it a little more obvious where I'm using map coordinates (latitude and longitude) vs image coordinates (pixels from the top left corner). I hope this helps, you don't need to do the conversions yourself, we handle that for you if you define the spatial reference. You could use any of the georeference options this way.  I used the control points georeference in this case as the known latitude and longitude values are not at the corners of the images but are inset because of the margin on the image.

https://codepen.io/sagewall/pen/XWLMLbG

[Sparkles]

Hi @Sage_Wall ! Thanks 😀 ! And thanks so much for the help, I really appreciate it! And sorry if my questions are really basic, I'm new to working with any maps! I'm just running into one last issue - everything works great when I use the x,y (meters) values of1769934.4770259405, 5905359.4837708872 for the imageElement (and camera). (Using wkid 102100 /WebMercator)

But when I try using my desired location of lat 32.9316, long -117.2218 (tried both equivalent meter values of x -103676511.13576749, y 3665928.9430077067, and degrees values ), the image doesn't show anymore, and I can't figure out why. (I even tried making the image way bigger to see if it was just too tiny/not showing up from not being able to find it on the map)

const imageSettings = {

  units: "degrees",

  width: 50000, //70,

  height: 50000, //120,

  minx: -117.2218, 

  miny: 32.9316, 

}

Do you know what could be happening that the image wouldn't show up at that point, but did at the other random x, y points? Thanks so much!

[Sage_Wall]

Hi @Sparkles , there any way you could share a code pen of the code your working through?   Are you seeing any errors or messages in the console? There really isn't enough information in the little code snippet included to troubleshoot and debug.  The sample you are working off is a very advanced sample for a new user and it might be simpler to start with a basic sample and see if you can get the image to show up in the correct location.  Once you get the image to show up as intended and understand how that process works, you can add the sketch functionality back in if needed. Another thing you could try is deleting that imageSettings object and entering the values as needed directly. That might help you find at which point in your code the bug is happening.

https://codepen.io/sagewall/pen/XWLMLbG

This simpler code pen doesn't have the complications of the other sample which is intended to be about the sketch widget more so than how to place an image element.  All you need to know is the latitude and longitude of the 4 corners of the image and their corresponding image pixel coordinates.

Looking at the code snippet provided and if no other changes were made to the sample code you've defined an image height and width of 50,000 degrees, an image that wraps around the earth 139 times.  You likely need to convert those 50,000 values into their corresponding height and width of the image in degrees, but it's really really hard to guess what else could have gone wrong without some code to debug.