Basemap Gallery Widget aborts requests

AndrewVitale — Fri, 10 Dec 2021 21:15:45 GMT

Hey all,

I've been trying to chase down an issue where the Basemap Gallery Widget in the 4.15 JS API is aborting requests, which results in an incomplete list of basemaps. The application we're developing is accessing data via our own Portal deployment, which is where the JS API should be searching for basemaps.

Upon first load, often times the basemap gallery list will load successfully. However, refreshing the page will almost certainly create the issue using the example here. This is what it looks like when the basemap requests get aborted:

Here's an example error:

[esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: '1725208f67e-basemap-8')

{name: "AbortError", message: "Aborted", details: undefined, dojoType: "cancel"}‍‍‍

Our application will be using WebMaps from the JS API instead of Maps. The issue seems to be worse when visualizing a WebMap rather than a Map. Further, the application we're developing is an Angular 8 app, and the issue seems to be worse when a new map is brought into the page from behind an `*ngIf` directive. If I understand ngIf correctly, this Angular directive totally removes the map <div> element from the page when the "if" condition is false. So, said another way, the issue may be worse when the map is dynamically added and/or removed from the page.

I'm able to replicate this on Windows and Ubuntu in Chrome and Firefox. Also of note, I am not the Portal administrator, thus I'm unaware of how it was originally configured. I could likely get in touch with the admin if there's evidence pointing to a config issue.

Here's a simple example that references our Portal instance and a public WebMap from the Portal. Just open up devtools, load the page, and chances are you'll see many of the basemaps' requests were aborted. If not, refresh the page and the issue should appear.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the basemaps-portal sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/basemaps-portal/index.html
  -->
<title>Portal Basemap Abort Errors</title>

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

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

    </style>

    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/portal/Portal",
        "esri/views/MapView",
        "esri/widgets/BasemapGallery",
        "esri/widgets/Search",
        "esri/widgets/Expand",
      ], function(
        esriConfig,
        WebMap,
        Portal,
        MapView,
        BasemapGallery,
        Search,
        Expand,
      ) {

        
        esriConfig.portalUrl = "https://gistestportal.vhb.com/site";
        const portal = new Portal();
        portal
          .load()
          .then(function() {

            const zoomLevel = 11;

            const map = new WebMap({
              portalItem: {
                  id: 'ae1cb74010f34c16bf2c61941555ed23',
              }
            });

            const view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-79.9959, 40.4406],
              zoom: zoomLevel,
            });

            const basemapGallery = new BasemapGallery({
              view: view
            });

            const bgExpand = new Expand({
              view: view,
              content: basemapGallery
            });

            view.ui.add(bgExpand, "top-right");

          })
          .catch(function(error) {
            console.error(error);
          });
      });
    </script>
  </head>

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

Any advice would be greatly appreciated! Thanks for your help.

Re: Basemap Gallery Widget aborts requests

StephenRunk — Fri, 10 Dec 2021 21:15:48 GMT

Just off the cuff, cancels for me are a timing issue if they are happening due to my code (not user input). In this case maybe the view is not finished initializing and that is triggering the basemapGallery to initialize a second time or at least cancel its initial requests?

Using your code example I was able to replicate your issue semi-frequently. After waiting for the views promise to resolve via view.when (API 4.6+) or view.then (API <=4.5) I couldn't replicate the problem? Not sure if this is a workaround, fix or just luck on the later testing.

                    const view = new MapView({
                        container: "viewDiv",
                        map: map,
                        center: [-79.9959, 40.4406],
                        zoom: zoomLevel,
                    })

                    view.when(function() {
                      
                        const basemapGallery = new BasemapGallery({
                            view: view
                        });

                        const bgExpand = new Expand({
                            view: view,
                            content: basemapGallery
                        });

                        view.ui.add(bgExpand, "top-right");
                    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Basemap Gallery Widget aborts requests

AndrewVitale — Tue, 26 May 2020 20:57:35 GMT

Stephen,

Thanks so much for chiming in!

This does, in fact, seem to be the solution I was looking for. So simple! It's working in the example provided here, as well as in a sample Angular app.

I think you're on to something with this line of thinking:

Stephen Runk wrote:
In this case maybe the view is not finished initializing and that is triggering the basemapGallery to initialize a second time or at least cancel its initial requests?

topic Basemap Gallery Widget aborts requests in ArcGIS JavaScript Maps SDK Questions

Basemap Gallery Widget aborts requests

Re: Basemap Gallery Widget aborts requests

Re: Basemap Gallery Widget aborts requests