Scene memory resources | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Scene memory resources | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #performancePanel {
        max-height: 552px;
        overflow: auto;
        width: 360px;
        color: rgba(215, 215, 215, 0.5);
      }

      #performanceInfo {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <arcgis-scene item-id="1e2765e700774e5b809d5bbd768be6a0">
      <arcgis-home slot="top-left"></arcgis-home>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <calcite-panel id="performancePanel" slot="bottom-right">
        <div id="performanceInfo">
          <calcite-label id="title"></calcite-label>
          <calcite-progress
            id="memoryProgress"
            value="0"
            max="100"
            type="indeterminate"
            style="margin-bottom: 10px"></calcite-progress>
          <calcite-block heading="Memory per layer" open>
            <calcite-list id="memoryList"></calcite-list>
          </calcite-block>
          <calcite-block heading="Feature count per layer" open>
            <calcite-list id="countList"></calcite-list>
          </calcite-block>
        </div>
      </calcite-panel>
    </arcgis-scene>
    <script type="module">
      const viewElement = document.querySelector("arcgis-scene");

      viewElement.viewOnReady(async () => {
        const updatePerformanceInfo = () => {
          const performanceInfo = viewElement.performanceInfo;
          updateMemoryTitle(
            performanceInfo.usedMemory,
            performanceInfo.totalMemory,
            performanceInfo.quality,
          );
          updateMemoryProgress(performanceInfo.usedMemory, performanceInfo.totalMemory);
          updateMemoryList(performanceInfo.layerPerformanceInfos);
          updateCountList(performanceInfo.layerPerformanceInfos);
          setTimeout(updatePerformanceInfo, 250);
        };

        function updateMemoryTitle(used, total, quality) {
          const title = document.getElementById("title");
          title.textContent = `Memory (used/max): ${getMB(used)}MB/${getMB(total)}MB - Quality: ${Math.round(100 * quality)} %`;
        }

        function updateMemoryProgress(used, total) {
          const progress = document.getElementById("memoryProgress");
          const percent = total > 0 ? Math.round((used / total) * 100) : 0;
          progress.value = percent;
          progress.max = 100;
          progress.type = "determinate";
        }

        function updateMemoryList(layerPerformanceInfos) {
          const memoryList = document.getElementById("memoryList");
          // If the number of items has changed, rebuild the list
          if (memoryList.children.length !== layerPerformanceInfos.length) {
            memoryList.textContent = "";
            for (const layerInfo of layerPerformanceInfos) {
              const item = document.createElement("calcite-list-item");
              item.label = layerInfo.layer.title || "Untitled Layer";
              item.description = `${getMB(layerInfo.memory)} MB`;
              memoryList.appendChild(item);
            }
          } else {
            // Otherwise, just update the text content
            for (let i = 0; i < layerPerformanceInfos.length; i++) {
              const item = memoryList.children[i];
              const layerInfo = layerPerformanceInfos[i];
              item.label = layerInfo.layer.title || "Untitled Layer";
              item.description = `${getMB(layerInfo.memory)} MB`;
            }
          }
        }

        function updateCountList(layerPerformanceInfos) {
          const countList = document.getElementById("countList");
          // Filter only layers with maximumNumberOfFeatures
          const filteredInfos = layerPerformanceInfos.filter(
            (layerInfo) => layerInfo.maximumNumberOfFeatures,
          );
          // If the number of items has changed, rebuild the list
          if (countList.children.length !== filteredInfos.length) {
            countList.textContent = "";
            for (const layerInfo of filteredInfos) {
              const item = document.createElement("calcite-list-item");
              item.label = layerInfo.layer.title || "Untitled Layer";
              item.description = `Displayed: ${layerInfo.displayedNumberOfFeatures ?? "-"} / Max: ${layerInfo.maximumNumberOfFeatures ?? "-"}, Total: ${layerInfo.totalNumberOfFeatures ?? "-"}`;
              countList.appendChild(item);
            }
          } else {
            // Otherwise, just update the text content
            for (let i = 0; i < filteredInfos.length; i++) {
              const item = countList.children[i];
              const layerInfo = filteredInfos[i];
              item.label = layerInfo.layer.title || "Untitled Layer";
              item.description = `Displayed: ${layerInfo.displayedNumberOfFeatures ?? "-"} / Max: ${layerInfo.maximumNumberOfFeatures ?? "-"}, Total: ${layerInfo.totalNumberOfFeatures ?? "-"}`;
            }
          }
        }

        function getMB(bytes) {
          const kilobyte = 1024;
          const megabyte = kilobyte * 1024;
          return Math.round(bytes / megabyte);
        }

        updatePerformanceInfo();
      });
    </script>
  </body>
</html>