4.26 to 4.28 upgrade of Expand widget containing a BasemapGallery widget not rendering upon expand

René_Ténière · ‎10-27-2023

I am having trouble transitioning from v4.26 of the sdk to v4.28. My basemap gallery used to function properly, but now after upgrading it is not rendering within the expand content div. The following is a config file I use (Imported to javascript as an object: _config), and the code follows. Any help would be appreciated.

{
    "id": "basemapgallery",
    "version": 4.20,
    "expanded": false,
    "visible": true,
    "defaultThumbnail": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/default.jpg",
    "basemaps": {
        "en": [
            {
                "id": "BASE_NSTDB_10k_Colour_WM84",
                "title": "Nova Scotia Colour Topographic",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSColour.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Colour",
                        "title": "1:10 000 Colour Topographic Map",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Colour_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Grey_WithGeoNameLabels_WM84",
                "title": "Nova Scotia Grey Canvas",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSGrey.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Grey_WithGeoNameLabels",
                        "title": "1:10 000 Grey Base Map",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Grey_WithGeoNameLabels_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Grey_WM84",
                "title": "Nova Scotia Grey Canvas with Roads",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSTopo.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Grey",
                        "title": "1:10 000 Grey Base Map",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Grey_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Roads_WM84",
                "title": "Nova Scotia Roads",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSRoads.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Roads",
                        "title": "1:10 000 Base Roads",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Roads_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSODB_10k_WM84",
                "title": "Nova Scotia Imagery",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSImagery.png",
                "layers": [
                    {
                        "id": "BASE_NSODB_10k",
                        "title": "1:10 000 Base Imagery",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSODB_10k_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
            {
                "id": "World_Light_Gray",
                "title": "Light Gray Canvas",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/LightGreyCanvas.jpg",
                "layers": [
                    {
                        "id": "World_Light_Gray_Base",
                        "title": "Light Grey Base",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
                    },
                    {
                        "id": "World_Light_Gray_Reference",
                        "title": "Light Grey Reference",
                        "isReference": true,
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Dark_Gray",
                "title": "Dark Grey Canvas",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/DarkGreyCanvas.png",
                "layers": [
                    {
                        "id": "World_Dark_Gray_Base",
                        "title": "Dark Grey Base",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
                    },
                    {
                        "id": "World_Dark_Gray_Reference",
                        "title": "Dark Grey Reference",
                        "isReference": true,
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Imagery",
                "title": "World Imagery",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldImagery.jpg",
                "layers": [
                    {
                        "id": "World_Imagery_2017",
                        "title": "World Imagery 2017",
                        "visibility": true,
                        "opacity": 1,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Street_Map",
                "title": "World Roads",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldStreets.jpg",
                "layers": [
                    {
                        "id": "World_Street_Map_8421",
                        "title": "World Street Map",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Topo_Map",
                "title": "World Topographic",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldTopo.jpg",
                "layers": [
                    {
                        "id": "defaultBasemap",
                        "title": "World Topology Basemap",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            }
            ],
        "fr": [
            {
                "id": "BASE_NSTDB_10k_Colour_WM84",
                "title": "Carte Topographique Couleur de la Nouvelle-Écosse",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSColour.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Colour",
                        "title": "Carte Topographique en Couleur 1:10 000",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Colour_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Grey_WithGeoNameLabels_WM84",
                "title": "Toile Grise de la Nouvelle-Écosse",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSGrey.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Grey_WithGeoNameLabels",
                        "title": "Carte de Base Grise 1:10 000",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Grey_WithGeoNameLabels_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Grey_WM84",
                "title": "Toile Grise de la Nouvelle-Écosse avec Routes",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSTopo.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Grey",
                        "title": "Carte de Base Grise 1:10 000",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Grey_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSTDB_10k_Roads_WM84",
                "title": "Routes de la Nouvelle-Écosse",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSRoads.png",
                "layers": [
                    {
                        "id": "BASE_NSTDB_10k_Roads",
                        "title": "Routes de Base 1:10 000",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSTDB_10k_Roads_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
              {
                "id": "BASE_NSODB_10k_WM84",
                "title": "Images de la Nouvelle-Écosse",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/NSImagery.png",
                "layers": [
                    {
                        "id": "BASE_NSODB_10k",
                        "title": "Imagerie de Base 1:10 000",
                        "url": "https://nsgiwa.novascotia.ca/arcgis/rest/services/BASE/BASE_NSODB_10k_WM84/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
              },
            {
                "id": "World_Light_Gray",
                "title": "Toile Gris Clair",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/LightGreyCanvas.jpg",
                "layers": [
                    {
                        "id": "World_Light_Gray_Base",
                        "title": "Base Gris Clair",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
                    },
                    {
                        "id": "World_Light_Gray_Reference",
                        "title": "Référence Gris Clair",
                        "isReference": true,
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Dark_Gray",
                "title": "Toile Gris Foncé",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/DarkGreyCanvas.png",
                "layers": [
                    {
                        "id": "World_Dark_Gray_Base",
                        "title": "Base Gris Foncé",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
                    },
                    {
                        "id": "World_Dark_Gray_Reference",
                        "title": "Référence Gris Foncé",
                        "isReference": true,
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Imagery",
                "title": "Imagerie Mondiale",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldImagery.jpg",
                "layers": [
                    {
                        "id": "World_Imagery_2017",
                        "title": "Imagerie Mondiale 2017",
                        "visibility": true,
                        "opacity": 1,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Street_Map",
                "title": "Routes Mondiale",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldStreets.jpg",
                "layers": [
                    {
                        "id": "World_Street_Map_8421",
                        "title": "Carte des Rues du Monde",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            },
            {
                "id": "World_Topo_Map",
                "title": "Topographie Mondiale",
                "thumbnailURL": "src/widgets/widgetbar/assets/widgets/basemapgallery/img/WorldTopo.jpg",
                "layers": [
                    {
                        "id": "defaultBasemap",
                        "title": "Carte de Base de la Topologie Mondiale",
                        "opacity": 1,
                        "visibility": true,
                        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
                    }
                ],
                "spatialReference": {
                    "wkid": 102100
                }
            }
        ]
    }
}

let basemaps = _config.basemaps as _Basemaps;
let basemapArray = basemaps[_lang] as Array<_Basemap>;

var _basemaps = new Collection<Basemap>();
basemapArray.map (baseMap => {
    var _basemap: Basemap;
    var _title = baseMap.title? baseMap.title: baseMap.id? baseMap.id: "";

    var _spatialReference = new SpatialReference();
    if (baseMap.spatialReference) {
        _spatialReference = baseMap.spatialReference;
    }

    _basemap = new Basemap({
        id: baseMap.id,
        title: _title,
        thumbnailUrl: baseMap.thumbnailURL? baseMap.thumbnailURL : _default_thumbnail? _default_thumbnail: undefined,
        spatialReference: _spatialReference? _spatialReference: undefined
    });

    if (baseMap.layers && baseMap.layers.length > 0) {
        var _layers = new Collection<MapImageLayer>();
        var _refLayers = new Collection<MapImageLayer>();

        baseMap.layers.map(layer => {
            if (layer.url && typeof layer.url === "string") {
                var lyr = getLayer(layer)
                if (lyr) {
                    if (layer.isReference && layer.isReference === true) {
                        _refLayers.add(lyr);
                    } else {
                        _layers.add(lyr);
                    }
                }
            }
        });
    
        _basemap.baseLayers = _layers;
        _basemap.referenceLayers = _refLayers;
    };

    _basemaps.push(_basemap);
});

let _basemapGallery = new BasemapGallery({
    view: _mapView,
    label: _label,
    source: new LocalBasemapsSource({
        basemaps: _basemaps
    })
});


_basemapGallery_expand.id = widget.id;
_basemapGallery_expand.view = _mapView;
_basemapGallery_expand.visible = _visible;
_basemapGallery_expand.content = _basemapGallery;
_basemapGallery_expand.expanded = _expanded;
_basemapGallery_expand.group = _group;
_basemapGallery_expand.container = widget.id;
_basemapGallery_expand.collapseIcon = "chevron-up";

_mapView.when(() => {
    _basemapGallery_expand.expandTooltip = `${_basemapGallery.label}`;
});

_basemapGallery_expand.when(() => {
    _basemapGallery.source.basemaps.forEach(basemap => {
        basemap.baseLayers.forEach(layer => {
            var lyr = layer as MapImageLayer;
            console.log(`Layer URL (${lyr.id}): ${lyr.url}`);
        });
    });
    console.log("BasemapGallery widget rendered.");
    resolve(_basemapGallery_expand);
});

René_Ténière · ‎10-30-2023

Hi @AnneFitz, I have created a basic widget and it does seem to work. Looks like it is something else that has changed to make it behave differently than in 4.26. I will have to investigate further on my end.

View solution in original post

AnneFitz · ‎10-27-2023

Hi, I'm having trouble reproducing the issue with your code above, and everything seems to be fine with our samples that use the Expand widget and BasemapGallery: https://developers.arcgis.com/javascript/latest/sample-code/basemaps-portal/

Have you tried removing the Expand widget and just rendering the BasemapGallery on it's own? Let me know if that works for you or if you get similar errors. Also, if you could provide a simpler repro case in a codepen or codesandbox, that would help us get to the bottom of this much faster. Thank you!

René_Ténière · ‎10-30-2023

Hi @AnneFitz, I have created a basic widget and it does seem to work. Looks like it is something else that has changed to make it behave differently than in 4.26. I will have to investigate further on my end.

YuriWorkTech · ‎06-03-2024

I had issues with the Expand content only accepting Nodes when using the ESM library. I had to switch back to AMD. I also had an issue with the CSS styling and am currently using v4.25 for that..

GerardoDuarte_Hodgson · ‎05-03-2024

I have the same problem. Did you solve it?