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

BruceGodfrey · ‎08-22-2016

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?

RobertScheitlin__GISP · ‎08-24-2016

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

View solution in original post

RobertScheitlin__GISP · ‎08-24-2016

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

BruceGodfrey · ‎08-25-2016

That is very helpful. Thank you Robert. -Bruce

RobertScheitlin__GISP · ‎08-25-2016

Bruce,

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