Globes and local scenes | ArcGIS Maps SDK for JavaScript

Global and local scenes using different projections to display the same basemap layer and feature layer

What are global and local scenes?

Global and local scenes are different viewing modes you can use to visualize 3D data. When you work with a scene , you choose whether to render the data on a globe or to project it on a plane that can be navigated in 3D space.

A global scene is typically used to display data that spans around the globe when viewing the curvature of the earth is important.

A local scene is a projected view of a surface that is typically used for smaller extents. It is useful when visualizing data such as a country or a city. To show only a region of interest, you can clip a local scene to an extent.

In both global and local scenes, you can display data below the ground and navigate below and above the ground.

How to create a scene

To create a global or local scene, you define the basemap layer and data layers to display and then set the camera properties.

Define the scene

The first step is to create the scene with a basemap layer and/or data layers . You can also reference an elevation service to display the scene with relief.

26 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Globes and local scenes</title>
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- 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>

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


      // In the ArcGIS JS API, the Map class is used
      // to define both maps and scenes.
      const map = new Map({
        basemap: "gray-vector",
        ground: "world-elevation",
      });
95 collapsed lines



      const sceneView = new SceneView({
        map: map,
        camera: {
          position: [-41.18215285, -86.13467977, 9321113.29449],
          heading: 359.73,
          tilt: 68.57,
        },
        viewingMode: "local",

        container: "view2Div",
      });

      const globeView = new SceneView({
        container: "view1Div",
        map: map,
        viewingMode: "global",
        environment: {
          background: {
            type: "color",
            color: [255, 255, 255, 1],
          },
          starsEnabled: false,
          atmosphereEnabled: false,
        },
      });

      const populationLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
        definitionExpression: "POP > 10000000",
        elevationInfo: {
          mode: "on-the-ground",
        },
        renderer: {
          type: "simple",
          symbol: {
            type: "point-3d",
            symbolLayers: [
              {
                type: "object",
                resource: { primitive: "cylinder" },
                material: { color: "#4c397f" },
                depth: 50000,
                height: 1000000,
                width: 50000,
                anchor: "bottom",
              },
              {
                type: "icon",
                resource: { primitive: "circle" },
                material: { color: [76, 57, 127, 0.1] },
                outline: {
                  color: [76, 57, 127, 0.8],
                },
                size: 15,
              },
            ],
          },
        },
        labelingInfo: [
          new LabelClass({
            labelExpressionInfo: { expression: "$feature.CITY_NAME" },
            symbol: {
              type: "label-3d",
              symbolLayers: [
                {
                  type: "text", // autocasts as new TextSymbol3DLayer()
                  material: { color: "#4c397f" },
                  size: 10,
                  font: {
                    family: "Open Sans",
                    weight: "bold",
                  },
                  halo: {
                    color: "white",
                    size: 1,
                  },
                },
              ],
            },
          }),
        ],
      });

      map.add(populationLayer);
    </script>
  </head>

  <body>
    <div id="view1Div" style="float: left; width: 50%; height: 100%"></div>
    <div id="view2Div" style="float: left; width: 50%; height: 100%"></div>
  </body>
</html>

Set the camera

Now display the scene using a scene view . You set the scene view’s perspective of the scene by defining the scene view’s camera , specifying the camera’s location (including height), heading, and tilt (or pitch).

Use the scene view to specify whether the viewing mode is local or global.

