title: Issues to show point cloud density using javascript API
body: <p>I have a  sample which shows how to change size and density of points in a PointCloudLayer. Each PointCloudLayer renderer has two properties: <strong>pointSizeAlgorithm</strong> and <strong>pointsPerInch</strong>. One can change the point size and the other can change the point density.</p>
  <p>For me , the point size is working fine, but I am facing issues with point density, whatever I select on my bar, it didn’t reflect in the map.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta
        name="viewport"
        content="initial-scale=1,maximum-scale=1,user-scalable=no"
      /&gt;
      &lt;title&gt;
        PointCloudLayer - change point size and density | Sample | ArcGIS API for
        JavaScript 4.21
      &lt;/title&gt;
      &lt;style&gt;
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
  
        #paneDiv {
          width: 270px;
          padding: 15px;
          font-size: 14px;
        }
  
        .title {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
        }
  
        .slider {
          margin: 20px 0;
          height: 40px;
          width: 95%;
        }
      &lt;/style&gt;
  
      &lt;link
        rel="stylesheet"
        href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
      /&gt;
      &lt;script src="https://js.arcgis.com/4.21/"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        require([
          "esri/Map",
          "esri/views/SceneView",
          "esri/layers/PointCloudLayer",
          "esri/widgets/Slider"
        ], (Map, SceneView, PointCloudLayer, Slider) =&gt; {
          // create slider for point size
          const selectedPointsSize = 5;
          const pointsizeSlider = new Slider({
            container: "point-size-slider",
            min: 1,
            max: 15,
            values: [selectedPointsSize],
            steps: 0.5,
            snapOnClickEnabled: false,
            visibleElements: {
              labels: true,
              rangeLabels: true
            }
          });
          // watch for changes on the sliders and update the renderer according to the new values
          pointsizeSlider.on(
            ["thumb-change", "thumb-drag"],
            pointsizeValueChanged
          );
          function pointsizeValueChanged(event) {
            const newRenderer = pcLayer.renderer.clone();
            newRenderer.pointSizeAlgorithm.size = event.value;
            pcLayer.renderer = newRenderer;
          }
  
          // create slider for point size
          const selectedPointsPerInch = 5;
          const pointsperinchSlider = new Slider({
            container: "points-per-inch-slider",
            min: 1,
            max: 40,
            values: [selectedPointsPerInch],
            steps: 1,
            snapOnClickEnabled: false,
            visibleElements: {
              labels: true,
              rangeLabels: true
            }
          });
          // watch for changes on the sliders and update the renderer according to the new values
          pointsperinchSlider.on(
            ["thumb-change", "thumb-drag"],
            pointsperinchValueChanged
          );
          
  
          // create map and view
          const map = new Map({
            basemap: "gray-vector",
            ground: "world-elevation"
          });
  
          const view = new SceneView({
            container: "viewDiv",
            map: map,
            camera: {
              heading: 210,
              tilt: 78,
              position: {
                x: -8249335,
                y: 4832005,
                z: 50.7,
                spatialReference: {
                  wkid: 3857
                }
              }
            }
          });
  
          // create Point Cloud Layer with a renderer with set values for point size and point density
          const pcLayer = new PointCloudLayer({
            url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer",
            renderer: {
              type: "point-cloud-rgb", // autocasts as new pointCloudRGBRenderer()
              field: "RGB",
              pointSizeAlgorithm: {
                type: "fixed-size",
                useRealWorldSymbolSizes: false,
                size: 5
              },
              pointsPerInch: 5
            }
          });
  
          // add layer to the map
          map.add(pcLayer);
          // add panel to the map
          view.ui.add(document.getElementById("paneDiv"), "bottom-left");
        });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="viewDiv"&gt;&lt;/div&gt;
      &lt;div id="paneDiv" class="esri-widget"&gt;
        &lt;div class="title"&gt;Customize point cloud layer:&lt;/div&gt;
        &lt;div&gt;Point size:&lt;/div&gt;
        &lt;div id="point-size-slider" class="slider"&gt;&lt;/div&gt;
        &lt;div&gt;Points per inch:&lt;/div&gt;
        &lt;div id="points-per-inch-slider" class="slider"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>