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 ArcGIS Map SDK for JavaScript 4.32 test html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } --> 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); }); });

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Feature Layer takes a long time to load in JS 4.32

ValCannon2

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>
  <!--   4.31 featureLayer loads quickly -->
  <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>
  
  <!-- 4.32 featureLayer takes a long time to load -->
<!--   <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
      ) => {
        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>

Find more posts tagged with

Accepted answers

GeoGalvanic

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>
  <!--   4.31 featureLayer loads quickly -->
<!--   <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> -->
  
  <!-- 4.32 featureLayer takes a long time to load -->
  <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>

All comments

ValCannon2

GeoGalvanic

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.

<!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>
  <!--   4.31 featureLayer loads quickly -->
<!--   <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> -->
  
  <!-- 4.32 featureLayer takes a long time to load -->
  <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>

ValCannon2

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.