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 · Accepted solution]

I simplified the example you were working with to simply add the image in this other new codepen and removed the other stuff that was making the sample much more confusing to use to answer the question of can I use latitude and longitude with media layers.

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

Try changing the image url and the extent as appropriate for your image.  The original sample relies on knowing the width of the image which can might be more difficult than defining the max x and y values.

[Sage_Wall]

This is original sample converted to use lat and lon.  There are a bunch of unrelated elevation services issues, but I hope this helps @Sparkles 😀  The coordinates I used aren't super accurate, but close enough for demo purposes. 

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

[Sparkles]

Hi, thanks so much for all the help, yes this worked for me ! 😁 Also, do you know if it's possible to pass multiple images to ImageElement (or to have multiple ImageElements displayed side by side on the map)?

[Sage_Wall]

Happy to help.  Sure can. 🙂  the source property of the media layer can either accept a single ImageElement, VideoElement or an array of them.  This sample shows an example of having multiple ImageElements in a single MediaLayer.  You could also create multiple MediaLayers each with different ImageElements if you wanted to control their visibility or other properties independently. https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-images/ 

[Sparkles]

@Sage_Wall Thanks again for all the help!!😊 I really appreciate it, and sorry to bother you again! My design changed a little, and I'm going from just an image to wanting a map as the backdrop (just like you have in your example). However, when I add basemap: "topo-vector" to my Map (whereas I only had the mediaLayer before), my image no longer shows... could it possibly be hidden behind the map?

I noticed you have this code to focus on the image:
view.when(() => {
view.goTo(mediaLayer.fullExtent);
});

(and when I console.log mediaLayer.fullExtent in your codepen, I get this:

{
"spatialReference": {
"wkid": 4326
},
"xmin": 174.9093,
"ymin": -36.98257,
"xmax": 174.91068,
"ymax": -36.98102
}

However, when I console.log mediaLayer.fullExtent in my own code, it returns a p7 arcgis object with the following values: 
ymax: 90
ymin: -90
xmax: 180
xmin: -180

How come your fullExtent values are set to something specific? 

What I also find strange is that when I add the basemap, it does start at the same point (same lat and long) as where the image was, it's just that the image no longer shows.

Thanks so much!

[Sage_Wall]

Happy to help @Sparkles  😀,

Spatial references can be confusing.  The full extent of the media layer is set in the georeference on line 48 of this codepen.  Notice how I'm setting the spatial reference to the WGS 1984 geographic.  If I log out the spatial reference of the map (line 73), it's set to 102100 or the WGS_1984_Web_Mercator_Auxiliary_Sphere projection.  The view picks up it's spatial reference from the basemap.  My hunch is that you might not have the spatial reference defined properly on your layer and when you add it to the map with the basemap it isn't being properly projected.  If you have a codepen or some code to share that can be debugged I'm sure we can figure out what went wrong but I'm just kinda making educated guesses.

  const georeference = new ExtentAndRotationGeoreference({
    extent: new Extent({
      spatialReference,
      xmin: 174.9093,
      ymin: -36.98257,
      xmax: 174.91068,
      ymax: -36.98102
    })
  });

[Sparkles]

Thank you so much! I'll get back to you in the next few days😁

[Sparkles]

Hi @Sage_Wall 🙂 
I was wondering if you knew about using the map offline? I'm trying to get my image map to work offline, but the Sketch Widget and other widgets don't load, and I get the errors in the screenshot (arcGIS errors while trying to load everything). I saw that it's an option to create offline maps with arcGIS Online and Enterprise, but I don't want to do that if it can be avoided, especially since I don't need the real maps, as I just have my image uploaded. I just want the SketchWidget to still work. Thanks so much!!😁

[Sage_Wall]

Hi @Sparkles , the JavaScript SDK isn't designed to work offline.  The offline maps you see in AGO or Enterprise are created for use in Esri native mobile applications, such as Field Maps, and custom apps built using Esri's native SDKs. Take a look at this webpage, there is a lot of info about ways to take your maps and apps offline 😀

https://developers.arcgis.com/documentation/offline-mapping-apps/