topic Re: Can I use latitutde and longitude with ImageElement? in ArcGIS JavaScript Maps SDK Questions

Can I use latitutde and longitude with ImageElement?

Sparkles — Fri, 02 Aug 2024 04:10:50 GMT

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!

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Thu, 01 Aug 2024 23:22:40 GMT

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/

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Thu, 01 Aug 2024 23:32:54 GMT

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!

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Thu, 01 Aug 2024 23:33:51 GMT

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!

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Thu, 01 Aug 2024 23:35:10 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Fri, 02 Aug 2024 13:10:17 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Fri, 02 Aug 2024 11:53:35 GMT

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-control-points

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

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Fri, 02 Aug 2024 22:04:26 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Sun, 04 Aug 2024 22:55:58 GMT

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!

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Mon, 05 Aug 2024 11:29:45 GMT

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.

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Mon, 05 Aug 2024 12:53:25 GMT

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.

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Mon, 05 Aug 2024 13:27:53 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Wed, 07 Aug 2024 18:58:05 GMT

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)?

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Wed, 07 Aug 2024 19:40:55 GMT

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/

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Wed, 14 Aug 2024 05:21:21 GMT

@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!

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Wed, 14 Aug 2024 20:59:28 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Fri, 16 Aug 2024 08:55:08 GMT

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

Re: Can I use latitutde and longitude with ImageElement?

Sparkles — Mon, 26 Aug 2024 04:51:17 GMT

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!!😁

Re: Can I use latitutde and longitude with ImageElement?

Sage_Wall — Mon, 26 Aug 2024 19:21:33 GMT

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/