topic Re: Feature Layer takes a long time to load in JS 4.32 in ArcGIS JavaScript Maps SDK Questions

Feature Layer takes a long time to load in JS 4.32

ValCannon2 — Wed, 26 Feb 2025 00:01:40 GMT

Hi,

I'm playing around with the new JS 4.32 but it seems slow to do certain things. I'm particularly baffled by the time it takes to add a simple Feature Layer to a basemap. Should I be doing it differently from how I did it in 4.31?

https://codepen.io/valcannon/pen/VYwKENQ

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>ArcGIS Map SDK for JavaScript 4.32 test</title> <style> html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } </style>  <link rel='stylesheet' type='text/css' href='https://js.arcgis.com/calcite-components/2.13.2/calcite.css' /> <script type='module' src='https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js'></script> <link rel='stylesheet' href='https://js.arcgis.com/4.31/esri/themes/light/main.css' /> <script src='https://js.arcgis.com/4.31/'></script> <script type='module' src='https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js'></script>   </head> <body> <arcgis-map basemap="topo-vector" center='-118.805, 34.027' zoom='4'></arcgis-map> <script> const arcgisMap = document.querySelector("arcgis-map"); require([ 'esri/layers/FeatureLayer' ],( FeatureLayer ) => { arcgisMap.addEventListener("arcgisViewReadyChange", (event) => { const featureLayer = new FeatureLayer({ url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0', outFieilds: ['*'] }); arcgisMap.map.add(featureLayer); }); }); </script> </body> </html>

Re: Feature Layer takes a long time to load in JS 4.32

ValCannon2 — Wed, 26 Feb 2025 00:02:48 GMT

Re: Feature Layer takes a long time to load in JS 4.32

ValCannon2 — Wed, 26 Feb 2025 00:03:03 GMT

Re: Feature Layer takes a long time to load in JS 4.32

GeoGalvanic — Mon, 03 Mar 2025 06:46:25 GMT

Hi Val,

Based on your code, my guess would be that you see a decreased performance due to one of the breaking changes to map components from the release:

https://developers.arcgis.com/javascript/latest/release-notes/#map-components-breaking-changes

Thearcgis-mapandarcgis-scenecomponents are no longer created with a default basemap. Use thebasemaporitem-idattribute to set the basemap on the component, or set theMapin JavaScript. Settingbasemap="none"is no longer valid; to create a map without a basemap simply avoid setting thebasemapattribute. Note that if you don't assign a basemap, thearcgisViewReadyChangeevent will not fire until the map's properties are updated.

Previously a default basemap would be loaded, and then the basemap you specified would be loaded afterwards. What that means for your code in 4.31 is that the call to fetch the feature layer and then add it to the map would actually execute before the final arcgisViewReadyChange event (it would have been triggered 2 or more times).

I've modified your codePen with the below by instead forcing the featureLayer to load outside of the arcgisViewReadyChange event listener, only using it to actually add the layer onto the map. This seems to have decreased the load time pretty dramatically, at least in this example.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>ArcGIS Map SDK for JavaScript 4.32 test</title> <style> html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } </style>    <script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.32/"></script> <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script> </head> <body> <arcgis-map basemap="topo-vector" center='-118.805, 34.027' zoom='4'></arcgis-map> <script> const arcgisMap = document.querySelector("arcgis-map"); require([ 'esri/layers/FeatureLayer' ],( FeatureLayer ) => { const featureLayer = new FeatureLayer({ url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0', outFieilds: ['*'] }); featureLayer.load() arcgisMap.addEventListener("arcgisViewReadyChange", (event) => { arcgisMap.map.add(featureLayer); }); }); </script> </body> </html>

Re: Feature Layer takes a long time to load in JS 4.32

ValCannon2 — Mon, 03 Mar 2025 15:45:30 GMT

Very good. This programming pattern will be applicable to several applications I'm working on. Thanks for the solution.