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
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
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.
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
Thanks for the additional information; we'll investigate and reply back here when there is an update to share.
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
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
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>