Generate list of legend's RGB colors and values in ArcGIS

Question

I am writing a node/typescript app that analyzes raster data. It uses leaflet and esri-leaflet quite a bit (modified to work server-side). For a given map bounds, it can download a raster image from ArcGIS server, and for a given latlng, it can tell you a pixel's rgba value from the raster image.

What I want to do is then map the RGBA value to its meaning according to the map's legend. Take this layer for example:

There are an absolute ton of values available in the legend. I don't want to have to guess at the rgba values, or use some kind of color-getter app to do it one by one. I need a legend that has the actual RGB(A) values of these colors listed, so I can then map my latlng value back to a meaningful value.

Most of this code runs in a node server, but to give you something to play with, I reacreated a playground in a codesandbox. Let's say I'm working with layer 30 of the LANDFIRE dataset, which is vegetation condition class. I created a map which fetches the raster image based on the map's bounds and zoom, writes the image to a canvas, and then reads the RGB values on the fly:

Codesandbox Playground

Here's the app without the code. It acts a little wonky sometimes to don't be afraid to reload, and give it a second on load, zoom, and pan events.

As you mouseover the map, you get the rgb values of the pixels instantly, because the whole dataset is downloaded in one swoop as an image. For this particular raster data, arcgis online has this legend. I want to be able to map the pixels back to the actual values represented by the colors, i.e. instead of seeing the rgb values in my little box, I want to see the ground cover type, tree cover %, or whatever the legend contains.

How can I get the legend's color values as a list of RGBA: Layer Value pairs programatically?

Answer 1

I would start by getting the legend in json and not HTML.
In the case of your layer, this would be the address and how to get your specific layer:

var url = "https://landfire.cr.usgs.gov/arcgis/rest/services/Landfire/US_200/MapServer/legend?f=pjson";
var legend;
fetch(url)
   .then(response => response.json())
   .then(data => {
     legend = data.layers[30]["legend"]
   });

Thanks to this answer I found that you could then create a canvas element (without adding it to the map) where you could draw the images and get the pixel values, this is the example for the second elemn in the legend (because the first was just black No Data.

var cnvs = document.createElement('canvas')
var context = cnvs.getContext('2d')
var imageSrc = "data:image/png;base64,"+legend[5].imageData
var image = new Image(20, 20);
image.src = imageSrc;
context.drawImage(image, 0, 0)
var color = context.getImageData(10, 10, 1, 1).data

The value you get back is an array of [r,g,b,a] which you can compare to the value you are getting from your mouse, the legend has the label value which you can use in your app.