topic Re: JS API 4.14 Download Package different to CDN ?? in ArcGIS JavaScript Maps SDK Questions

JS API 4.14 Download Package different to CDN ??

Anonymous User — Wed, 19 Feb 2020 11:06:28 GMT

Recently I've been developing application against the CDN 4.14 version (https://js.arcgis.com/4.14)

without any issues, but when I packaged the app and released it while using the hosted API 4.14 downloaded from https://esrisoftware.esri.com/akdlm/software/ArcGIS_JavaScript/4.14/arcgis_js_v414_api.zip.... I'm getting the errors, whereas while using the online one it works all fine... Also switching back to locally hosted 4.13 works ok, apart from the bug where turning off the labels via labelsVisible is not working for 2D map...

core.js:4002 ERROR RangeError: Maximum call stack size exceeded
at l (init.js:215)
at k (init.js:217)
at l (init.js:217)
at k (init.js:217)
at l (init.js:217)
at k (init.js:217)
at l (init.js:217)
at k (init.js:217)
at l (init.js:217)
at k (init.js:217)

Guys @ESRI, are you 100% sure that the 4.14 downloadable package is the same as the one that's hosted on your servers?!?

The issue is when I'm reinitializing the 2D map to 3D, apparently loading the elevation info seems to be the problem. Once switched back to 2D, the map works ok. Again, I don't experience these issues with the 4.14 hosted at js.arcgis.com...

Thank you

Re: JS API 4.14 Download Package different to CDN ??

Noah-Sager — Wed, 19 Feb 2020 23:03:56 GMT

Hi Michal, sorry to hear about the trouble. Could you share a simplified, reproducible test-app that shows this behavior? Also, I'm not used to seeing that URL for downloading the API. Have you tried downloading it from here? ArcGIS for Developers - downloads

Re: JS API 4.14 Download Package different to CDN ??

Anonymous User — Wed, 19 Feb 2020 23:11:46 GMT

Hi Noah,

thanks for replying, seems like the link is identical (if you look at the download history in the chrome, that's the link I've picked up).

Unfortunately, test-page is a really tricky one as the application is really large and relies only on the on-prem services. But to be honest I never had this type of problem before and I've been doing the 3D since v.4.9. though only recently I've switched to locally hosted API. Again my application runs as following:

Locally hosted: 4.13: OK
CDN Hosted: 4.13: OK

Locally hosted: 4.14: FAILED
CDN Hosted: 4.14: OK

I'm not experiencing any CORS errors, the locally hosted api and the web application sit at the same web server.

Re: JS API 4.14 Download Package different to CDN ??

Anonymous User — Wed, 19 Feb 2020 23:31:01 GMT

The problem is experience only when I initialize the esri/Map with esri/views/MapView and then re-initialize the map with the esri/views/SceneView. This all works ok with the CDN version of API 4.14, but not locally hosted.

HOwever, if I start the map with the 3D (esri/views/SceneView), the 3D gets initialized properly, so it must be some clean up issue. I will try to re-work the reload, but it still very suspicious that the same version (4.14) behaves differently for locally hosted vs cloud.

Thanks

Re: JS API 4.14 Download Package different to CDN ??

Noah-Sager — Wed, 19 Feb 2020 23:40:50 GMT

Thanks for the additional information; we'll investigate and reply back here when there is an update to share.

Re: JS API 4.14 Download Package different to CDN ??

Anonymous User — Sun, 12 Dec 2021 06:35:24 GMT

Another finding as I'm working on resolving this. Seems like I had a bug in the code, where cloning was only shallow, only now realized that, but in summary, I have the viewLayers object that look like the following:

viewLayers: SceneViewLayers = {
  basemap: {
    baseLayers: []
  },
  ground: [],
  layers: []
};

When I'm creating the map, I'm populating this object with the provided urls, similarly to the following:

// Prepare the base layers.
const lyrs = this.baseLayerUrls || this.appConfig.basemapsList;
lyrs.forEach((basemapUrl) => {
  const tileLayer = new this.esriLib.TileLayer({
    url: basemapUrl
  });
  this.viewLayers.basemap.baseLayers.unshift(tileLayer);
});

And when user clicks the 3D, the whole code runs again, but this populates 2 identical layers in the this.viewLayers.basemap.baseLayers. (the bug I had there I was reinstating the viewLayer by shallow copying which was wrong).
Once I've cleared the viewLayers to the default state via deep cloning, so there was only one basemap (not 2 identical ones as a result of the reload) the 3D switch works ok.

The question remains why it behaves differently. I hope this will allow you to locate the issue quicker.

Thanks

Re: JS API 4.14 Download Package different to CDN ??

Noah-Sager — Thu, 20 Feb 2020 17:34:14 GMT

So if I'm following correctly, the crux of the issue is with the viewLayer cloning behavior difference between the CDN and the downloaded API?

I just tested with this sample that switches 2D -> 3D and back, and it works the same with the CDN and the downloaded API (except for a minor issue with the stars.wsv): ArcGIS API for JavaScript Sandbox

Re: JS API 4.14 Download Package different to CDN ??

Anonymous User — Sun, 12 Dec 2021 06:35:27 GMT

Basically yes, see the code below, very simplified, but no cloning of the object that defines the layers. I Couldnt' find a way to share that sandbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Switch view from 2D to 3D - 4.14</title>

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

      #infoDiv {
        position: absolute;
        top: 15px;
        left: 60px;
      }

      #infoDiv input {
        border: none;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
      }
    </style>

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

    <script>
     var is3D = false;
      var map, mapView;
      var viewLayers = {
        basemap: {
          baseLayers: []
        },
        ground: [],
        layers: []
      };
      
      function load() {
        require([
        "esri/views/MapView",
        "esri/views/SceneView",
        "esri/WebMap",
        "esri/WebScene",
        "esri/Map",
        "esri/layers/TileLayer"
      ], function(MapView, SceneView, WebMap, WebScene, Map, TileLayer) {

          var basemaps = [{
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
          }]
          
          basemaps.forEach(function(basemap) {
            console.log('creating basemap tile layer')
            var tileLayer = new TileLayer({
              url: basemap.url
            });
            viewLayers.basemap.baseLayers.unshift(tileLayer);
          });
  
          var appConfig = {
            mapView: null,
            sceneView: null,
            activeView: null,
            container: "viewDiv" // use same container for views
          };
        
        // Set the map
          map = new Map(viewLayers);
  
          var options = {
            zoom: 12,
            center: [-122.43759993450347, 37.772798684981126],
            container: appConfig.container,
         map: map
          };
          
          // Set the view
          mapView = is3D ? new SceneView(options) : new MapView(options);
        });
      }
      

      // Switches the view from 2D to 3D and vice versa
   function switchView() {
      if (is3D) {
         switchButton.value = is3D ? '2D' : '3D';
      } 
      is3D = !is3D;
      load()
   }
     
     require(["dojo/ready"], function(ready){
      ready(function(){
        load();
         
      // switch the view between 2D and 3D each time the button is clicked
        var switchButton = document.getElementById("switch-btn");
        switchButton.addEventListener("click", function() {
          switchView();
        });
      });
    });
     
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv">
      <input
        class="esri-component esri-widget--button esri-widget esri-interactive"
        type="button"
        id="switch-btn"
        value="3D"
      />
    </div>
  </body>
</html>