35 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Globes and local scenes</title>
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- 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>

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


      // In the ArcGIS JS API, the Map class is used
      // to define both maps and scenes.
      const map = new Map({
        basemap: "gray-vector",
        ground: "world-elevation",
      });



      const sceneView = new SceneView({
        map: map,
        camera: {
          position: [-41.18215285, -86.13467977, 9321113.29449],
          heading: 359.73,
          tilt: 68.57,
        },
        viewingMode: "local",
84 collapsed lines

        container: "view2Div",
      });

      const globeView = new SceneView({
        container: "view1Div",
        map: map,
        viewingMode: "global",
        environment: {
          background: {
            type: "color",
            color: [255, 255, 255, 1],
          },
          starsEnabled: false,
          atmosphereEnabled: false,
        },
      });

      const populationLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
        definitionExpression: "POP > 10000000",
        elevationInfo: {
          mode: "on-the-ground",
        },
        renderer: {
          type: "simple",
          symbol: {
            type: "point-3d",
            symbolLayers: [
              {
                type: "object",
                resource: { primitive: "cylinder" },
                material: { color: "#4c397f" },
                depth: 50000,
                height: 1000000,
                width: 50000,
                anchor: "bottom",
              },
              {
                type: "icon",
                resource: { primitive: "circle" },
                material: { color: [76, 57, 127, 0.1] },
                outline: {
                  color: [76, 57, 127, 0.8],
                },
                size: 15,
              },
            ],
          },
        },
        labelingInfo: [
          new LabelClass({
            labelExpressionInfo: { expression: "$feature.CITY_NAME" },
            symbol: {
              type: "label-3d",
              symbolLayers: [
                {
                  type: "text", // autocasts as new TextSymbol3DLayer()
                  material: { color: "#4c397f" },
                  size: 10,
                  font: {
                    family: "Open Sans",
                    weight: "bold",
                  },
                  halo: {
                    color: "white",
                    size: 1,
                  },
                },
              ],
            },
          }),
        ],
      });

      map.add(populationLayer);
    </script>
  </head>

  <body>
    <div id="view1Div" style="float: left; width: 50%; height: 100%"></div>
    <div id="view2Div" style="float: left; width: 50%; height: 100%"></div>
  </body>
</html>

Examples

Create a globe

This example displays earthquake data on a globe. The scene uses the Vintage Shaded Relief layer as a basemap. Additionally the earthquakes data layer is loaded as a CSV layer. Set the scene on a scene view along with a camera position and a global viewing mode.

66 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Earthquakes on a globe</title>
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <script type="module">
      const [Map, CSVLayer, SceneView, TileLayer, Basemap] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/CSVLayer.js",
        "@arcgis/core/views/SceneView.js",
        "@arcgis/core/layers/TileLayer.js",
        "@arcgis/core/Basemap.js",
      ]);

      // If CSV files are not on the same domain as your website, a CORS enabled server
      // or a proxy is required.
      const url =
        "https://developers.arcgis.com/javascript/latest/assets/sample-code/layers-csv/earthquakes.csv";

      // Paste the url into a browser's address bar to download and view the attributes
      // in the CSV file. These attributes include:
      // * mag - magnitude
      // * type - earthquake or other event such as nuclear test
      // * place - location of the event
      // * time - the time of the event

      const template = {
        title: "Earthquake Info",
        content: "Magnitude {mag} {type} hit {place} on {time}.",
      };

      const csvLayer = new CSVLayer({
        url: url,
        copyright: "USGS Earthquakes",
        popupTemplate: template,
      });

      csvLayer.renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "point-3d", // autocasts as new PointSymbol3D()
          // for this symbol we use 2 symbol layers, one for the outer circle
          // and one for the inner circle
          symbolLayers: [
            {
              type: "icon", // autocasts as new IconSymbol3DLayer()
              resource: { primitive: "circle" },
              material: { color: [255, 84, 54, 0.6] },
              size: 5,
            },
            {
              type: "icon", // autocasts as new IconSymbol3DLayer()
              resource: { primitive: "circle" },
              material: { color: [255, 84, 54, 0] },
              outline: { color: [255, 84, 54, 0.6], size: 1 },
              size: 10,
            },
          ],
        },
      };


      const map = new Map({
        basemap: new Basemap({
          baseLayers: [
            new TileLayer({
              url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/VintageShadedRelief/MapServer",
            }),
          ],
        }),
        layers: [csvLayer],
      });

      const view = new SceneView({
        container: "viewDiv",
        map: map,
        // Indicates to create a global scene
        viewingMode: "global",
        camera: {
          position: [-63.77153412, 20.75790715, 25512548.0],
          heading: 0.0,
          tilt: 0.1,
        },
38 collapsed lines

        constraints: {
          altitude: {
            min: 700000,
          },
        },
        alphaCompositingEnabled: true,
        environment: {
          background: {
            type: "color",
            color: [0, 0, 0, 0],
          },
          atmosphere: null,
          starsEnabled: false,
        },
      });
      view.highlights.items[0].fillOpacity = 0;
      view.highlights.items[0].color = "#ffffff";
    </script>

    <style>
      html,
      body,
      #viewDiv {
        background-color: aliceblue;
        height: 100%;
        margin: 0;
      }
      .esri-legend {
        background-color: rgba(255, 255, 255, 0.8);
      }
    </style>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Create a local scene

