Issue with Dataset from Planetary Computer Not Loading Data on Map

[vcardins]

Title: Issue with Dataset from Planetary Computer Not Loading Data on Map

Description:

I am experiencing an issue where a particular dataset from the Planetary Computer is not loading data onto the map. This problem appears to be occurring in the use-transform.js file, specifically at line 50. The getBBox() function is returning undefined for all the properties.

Steps to Reproduce:

1. Load the dataset from Planetary Computer: e.g: https://daymeteuwest.blob.core.windows.net/daymet-zarr/daily/hi.zarr.
2. Attempt to visualize the dataset on the map.
3. Notice that no data is being rendered.

Expected Behavior:
The dataset should load and display correctly on the map.

Actual Behavior:
The map remains empty, and the getBBox() function in use-transform.js (line 50) returns undefined.

Error Details:

• File: use-transform.js
• Line: 50
• Function: getBBox()
• Issue: Returning undefined for all properties

Additional Information:

• Dataset source: Planetary Computer
• Relevant code snippet:

const { x, y, width: bWidth, height: bHeight } = getBBox();
// x, y, width and height are undefined

Please let me know if you need any more details or if there is any additional information I can provide to help resolve this issue.

Thank you for your assistance!

[katamartin]

Hi @vcardins -- thanks for the issue and thorough debugging!

I think the underlying issue with the dataset you mention is that it's stored in the lambert_conformal_conic projection using x, y as spatial coordinates, which do not directly contain latitude and longitude values.

I added a basic check for datasets that will hit this limitation in #45, but a more rigorous check -- or actual rendering logic so that the tool may handle coordinates of this sort -- for these datasets will require some more thought.

[vcardins]

@katamartin Thanks for looking into this, I really appreciate it! I confess I'm still struggling to make it work somehow, would you be able to guide towards what fix would be necessary so this dataset could be rendered? Again, many thanks for the support.

[katamartin]

@vcardins unfortunately, there isn't a simple change we can make to extend the tool to handle the limitation described above 😕. The requirement that datasets are provided on an equirectangular grid is currently fundamental to the tool. So if you want to use the tool in this case, I think you would need to modify a copy of daymet.

[vcardins]

@katamartin Thanks again! I dove a bit deeper and found out there is a lib that helps on this conversion: https://www.npmjs.com/package/proj4

Base on the zarr metadata

{
    "_ARRAY_DIMENSIONS": [],
    "false_easting": 0,
    "false_northing": 0,
    "grid_mapping_name": "lambert_conformal_conic",
    "inverse_flattening": 298.257223563,
    "latitude_of_projection_origin": 42.5,
    "longitude_of_central_meridian": -100,
    "semi_major_axis": 6378137,
    "standard_parallel": [
        25,
        60
    ]
}

js code

// Install proj4js (if needed) using npm: npm install proj4
const proj4 = require("proj4");

// Define the Lambert Conformal Conic projection
const lccProj = "+proj=lcc +lat_1=25 +lat_2=60 +lat_0=42.5 +lon_0=-100 +x_0=0 +y_0=0 +a=6378137 +b=6356752.314245179"; // Derived b from inverse flattening

// Create a transformation function
const lccToLonLat = proj4(lccProj, "EPSG:4326"); // EPSG:4326 is the standard for lat/lon (WGS84)

// Sample x, y coordinates (replace with your actual data)
const xCoord = 654321;
const yCoord = 123456;

// Convert x, y to lat, lon
const result = lccToLonLat.forward([xCoord, yCoord]);

console.log("Latitude:", result[1]);
console.log("Longitude:", result[0]);

If you understand it's viable and would like to give me some guidance I could sort it out on my end, or/and even submit a PR if interested.

Thanks!!

[katamartin]

@vcardins ooh great find! I think in addition to the JS logic that Proj4js would provide, we would also need to add logic to the GLSL code responsible for rendering the raster data.

Currently, the shader assumes that the raster grid is equally spaced in lat/lon, and I think that would be the trickiest part to unwind. Doing this in a generalized way both in JS and GLSL would also require some extra care!