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"
/>
<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.