This example displays earthquakes in a clipped, local scene. The Scene component displays a basemap and earthquake data that is displayed below the ground plane. Enable navigation below the ground to permit exploring the earthquakes. Additionally, the Scene component uses a clipping extent to display only the area of interest.

20 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Local earthquakes</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        background-color: aliceblue;
      }
    </style>
  </head>

  <body>

    <arcgis-scene
      viewing-mode="local"
      camera-position="-98.3640816, 36.4211506, 26124.42603"
      camera-heading="32.37"
      camera-tilt="78.08">
139 collapsed lines

      <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 [Map, FeatureLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
      ]);

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

      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 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: [255, 255, 255],
              },
              {
                value: endDate.valueOf(),
                color: [255, 84, 54],
              },
            ], // to Nov. 2015
          },
          {
            type: "size",
            field: "mag",
            axis: "all",
            stops: [
              {
                value: 2,
                size: 100,
              },
              {
                value: 5,
                size: 2000,
              },
            ],
          },
        ],
      };

      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",
          },
        ],
      };

      // 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",
        },
      });

      // get the arcgis-scene component element and set its properties
      const viewElement = document.querySelector("arcgis-scene");
      viewElement.map = new Map({
        basemap: "topo-vector",
        layers: [quakesDepthLayer],
      });


      viewElement.ground = {
        navigationConstraint: {
          type: "none",
        },
        opacity: 0.8,
      };

      // Use the extent defined in clippingArea to define the bounds of the scene
      viewElement.clippingArea = {
        xmax: -10834217,
        xmin: -10932882,
        ymax: 4493918,
        ymin: 4432667,
        spatialReference: {
          wkid: 3857,
        },
      };


      // Turns off atmosphere and stars settings
      viewElement.environment = {
        atmosphere: null,
        starsEnabled: false,
      };
    </script>
  </body>
</html>

137 collapsed lines
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Local earthquakes</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        background-color: aliceblue;
      }
    </style>
  </head>

  <body>

    <arcgis-scene
      viewing-mode="local"
      camera-position="-98.3640816, 36.4211506, 26124.42603"
      camera-heading="32.37"
      camera-tilt="78.08">

      <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 [Map, FeatureLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
      ]);

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

      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 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: [255, 255, 255],
              },
              {
                value: endDate.valueOf(),
                color: [255, 84, 54],
              },
            ], // to Nov. 2015
          },
          {
            type: "size",
            field: "mag",
            axis: "all",
            stops: [
              {
                value: 2,
                size: 100,
              },
              {
                value: 5,
                size: 2000,
              },
            ],
          },
        ],
      };

      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",
          },
        ],
      };

      // 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",
        },
      });

      // get the arcgis-scene component element and set its properties
      const viewElement = document.querySelector("arcgis-scene");
      viewElement.map = new Map({
        basemap: "topo-vector",
        layers: [quakesDepthLayer],
      });


      viewElement.ground = {
        navigationConstraint: {
          type: "none",
        },
        opacity: 0.8,
      };

      // Use the extent defined in clippingArea to define the bounds of the scene
      viewElement.clippingArea = {
        xmax: -10834217,
        xmin: -10932882,
        ymax: 4493918,
        ymin: 4432667,
        spatialReference: {
          wkid: 3857,
        },
      };
10 collapsed lines


      // Turns off atmosphere and stars settings
      viewElement.environment = {
        atmosphere: null,
        starsEnabled: false,
      };
    </script>
  </body>
</html>

3D visualizationIntroduction 3D visualizationTerrain rendering