NDVI Visualization with Custom Colours returns Colour Values on Click instead of actual Pixel Value

Dear Community, I am using SH evalscript to compute ndvi and render the layer on my application. The issue is that when users clic on a pixel within the ndvi image that SH returns, they see the colour array values and not the actual ndvi value as the pixel value. Is there away around this?

example code:

//VERSION=3
function setup() {
  return {
    input: [{
      bands:["B04", "B08"],
    }],
    output: {
      id: "default",
      bands: 3,
    }
  }
}

function evaluatePixel(sample) {
    let ndvi = (sample.B08 - sample.B04) / (sample.B08 + sample.B04)
    
    if (ndvi<-0.5) return [0.05,0.05,0.05]
    else if (ndvi<-0.2) return [0.75,0.75,0.75]
    else if (ndvi<-0.1) return [0.86,0.86,0.86]
    else if (ndvi<0) return [0.92,0.92,0.92]
    else if (ndvi<0.025) return [1,0.98,0.8]
    else if (ndvi<0.05) return [0.93,0.91,0.71]
    else if (ndvi<0.075) return [0.87,0.85,0.61]
    else if (ndvi<0.1) return [0.8,0.78,0.51]
    else if (ndvi<0.125) return [0.74,0.72,0.42]
    else if (ndvi<0.15) return [0.69,0.76,0.38]
    else if (ndvi<0.175) return [0.64,0.8,0.35]
    else if (ndvi<0.2) return [0.57,0.75,0.32]
    else if (ndvi<0.25) return [0.5,0.7,0.28]
    else if (ndvi<0.3) return [0.44,0.64,0.25]
    else if (ndvi<0.35) return [0.38,0.59,0.21]
    else if (ndvi<0.4) return [0.31,0.54,0.18]
    else if (ndvi<0.45) return [0.25,0.49,0.14]
    else if (ndvi<0.5) return [0.19,0.43,0.11]
    else if (ndvi<0.55) return [0.13,0.38,0.07]
    else if (ndvi<0.6) return [0.06,0.33,0.04]
  	else if (ndvi<0.65) return [0.44,0.64,0.25]
    else if (ndvi<0.7) return [0.38,0.59,0.21]
    else if (ndvi<0.75) return [0.31,0.54,0.18]
    else if (ndvi<0.8) return [0.25,0.49,0.14]
    else if (ndvi<0.85) return [0.19,0.43,0.11]
    else if (ndvi<0.9) return [0.13,0.38,0.07]
    else if (ndvi<0.95) return [0.06,0.33,0.04]
    else return [0,0.27,0]
}

and when one clicks on a pixel whose ndvi value is supposed to be between 90 and 94 for example in the above scrept, the value 0.06 would pop up (and this is not true).

Hey, this was already answered in How to get NDVI index value of the pixel, where more resources are linked.

To briefly answer, Leaflet only returns the value that is in the image at that pixel.

If the visualization is not that important, you can return the actual NDVI value in the evalscript, so the value returned by Leaflet will be correct. But as mentioned, the visualization will probably not be the desired one.

In EO Browser, this is solved by getting the coordinates of the click (actually, the coordinates of the marker placed by a user), creating a small geometry around that location, and making a request to Statistical API to get the NDVI value.
Processing API could be used instead, with width and height of the returned image set to 1px (to make it easier to get the value out).

Hope this helps.

Cheers.

1 Like

Dear z.cern,

Thank you so much! your clarifications and resources have been immensly useful.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.