//all of the functions need to be called out in the require section:
require([
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/layers/support/LabelClass"
      ], function(WebScene, SceneView, FeatureLayer, LabelClass) {
   
  ///I am using a webscene here, and I am calling it 'map', no basemap, and the surface color is the ball's color (ocean)
        var map = new WebScene({
          basemap: null,
          ground: {
            surfaceColor: '#004C73'
          }
        });
  
///Creating the SceneView, I have changed the 'environment' to remove the stars, the atmopohere, and the lighting. I get rid of the background as well
        var view = new SceneView({
          container: "view",
          map: map,
          alphaCompositingEnabled: true,
          center: [90.168214, 18.808395],
          scale: 50000000000,
          constraints: {
            altitude: {
                 min: 19000000,
                 max: 26000000
            }
              },
          environment: {
            starsEnabled: false,
            atmosphereEnabled: false,
            lighting: {
  date: "Sun Jul 15 2018 15:30:00 GMT+0900 (W. Europe Daylight Time)"
},
            background: {
              type: "color",
              color: [0, 0, 0, 0]
               },
              
          }
        });

  ///get rid of UI
   view.ui.empty("top-left");
  
  ///add a feature service, these are country boundaries, creating my own basemap
   var countryBoundaries = new FeatureLayer({
          url: "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
          title: "World Countries",
  // we use a simple renderer when we want to symbolize all features with the same symbol, how the feature service will look
           renderer: {
           type: "simple",
           symbol: {
            type: "polygon-3d",
            symbolLayers: [{
            type: "fill",
        material: { color: [255, 255, 213, 0.5] },
        outline: {
          color: [0,0,0, 1]
        }
      }]
    }
  }
});
 
 ////Creaitng a popup template, forcing popup to only show title, forcing popup to close when map is moved or clicked off of popup
    var popup = {
          title: "{CITY_NAME}, {CNTRY_NAME} has a Population of {POP}",
      }
    view.popup.collapsed = true; 
    view.popup.autoCloseEnabled = true;
  
 ////First Population layer that will be used for labeling, uses callouts and vertical offsets to make a 3D effect
   var populationLayer = new FeatureLayer({
     url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
      definitionExpression: "POP > 5000000",
     outFields: ["CITY_NAME","CNTRY_NAME","POP"],
     popupTemplate: popup,
     renderer: {
      type: "simple",
      symbol: {
      type: "point-3d",
      symbolLayers: [{
       type: "icon",
      size: 9,
      resource: { primitive: "circle" },
      material: { color: "#000040" },
      outline: {
        size: 1,
        color: "white"
      }
    }],
    verticalOffset: {
      screenLength: 25
    },
    callout: {
      type: "line", // autocasts as new LineCallout3D()
      size: 2.5,
      color: "#1846ed"
    }
  }
     }
});
 
////add a label to the above layer, using the label expression
   populationLayer.labelingInfo = [
  new LabelClass({
    labelExpressionInfo: { expression: "$feature.CITY_NAME" },
    symbol: {
      type: "label-3d",
      symbolLayers: [{
        type: "text",
        material: { color: "white" },
        size: 11,
        font: {
          family: "Open Sans",
          weight: "bold"
        },
        halo: {
          color: "black",
          size: 1
        }
      }]
    }
  })
     
];

////adding grid lines to the globe for clarity
   var graticule = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_graticule_15deg/FeatureServer",
  opacity: 0.4
});

////other cities layer, shows all cities within the definition expression. visualized as white
   var citieslayer = new FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Cities_analysis/FeatureServer",
   definitionExpression: "POP > 500000",
     renderer: {
      type: "simple",
      symbol: {
      type: "point-3d",
      symbolLayers: [{
       type: "icon",
      size: 5,
      resource: { primitive: "circle" },
      material: { color: [255,255,255, 0.7] },
    }]
  }
     }
});
   

// addmany will add all the layers created above to the globe
map.addMany([graticule, countryBoundaries, populationLayer, citieslayer]);
   
});