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

[KHTRE]

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:

Spoiler

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:

Spoiler

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?

[UndralBatsukh]

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. 

[KHTRE]

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.

[UndralBatsukh]

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 

[KHTRE]

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

[KHTRE · Accepted solution]

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