How to display *.jp2 using ArcGIS Maps SDK for JavaScript

KHTRE — Fri, 24 Feb 2023 09:33:41 GMT

I have a *.jp2 file (direct link if you need it) and I need to display it as a layer using ArcGIS Maps SDK for JavaScript.

I have tried to convert it into COGeoTIFF using OSGeo4W (gdal)

gdal_translate -of COG -ot UInt16 NC_2022-12-17.jp2 result.tif

And it looks like it became COD.
This is the result of gdalinfo:

Driver: GTiff/GeoTIFF Files: resultUint16tiff.tiff Size is 5249, 3133 Coordinate System is: GEOGCRS["WGS 84", DATUM["World Geodetic System 1984", ELLIPSOID["WGS 84",6378137,298.257223563, LENGTHUNIT["metre",1, ID["EPSG",9001]]]], PRIMEM["Greenwich",0, ANGLEUNIT["degree",0.0174532925199433, ID["EPSG",9122]]], CS[ellipsoidal,2], AXIS["latitude",north, ORDER[1], ANGLEUNIT["degree",0.0174532925199433, ID["EPSG",9122]]], AXIS["longitude",east, ORDER[2], ANGLEUNIT["degree",0.0174532925199433, ID["EPSG",9122]]]] Data axis to CRS axis mapping: 2,1 Origin = (-102.264268518500003,39.905087963000000) Pixel Size = (0.000004629600000,-0.000004629600000) Metadata: AREA_OR_POINT=Area Image Structure Metadata: COMPRESSION=LZW INTERLEAVE=PIXEL LAYOUT=COG Corner Coordinates: Upper Left (-102.2642685, 39.9050880) (102d15'51.37"W, 39d54'18.32"N) Lower Left (-102.2642685, 39.8905834) (102d15'51.37"W, 39d53'26.10"N) Upper Right (-102.2399677, 39.9050880) (102d14'23.88"W, 39d54'18.32"N) Lower Right (-102.2399677, 39.8905834) (102d14'23.88"W, 39d53'26.10"N) Center (-102.2521181, 39.8978357) (102d15' 7.63"W, 39d53'52.21"N) Band 1 Block=512x512 Type=UInt16, ColorInterp=Red Overviews: 2625x1567, 1313x784, 657x392 Band 2 Block=512x512 Type=UInt16, ColorInterp=Green Overviews: 2625x1567, 1313x784, 657x392 Band 3 Block=512x512 Type=UInt16, ColorInterp=Blue Overviews: 2625x1567, 1313x784, 657x392

After that I have tried to use it with the Imagery Tile Layer.

But it is not visible on the map. There are no errors in the console.

On the other hand, if I use the file from the example for Imagery Tile Layer (this one) it works perfectly fine.
So, the issue is not in the code.

Here is the result on gdalinfo for the file from Esri example:

Driver: GTiff/GeoTIFF Files: Bolivia.tiff Size is 7661, 7781 Warning 1: PROJ: proj_create_from_database: C:\OSGeo4W\share\proj\proj.db contains DATABASE.LAYOUT.VERSION.MINOR = 1 whereas a number >= 2 is expected. It comes from another PROJ installation. Warning 1: The definition of projected CRS EPSG:32619 got from GeoTIFF keys is not the same as the one from the EPSG registry, which may cause issues during reprojection operations. Set GTIFF_SRS_SOURCE configuration option to EPSG to use official parameters (overriding the ones from GeoTIFF keys), or to GEOKEYS to use custom values from GeoTIFF keys and drop the EPSG code. Warning 1: PROJ: proj_create_from_name: C:\OSGeo4W\share\proj\proj.db contains DATABASE.LAYOUT.VERSION.MINOR = 1 whereas a number >= 2 is expected. It comes from another PROJ installation. Coordinate System is: PROJCRS["WGS_1984_UTM_Zone_19N", BASEGEOGCRS["WGS 84", DATUM["World Geodetic System 1984", ELLIPSOID["WGS 84",6378137,298.257223563, LENGTHUNIT["metre",1, ID["EPSG",9001]]]], PRIMEM["Greenwich",0, ANGLEUNIT["degree",0.0174532925199433, ID["EPSG",9122]]]], CONVERSION["Transverse Mercator", METHOD["Transverse Mercator", ID["EPSG",9807]], PARAMETER["Latitude of natural origin",0, ANGLEUNIT["degree",0.0174532925199433], ID["EPSG",8801]], PARAMETER["Longitude of natural origin",-69, ANGLEUNIT["degree",0.0174532925199433], ID["EPSG",8802]], PARAMETER["Scale factor at natural origin",0.9996, SCALEUNIT["unity",1], ID["EPSG",8805]], PARAMETER["False easting",500000, LENGTHUNIT["metre",1], ID["EPSG",8806]], PARAMETER["False northing",0, LENGTHUNIT["metre",1], ID["EPSG",8807]]], CS[Cartesian,2], AXIS["easting",east, ORDER[1], LENGTHUNIT["metre",1, ID["EPSG",9001]]], AXIS["northing",north, ORDER[2], LENGTHUNIT["metre",1, ID["EPSG",9001]]]] Data axis to CRS axis mapping: 1,2 Origin = (561885.000000000000000,-1322685.000000000000000) Pixel Size = (30.000000000000000,-30.000000000000000) Metadata: AcquisitionDate=43655.607084074072 AREA_OR_POINT=Area CloudCover=0.000000000000000000 DatasetTag=MS DataType=Generic ParentRasterType=Landsat 8 ParentTemplate=Multispectral ProductName=L1TP SensorName=Landsat 8 SunAzimuth=40.144335900000001516 SunElevation=43.934061520000000201 Image Structure Metadata: COMPRESSION=LZW INTERLEAVE=PIXEL LAYOUT=COG Corner Coordinates: Upper Left ( 561885.000,-1322685.000) ( 68d25'53.74"W, 11d57'51.98"S) Lower Left ( 561885.000,-1556115.000) ( 68d25'36.35"W, 14d 4'30.61"S) Upper Right ( 791715.000,-1322685.000) ( 66d19'17.83"W, 11d57' 8.06"S) Lower Right ( 791715.000,-1556115.000) ( 66d17'55.98"W, 14d 3'38.65"S) Center ( 676800.000,-1439400.000) ( 67d22'11.01"W, 13d 0'55.27"S) Band 1 Block=512x512 Type=UInt16, ColorInterp=Gray Description = CoastalAerosol Min=6131.000 Max=65535.000 Minimum=6131.000, Maximum=65535.000, Mean=8905.080, StdDev=177.506 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=CoastalAerosol RadianceBias=-60.734389999999997656 RadianceGain=0.012147000000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=31508.52665301626,41642.15679906171,60672.355627964,100761.9852593969,-195143.4491109666,118476.8275766652,108672.286833731,138.1712517149589 STATISTICS_MAXIMUM=65535 STATISTICS_MEAN=8905.0801598933 STATISTICS_MEDIAN=8693.525490 STATISTICS_MINIMUM=6131 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=177.50641299124 WavelengthMax=450.000000000000000000 WavelengthMin=430.000000000000000000 Band 2 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = Blue Min=6812.000 Max=35999.000 Minimum=6812.000, Maximum=35999.000, Mean=8069.279, StdDev=239.697 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=Blue RadianceBias=-62.192759999999999820 RadianceGain=0.012439000000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=41642.15679906171,57454.85861445696,86149.47310466296,142884.8829616395,-281256.6995189103,163279.4277654528,149520.4595701488,191.5452585793981 STATISTICS_MAXIMUM=35999 STATISTICS_MEAN=8069.2794414995 STATISTICS_MEDIAN=7956.588235 STATISTICS_MINIMUM=6812 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=239.69743138894 WavelengthMax=510.000000000000000000 WavelengthMin=450.000000000000000000 Band 3 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = Green Min=6427.000 Max=20046.000 Minimum=6427.000, Maximum=20046.000, Mean=7461.374, StdDev=383.060 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=Green RadianceBias=-57.310090000000002419 RadianceGain=0.011462000000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=60672.355627964,86149.47310466296,146735.1970440772,224919.4698553707,-339954.589094391,210672.3368468368,189659.0996540143,237.5565712845495 STATISTICS_MAXIMUM=20046 STATISTICS_MEAN=7461.3737144374 STATISTICS_MEDIAN=7334.933333 STATISTICS_MINIMUM=6427 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=383.06030470942 WavelengthMax=590.000000000000000000 WavelengthMin=530.000000000000000000 Band 4 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = Red Min=5566.000 Max=20382.000 Minimum=5566.000, Maximum=20382.000, Mean=6772.979, StdDev=623.572 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=Red RadianceBias=-48.327100000000001501 RadianceGain=0.009665399999999999 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=100761.9852593969,142884.8829616395,224919.4698553707,388841.5805853336,-789521.2702374764,414701.3373873618,380051.9154543081,522.6371678856232 STATISTICS_MAXIMUM=20382 STATISTICS_MEAN=6772.9790924259 STATISTICS_MEDIAN=6437.529412 STATISTICS_MINIMUM=5566 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=623.57163228079 WavelengthMax=670.000000000000000000 WavelengthMin=640.000000000000000000 Band 5 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = NearInfrared Min=4608.000 Max=32502.000 Minimum=4608.000, Maximum=32502.000, Mean=13995.801, StdDev=2071.420 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=NearInfrared RadianceBias=-29.573779999999999291 RadianceGain=0.005914800000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=-195143.4491109666,-281256.6995189103,-339954.589094391,-789521.2702374764,4290781.202010791,-253487.4614312998,-716183.7034941466,-1185.24140439538 STATISTICS_MAXIMUM=32502 STATISTICS_MEAN=13995.80144226 STATISTICS_MEDIAN=14343.552941 STATISTICS_MINIMUM=4608 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=2071.4200930788 WavelengthMax=880.000000000000000000 WavelengthMin=850.000000000000000000 Band 6 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = ShortWaveInfrared_1 Min=4649.000 Max=65535.000 Minimum=4649.000, Maximum=65535.000, Mean=10096.295, StdDev=1538.379 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=ShortWaveInfrared_1 RadianceBias=-7.354729999999999990 RadianceGain=0.001470900000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=118476.8275766652,163279.4277654528,210672.3368468368,414701.3373873618,-253487.4614312998,2366608.875233505,1474145.926775633,2391.277470791071 STATISTICS_MAXIMUM=65535 STATISTICS_MEAN=10096.294938413 STATISTICS_MEDIAN=9424.372549 STATISTICS_MINIMUM=4649 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=1538.3786514488 WavelengthMax=1650.000000000000000000 WavelengthMin=1570.000000000000000000 Band 7 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = ShortWaveInfrared_2 Min=4257.000 Max=65535.000 Minimum=4257.000, Maximum=65535.000, Mean=7163.728, StdDev=1030.534 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=ShortWaveInfrared_2 RadianceBias=-2.478940000000000143 RadianceGain=0.000495790000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=108672.286833731,149520.4595701488,189659.0996540143,380051.9154543081,-716183.7034941466,1474145.926775633,1062000.165344211,1592.500852970767 STATISTICS_MAXIMUM=65535 STATISTICS_MEAN=7163.7281692793 STATISTICS_MEDIAN=6660.058824 STATISTICS_MINIMUM=4257 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=1030.5339224617 WavelengthMax=2290.000000000000000000 WavelengthMin=2110.000000000000000000 Band 8 Block=512x512 Type=UInt16, ColorInterp=Undefined Description = Cirrus Min=4372.000 Max=13262.000 Minimum=4372.000, Maximum=13262.000, Mean=5033.905, StdDev=10.463 NoData Value=0 Overviews: 3831x3891, 1916x1946, 958x973, 479x487, 240x244 Metadata: BandName=Cirrus RadianceBias=-11.558099999999999596 RadianceGain=0.002311600000000000 ReflectanceBias=-0.100000000000000006 ReflectanceGain=0.000020000000000000 RepresentationType=ATHEMATIC STATISTICS_COVARIANCES=138.1712517149589,191.5452585793981,237.5565712845495,522.6371678856232,-1185.24140439538,2391.277470791071,1592.500852970767,109.4827697063441 STATISTICS_MAXIMUM=13262 STATISTICS_MEAN=5033.9045103191 STATISTICS_MEDIAN=4999.529412 STATISTICS_MINIMUM=4372 STATISTICS_SKIPFACTORX=1 STATISTICS_SKIPFACTORY=1 STATISTICS_STDDEV=10.463401440561 WavelengthMax=1380.000000000000000000 WavelengthMin=1360.000000000000000000

Maybe the issue is that my file has:

Coordinate System is: GEOGCRS["WGS 84"

and the file from the example has:

Coordinate System is: PROJCRS["WGS_1984_UTM_Zone_19N"

How do I display the provided *.jp2 file on the map?

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

UndralBatsukh — Mon, 27 Feb 2023 15:45:10 GMT

Hi there,

I tested the jp2 image you provided and is working without any issues using goal_translate you provided. Please set the `TILED=YES` option when generating the COG.

gdal_translate MSAVIC_2022-12-17.jp2 msavic_cog.tif -co "TILED=YES"

In any case, I was able to add and view the cog you created without any issues.

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

KHTRE — Tue, 28 Feb 2023 07:17:46 GMT

That is weird, because I still can't see it on the map.
In order to test my code I have downloaded the TIFF file from this example.
When I load the map I can see a new layer in Bolivia

But when I use the file created by the gdal, it just won't appear on the map where it should.

When you load the layer, can you see it next to the cross of Kansas, Nebraska and Colorado?

Also, the map gets focused in some random spot when I use the converted file.

view.whenLayerView(layer).then(() => { view.goTo(layer.fullExtent); });

This code works as expected for Bolivia, but for my file the map gets focused in the ocean next to Africa and even there I can't see the layer.

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

UndralBatsukh — Tue, 28 Feb 2023 17:29:05 GMT

Hi there,

This is what I see. Are you hosting the image on a different server than your app? If so you need to make sure that the server is CORS enabled. If it is on the same server then you need to make sure that the file can be accessed via HTTPS.

I hosted the COG with your goal_translate options on my GitHub and here is a codepen that shows the image in the right place: https://codepen.io/U_B_U/pen/wvEgmjN?editors=1000

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

KHTRE — Wed, 01 Mar 2023 09:34:00 GMT

Okay...
The URL to your hosted result.tif worked for me just fine.
So, most likely the problem is in the conversion process.
Maybe my GDAL version is wrong...
Interesting thing that Windows shows your file as totally black rectangle while my file is a normal image

What version are you using?

UPD: Yes, it was the issue. I have installed GDAL 3.6.2 and in worked.

gdal_translate -ot UInt16 -of COG MSAVIC_2022-12-17.jp2 msavic_cog14.tif

This works for me now.

Thank you))

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

KHTRE — Wed, 01 Mar 2023 09:45:17 GMT

So, the issue was the GDAL.
I have reinstalled it and the converted files started to work.
My current GDAL version is 3.6.2

topic Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript in ArcGIS JavaScript Maps SDK Questions

How to display *.jp2 using ArcGIS Maps SDK for JavaScript

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript

Re: How to display *.jp2 using ArcGIS Maps SDK for JavaScript