Alter terrain based on defined area

CesiumJS
1

I am trying to exaggerate the terrain if the area falls within the pre-defined red rectangle area.
However, with the current code below, Im getting the entire globe exaggerated.

Can anyone advise?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.3.0/turf.min.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
  <div id="toolbar" style="position: absolute; top: 10px; left: 10px; z-index: 100;">
    Vertical Exaggeration: <input type="range" min="0" max="10" step="0.1" value="1" id="exaggerationRange">
    <span id="exaggerationValue"></span>
  </div>

  <script type="module">
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MjViMDdiOC02OTBlLTQyYjgtOTcyYy02YTYzNjczNDgxN2QiLCJpZCI6MjI2NDQ1LCJpYXQiOjE3MjAxMDMzNjV9.tSVOLKfyeiR0kn1e0G13O2PA6E8dLU3J6531muHF16g';

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });

    const geoJsonMountainPolygon = {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Polygon",
        coordinates: [[
          [-122.5, 37.6],
          [-122.4, 37.6],
          [-122.4, 37.7],
          [-122.5, 37.7],
          [-122.5, 37.6]
        ]]
      }
    };

    function isCameraInsidePolygon(polygonCoordinates, cameraPosition) {
      const bbox = {
        minLon: Math.min(...polygonCoordinates.map(coord => coord[0])),
        maxLon: Math.max(...polygonCoordinates.map(coord => coord[0])),
        minLat: Math.min(...polygonCoordinates.map(coord => coord[1])),
        maxLat: Math.max(...polygonCoordinates.map(coord => coord[1]))
      };

      return (
        cameraPosition.longitude >= bbox.minLon &&
        cameraPosition.longitude <= bbox.maxLon &&
        cameraPosition.latitude >= bbox.minLat &&
        cameraPosition.latitude <= bbox.maxLat
      );
    }

    // Function to update the vertical exaggeration within the red polygon
    function updateExaggeration() {
      const exaggerationRange = document.getElementById('exaggerationRange');
      const exaggerationValue = Number(exaggerationRange.value);

      // Define a point within the red polygon
      const pointInPolygon = turf.point([-122.45, 37.65]);
      const isInsidePolygon = turf.booleanPointInPolygon(pointInPolygon, geoJsonMountainPolygon);

      if (isInsidePolygon) {
        viewer.scene.verticalExaggeration = exaggerationValue;
      } else {
        viewer.scene.verticalExaggeration = 1.0; // Set default exaggeration for outside polygon
      }

      // Update the value display
      const exaggerationValueDisplay = document.getElementById('exaggerationValue');
      exaggerationValueDisplay.innerText = exaggerationValue;
    }

    // Bind the input range to update the exaggeration
    const exaggerationRange = document.getElementById('exaggerationRange');
    exaggerationRange.addEventListener('input', updateExaggeration);



    const mountainPolygonEntity = viewer.entities.add({
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
          -122.5, 37.6,
          -122.4, 37.6,
          -122.4, 37.7,
          -122.5, 37.7,
          -122.5, 37.6
        ]),
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK
      }
    });

    // Update the camera position
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      }
    });
  </script>

</body>

</html>

I only want the area that falls within the red polygon to be exaggerated when I use the slider. Any areas outside of this should remain as is