Scene Layer with point geometries | Sample | ArcGIS Maps SDK for JavaScript

<!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 Layer with point geometries | 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;
      }
      h1 {
        position: absolute;
        right: 20px;
        bottom: 0px;
        color: white;
      }
    </style>
  </head>
  <body>
    <arcgis-scene ground="world-elevation">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"> </arcgis-compass>
    </arcgis-scene>
    <div>
      <h1>World cities</h1>
    </div>

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

      // Get a reference to the Scene element
      const viewElement = document.querySelector("arcgis-scene");

      // Setup the renderer with color visual variable
      const renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: {
          type: "point-3d", // autocasts as new PointSymbol3D()
          symbolLayers: [
            {
              type: "icon", // autocasts as new IconSymbol3DLayer()
              size: 0.5,
              material: {
                color: [252, 250, 215],
              },
            },
          ],
        },
      };

      // Create SceneLayer from a Scene Service URL
      const sceneLayer = new SceneLayer({
        url: "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/World_GeoNames_Cities/SceneServer",
        renderer: renderer, // Set the renderer to sceneLayer
        popupTemplate: { title: "{name}" },
        copyright: `Data from <a href="http://www.geonames.org/">GeoNames</a>`,
      });

      const countries = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
        renderer: {
          type: "simple",
          symbol: {
            type: "polygon-3d", // autocasts as new PolygonSymbol3D()
            symbolLayers: [
              {
                type: "fill", // autocasts as new FillSymbol3DLayer()
                material: {
                  color: [0, 0, 0, 0.6],
                },
                outline: {
                  color: [0, 0, 0, 0],
                },
              },
            ],
          },
        },
      });

      // Wait for the view to initialize
      await viewElement.viewOnReady();

      // Add layers
      viewElement.map.addMany([countries, sceneLayer]);

      // Configure the map and the environment
      viewElement.map.ground.surfaceColor = "#0b0d2e";
      viewElement.environment.atmosphereEnabled = false;
    </script>
  </body>
</html>
Other helpful resources
