topic Re: how to disable sun? in ArcGIS JavaScript Maps SDK Questions

how to disable sun?

FreDer — Sun, 12 Dec 2021 16:19:38 GMT

hi,

I want to disable the sun so that the entire globe is evenly lit. however, setting `directShadowsEnabled` to `false` doesn't do the trick.

map = new Map({
    basemap: 'satellite',
    ground: null,
});

view = new SceneView({
    container: 'map-container',
    map,

    // THIS HAS NO EFFECT:
    lighting: {
       directShadowsEnabled: false
    },
});

version: 4.2

Re: how to disable sun?

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:51:20 GMT

Fre Der,

The scenes lighting is set using the environment property.

environment: {
  lighting: {
    directShadowsEnabled: false
  }
}‍‍‍‍‍

But the default for the directShadowsEnabled is false.

The directShadowsEnabled property has more to do with the shadows of extruded features as seen in this sample:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Extrude building footprints based on real world heights - 4.2</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.2/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/layers/FeatureLayer",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/ExtrudeSymbol3DLayer",
      "esri/symbols/PolygonSymbol3D",
      "esri/widgets/Legend",
      "dojo/domReady!"
    ], function(
      Map, SceneView, FeatureLayer, UniqueValueRenderer,
      ExtrudeSymbol3DLayer, PolygonSymbol3D, Legend
    ) {

      /*****************************************************************
       * Define symbols for each unique type of building. One each for
       * residential, condos, and other.
       *****************************************************************/

      var resSym = new PolygonSymbol3D({
        symbolLayers: [
          new ExtrudeSymbol3DLayer({
            material: {
              color: "#FC921F"
            }
          })
        ]
      });

      var condoSym = new PolygonSymbol3D({
        symbolLayers: [
          new ExtrudeSymbol3DLayer({
            material: {
              color: "#9E559C"
            }
          })
        ]
      });

      /*****************************************************************
       * Set each unique value directly in the renderer's constructor.
       * At least one field must be used (in this case the "DESCLU" field).
       * The label property of each unique value will be used to indicate
       * the field value and symbol in the legend.
       *
       * The size visual variable sets the height of each building as it
       * exists in the real world according to the "ELEVATION" field.
       *****************************************************************/

      var renderer = new UniqueValueRenderer({
        defaultSymbol: new PolygonSymbol3D({
          symbolLayers: [new ExtrudeSymbol3DLayer({
            material: {
              color: "#A7C636"
            }
          })]
        }),
        defaultLabel: "Other",
        field: "DESCLU",
        uniqueValueInfos: [
        {
          value: "Residential",
          symbol: resSym,
          label: "Residential"
        }, {
          value: "Residential Condominium",
          symbol: condoSym,
          label: "Condominium"
        }],
        visualVariables: [{
          type: "size",
          field: "ELEVATION",
          valueUnit: "feet" // Converts and extrudes all data values in feet
        }]
      });

      // Set the renderer on the layer
      var buildingsLyr = new FeatureLayer({
        url: "https://services1.arcgis.com/jjVcwHv9AQEq3DH3/ArcGIS/rest/services/Buildings/FeatureServer/0",
        renderer: renderer,
        popupTemplate: {
          title: "{DESCLU}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "ADDRESS",
              label: "Address"
            }, {
              fieldName: "DESCLU",
              label: "Type"
            }, {
              fieldName: "ELEVATION",
              label: "Height"
            }]
          }]
        },
        outFields: ["ADDRESS", "DESCLU", "ELEVATION"],
        definitionExpression: "ELEVATION > 0", // show only buildings with height
      });

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation",
        layers: [buildingsLyr]
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          position: {
            x: -8354148,
            y: 4641966,
            z: 129,
            spatialReference: {
              wkid: 3857
            }
          },
          heading: 300,
          tilt: 75
        },
        environment: {
          lighting: {
            directShadowsEnabled: false
          }
        }
      });

      var legend = new Legend({
        view: view
      });

      view.ui.add(legend, "bottom-right");
    });
  </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I am unaware of a property to change for the global shadow you are seeing.

Re: how to disable sun?

FreDer — Wed, 01 Feb 2017 14:19:00 GMT

thanks robert. good to know.

+ there was a in fact a mistake in my code snippet — was using the

environment property in my actual code.

On Wed, Feb 1, 2017 at 3:06 PM, Robert Scheitlin, GISP <geonet@esri.com>

Re: how to disable sun?

thejuskambi — Wed, 01 Feb 2017 14:45:48 GMT

I agree with you, I have test this behavior in the sandbox, changing the directShadowEnabled has not impact on the shadow.

whereas, updating cameraTrackingEnabled does impact how it behaves. If it is true, the shadow moves along with the move. it the value is false, it is static related to date and time.

Re: how to disable sun?

RalucaNicola1 — Wed, 01 Feb 2017 18:12:16 GMT

At the moment it is not possible to disable the simulated sun. We are currently working on this, but it's in a very incipient phase.

directShadowEnabled is a property that only affects 3D objects, as Robert and Thejus already mentioned.

Re: how to disable sun?

Anonymous User — Fri, 13 Mar 2020 21:27:23 GMT

Thanks for update Raluca - it's always great to get updates from Esri staff.

Have there been any changes in the status of this functionality?

Re: how to disable sun?

RalucaNicola1 — Thu, 02 Apr 2020 13:45:01 GMT

Hi, Unfortunately not that project we worked on back then closed without adding this feature. It's still on our backlog, but it is not planned for the next few releases. This would require quite a big change in our current lighting system and that makes it hard for this feature to get to the top of the prio list. Can you tell me a bit about your use case Michael? I'll add it to our list of use cases for this feature.

Re: how to disable sun?

Anonymous User — Mon, 06 Apr 2020 21:49:17 GMT

Thanks for reply Raluca - appreciate the follow up. I am developing an app which visualizes global data, some of which is located close to the North Pole (e.g. Gakkel Ridge). When you move around the North Pole the lighting can be a little off putting. Aside from that I would just like to keep the UI simple, and removing the lighting would make it a bit cleaner.

Re: how to disable sun?

GWachira — Wed, 10 Feb 2021 22:52:03 GMT

Through trial and error, I eliminated the darkness over half the globe when centered over the polar regions. I had to define the date to null under environment, lighting. According to the reference, the environment, lighting date value is set to null by default. However, I noticed that it must be defined explicitly. I discovered one issue after this workaround. The stars have disappeared. They are not as important in my application, but it would have been nice if they were still there.

Hopely Esri will fix this issue permanently since this is only a workaround.

environment: { lighting: { date: new Date ('null') } }

Re: how to disable sun?

Anonymous User — Thu, 31 Mar 2022 14:39:48 GMT

Happy to announce that you can choose now between sun and virtual light for your scenes.

With JS API 4.23 released last week, we introduce a new lighting mode called "VirtualLighting". This positions the light source relative to the camera, minimizing the amount of visible shadows. Assign it to SceneView.environment.lighting as an alternative to the existing lighting.

Check out more about the virtual lighting and other new features in our release notes for 4.23.