How do you display in table form the information from an imagery layer's raster attribute table?

BruceGodfrey — Tue, 23 Aug 2016 04:48:30 GMT

The sample Work with an imagery layer's raster attribute table | ArcGIS API for JavaScript 4.0 shows how to display on the map pixels for specific values. What code would you add to the sample to show the field names and their attributes as a table to go with the map?

Re: How do you display in table form the information from an imagery layer's raster attribute table?

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:52:37 GMT

Bruce,

Here is some sample code that does that:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Work with an imagery layer's raster attribute table - 4.0</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #sidebar {
      z-index: 99;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      width: 320px;
    }

    #text {
      color: white;
      padding: 3%;
    }

    #raTable {
      font-size: 16px;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      background-color: #fff;
      color: black;
    }

    #raTable caption {
      margin-bottom: 6px;
      color: white;
      font-weight: bolder;
    }

    #raTable table, th, td {
      border: 1px solid white;
    }

    #raTable th {
      padding: 4px;
      background-color: #4CAF50;
      color: white;
    }

    #raTable tr:nth-child(even) {
      background-color: #dffae0;
    }

    #raTable td {
      padding: 4px;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/ImageryLayer",
        "dojo/_base/array",
        "dojo/_base/html",
        "dojo/_base/lang",
        "dojo/domReady!"
      ],
      function(
        Map, MapView,
        ImageryLayer,
        arrayUtil,
        html,
        lang
      ) {

        var rasterAttributes;

        /********************
         * Create image layer
         ********************/

        var layer = new ImageryLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer"
        });

        /**************************
         * Add image layer to map
         *************************/

        var map = new Map({
          basemap: "dark-gray",
          layers: [layer]
        });

        view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-112.6, 39.6],
          zoom: 6,
          padding: {
            right: 320 // Same value as the #sidebar width in CSS
          }
        });

        layer.then(function() {
          rasterAttributes = layer.rasterAttributeTable.features;
          var tbl = html.byId("raTable");
          arrayUtil.map(rasterAttributes, lang.hitch(this, function(item, i){
            var row = tbl.insertRow(tbl.rows.length);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = item.attributes.OID;
            cell2.innerHTML = item.attributes.Value;
            cell3.innerHTML = item.attributes.Count;
            cell4.innerHTML = item.attributes.ClassName;
          }));
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div id="sidebar">
      <div id="text">
        <table id="raTable">
          <caption>Raster Attributes</caption>
          <tr>
            <th>OID</th>
            <th>Value</th>
            <th>Count</th>
            <th>Class Name</th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do you display in table form the information from an imagery layer's raster attribute table?

BruceGodfrey — Thu, 25 Aug 2016 20:04:13 GMT

That is very helpful. Thank you Robert. -Bruce

Re: How do you display in table form the information from an imagery layer's raster attribute table?

RobertScheitlin__GISP — Thu, 25 Aug 2016 20:07:41 GMT

Bruce,

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

topic How do you display in table form the information from an imagery layer's raster attribute table? in ArcGIS JavaScript Maps SDK Questions

How do you display in table form the information from an imagery layer's raster attribute table?

Re: How do you display in table form the information from an imagery layer's raster attribute table?

Re: How do you display in table form the information from an imagery layer's raster attribute table?

Re: How do you display in table form the information from an imagery layer's raster attribute table?