Create a local scene | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to create a local scene clipped to a specific extent. Two layers are added to the scene in this sample - a layer depicting oil and gas wells in southern Kansas and another showing the locations of nearby earthquakes. These layers are rendered on the surface as well as below the surface of the scene.

scene-local-beneath

You may navigate underneath the basemap to view the exact location of the earthquakes in relation to the true locations and depths of nearby oil and gas wells.

The viewingMode attribute of the Scene Component determines whether the scene is global or local. Set clippingArea to define the bounds of the local scene.

The navigationConstraint property on the Ground controls the user’s ability to navigate below the surface.

// Create a local scene
<arcgis-scene basemap="topo-vector" viewing-mode="local">

// Setting the navigationConstraint on the ground to be of type "none"
// will allow the user to navigate the camera below the surface.
viewElement.map.ground = {
  navigationConstraint: {
    type: "none",
  },
};

// Use the exent defined in clippingArea to define the bounds of the scene
viewElement.clippingArea = kansasExtent;

<!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>Create a local scene | 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;
      }
    </style>
  </head>

  <body>
    <arcgis-scene basemap="topo-vector" viewing-mode="local">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-home slot="top-left"></arcgis-home>
    </arcgis-scene>

    <script type="module">
      const [FeatureLayer, reactiveUtils] = await $arcgis.import([
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/core/reactiveUtils.js",
      ]);

      const wellsUrl =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/HarperSumnerOGWells/FeatureServer/0";
      const quakesUrl =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0";

      // The clipping extent for the scene
      const kansasExtent = {
        // autocasts as new Extent()
        xmax: -10834217,
        xmin: -10932882,
        ymax: 4493918,
        ymin: 4432667,
        spatialReference: {
          // autocasts as new SpatialReference()
          wkid: 3857,
        },
      };

      /********************************************************
       * The popupTemplate that will populate the content of the
       * popup when a well feature is selected
       *******************************************************/

      const wellsTemplate = {
        // autocasts as new PopupTemplate()
        title: "WELL",
        content:
          "<b>API No.:</b> {API_NUMBER}<br>" +
          "<b>Lease: </b> {LEASE}<br>" +
          "<b>Operator: </b> {CURR_OPERATOR} km<br>" +
          "<b>Drilled: </b> {SPUD}<br>" +
          "<b>Completed: </b> {COMPLETION}<br>" +
          "<b>Status: </b> {STATUS2}<br>" +
          "<b>Depth: </b> {DEPTH} meters<br>",
        fieldInfos: [
          {
            fieldName: "SPUD",
            format: {
              dateFormat: "short-date",
            },
          },
          {
            fieldName: "COMPLETION",
            format: {
              dateFormat: "short-date",
            },
          },
          {
            fieldName: "DEPTH",
            format: {
              places: 0,
              digitSeparator: true,
            },
          },
        ],
      };

      /*********************************************************
       * Renderer properties for symbolizing wells on the surface
       *********************************************************/

      const wellsSurfaceRenderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "point-3d", // autocasts as new PointSymbol3D()
          symbolLayers: [
            {
              type: "icon", // autocasts as new IconSymbol3DLayer()
              outline: {
                color: "#444",
              },
              resource: {
                primitive: "x",
              },
              size: 4,
            },
          ],
        },
      };

      /**************************************************
       * Renderer for symbolizing wells below the surface
       **************************************************/

      const startDate = new Date("Thu Jul 25 2013 00:00:00 GMT-0700 (PDT)");
      const endDate = new Date("Mon Nov 09 2015 00:01:40 GMT-0800 (PST)");

      const wellsDepthRenderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "point-3d", // autocasts as new PointSymbol3D()
          symbolLayers: [
            {
              type: "object", // autocasts as new ObjectSymbol3DLayer()
              resource: {
                primitive: "cylinder",
              },
              anchor: "top",
              width: 50,
            },
          ],
        },
        visualVariables: [
          {
            type: "size",
            field: "DEPTH",
            axis: "height",
            valueUnit: "feet",
          },
          {
            type: "size",
            axis: "width",
            useSymbolValue: true, // sets the width to 50m
          },
          {
            type: "color",
            field: "SPUD",
            stops: [
              {
                // From mid-2013
                value: startDate.valueOf(),
                color: "white",
              },
              {
                // to Nov 2015
                value: endDate.valueOf(),
                color: "red",
              },
            ],
          },
        ],
      };

      /**************************************************
       * Layers depicting oil and gas wells in Harper County
       * and Sumner County, Kansas
       **************************************************/

      // Layer for depicting wells below the surface
      const wellsLayer = new FeatureLayer({
        url: wellsUrl,
        definitionExpression:
          "Status = 'CBM' OR Status = 'EOR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
        outFields: ["*"],
        popupTemplate: wellsTemplate,
        renderer: wellsDepthRenderer,
        // This keeps the cylinders from poking above the ground
        elevationInfo: {
          mode: "relative-to-ground",
          offset: -100,
        },
      });

      // Layer for depicting well locations on the surface
      const wellsSurfaceLayer = new FeatureLayer({
        url: wellsUrl,
        definitionExpression:
          "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
        outFields: ["*"],
        popupTemplate: wellsTemplate,
        renderer: wellsSurfaceRenderer,
        elevationInfo: {
          mode: "on-the-ground",
        },
      });

      /********************************************************
       * Renderer for symbolizing earthquakes below the surface
       *
       * Earthquakes will be symbolized as spheres. The size of
       * each will coincide with the magnitude of the earthquake,
       * while the color will indicate the date at which the
       * earthquake occured. The more white the color, the older the
       * earthquake. The deeper the red, the more recent the
       * earthquake occurred.
       *******************************************************/

      const quakesRenderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "point-3d", // autocasts as new PointSymbol3D()
          symbolLayers: [
            {
              type: "object", // autocasts as new ObjectSymbol3DLayer()
              resource: {
                primitive: "sphere",
              },
            },
          ],
        },
        visualVariables: [
          {
            type: "color",
            field: "date_evt",
            stops: [
              {
                // From mid-2013
                value: startDate.valueOf(),
                color: "white",
              },
              {
                value: endDate.valueOf(),
                color: "red",
              },
            ], // to Nov. 2015
          },
          {
            type: "size",
            field: "mag",
            axis: "all",
            stops: [
              {
                value: 2,
                size: 100,
              },
              {
                value: 5,
                size: 2000,
              },
            ],
          },
        ],
      };

      /********************************************************
       * Renderer for symbolizing earthquakes on the surface
       *******************************************************/

      // Quakes will be symbolized as circles
      const surfaceSym = {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [
          {
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
              color: [179, 75, 75],
            },
            resource: {
              primitive: "circle",
            },
          },
        ],
      };

      // Symbol size will vary depending on magnitude of the quake
      const quakesSurfaceRenderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: surfaceSym,
        visualVariables: [
          {
            type: "size",
            field: "mag",
            axis: "all",
            stops: [
              {
                value: 2,
                size: 3,
              },
              {
                value: 5,
                size: 50,
              },
            ],
          },
        ],
      };

      /********************************************************
       * The popupTemplate that will populate the content of the
       * popup when an earthquake feature is selected
       *******************************************************/

      const quakeTemplate = {
        // autocasts as new PopupTemplate()
        title: "{place}",
        content:
          "<b>Date and time:</b> {date_evt}<br>" +
          "<b>Magnitude (0-10): </b> {mag}<br>" +
          "<b>Depth: </b> {depth} km<br>",
        fieldInfos: [
          {
            fieldName: "date_evt",
            format: {
              dateFormat: "short-date-short-time",
            },
          },
        ],
        actions: [
          {
            id: "find-wells",
            title: "Nearby wells",
            className: "esri-icon-notice-round",
          },
        ],
      };

      /********************************************************
       * Create earthquakes layers (one on the surface and one
       * below the surface to show actual location).
       *******************************************************/

      // Defines a layer for drawing the exact location of quakes below the surface
      const quakesDepthLayer = new FeatureLayer({
        url: quakesUrl,
        // Show only quakes of magnitude 2.0 or higher
        definitionExpression: "mag >= 2",
        outFields: ["*"],
        renderer: quakesRenderer,
        popupTemplate: quakeTemplate,
        returnZ: true,
        elevationInfo: {
          mode: "relative-to-ground",
        },
      });

      // Defines a layer for depicting quakes on the surface
      const quakesSurfaceLayer = new FeatureLayer({
        url: quakesUrl,
        definitionExpression: "mag >= 2",
        outFields: ["*"],
        renderer: quakesSurfaceRenderer,
        popupTemplate: quakeTemplate,
        opacity: 0.6,
        elevationInfo: {
          mode: "on-the-ground",
        },
      });

      // Get the reference to the Scene component
      const viewElement = document.querySelector("arcgis-scene");
      await viewElement.viewOnReady();

      // Fill map with the above defined layers.
      viewElement.map.layers = [
        quakesDepthLayer,
        quakesSurfaceLayer,
        wellsLayer,
        wellsSurfaceLayer,
      ];
      // Setting the navigationConstraint on the ground to be of type "none"
      // will allow the user to navigate the camera below the surface.
      viewElement.map.ground = {
        navigationConstraint: {
          type: "none",
        },
      };

      // Use the exent defined in clippingArea to define the bounds of the scene
      viewElement.clippingArea = kansasExtent;
      viewElement.cameraTilt = 70;
      viewElement.extent = kansasExtent;
      // Turns off atmosphere and stars settings
      viewElement.environment = {
        atmosphereEnabled: false,
        starsEnabled: false,
      };

      /********************************************************
       * Set up action for returning the number of wells within
       * 10km of the earthquake.
       *******************************************************/

      // Default parameters for selecting wells within 10km of click
      const wellsBufferParams = {
        spatialRelationship: "esriSpatialRelIntersects",
        distance: 10,
        units: "kilometers",
        where:
          "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
      };

      reactiveUtils.on(
        () => viewElement.popup,
        "trigger-action",
        (event) => {
          if (event.action.id === "find-wells") {
            wellsBufferParams.geometry = viewElement.popup.selectedFeature.geometry;
            wellsLayer
              .queryFeatureCount(wellsBufferParams)
              .then((response) => {
                const results = `<b>${response}</b> active wells are within 10 km of this earthquake.`;
                viewElement.popup.content = results;
              })
              .catch((error) => {
                console.log("action failed: ", error);
              });
          } else {
            return;
          }
        },
      );
    </script>
  </body>
</html>