Javascript API BasemapGalley widget: unable to get gallery template group query working?

[ArianaBernal]

Hi I am trying to get the basemap gallery widget to display a specific group of basemaps I have created for my organization.

From my understanding of the documentation, I should be using the galleryTemplatesGroupQuery property to call the basemap group from an ID I have for it. When I try to load it it will either show the default arcgis group or if I place my portal ID with it, it calls all basemaps we have for our org. 

Here is the code examples I have, I haven't seen any examples of this property working so am not sure if I am doing it correct.

  // Instantiates the Basemap widget for Desktop
  const basemaps = new BasemapGallery({
    view,
   
      // autocasts to PortalBasemapsSource
    galleryTemplatesGroupQuery: {
      id: "d3cad8c2b40046928585d09b020e133c"
    }, //Custom BaseMap Gallery Group from AGOL
    container: "basemaps-container",
  });

  // Instantiates the Basemap widget for Mobile
  const basemapsMobile = new BasemapGallery({
    view,
    source: {
      // autocasts to PortalBasemapsSource
      portal: "https://corr.maps.arcgis.com",
      galleryTemplatesGroupQuery: {
        id: "d3cad8c2b40046928585d09b020e133c"
      },
    },
   
    container: "basemaps-container-mobile",
  });

[AnneFitz]

Hi @ArianaBernal - in order for this to work, you need to create a portal instance within the source, and define the galleryTemplatesGroupQuery within that, like this:

const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: new Portal({
            url: "https://corr.maps.arcgis.com",
            galleryTemplatesGroupQuery: "d3cad8c2b40046928585d09b020e133c"
          })
        }
      });

Here's a codepen if you want to see the full example in action: https://codepen.io/annefitz/pen/RwBjEae?editors=1000 

[KenBuja]

If that's the case, does the documentation need to be updated to show that it has an id property?

[AnneFitz]

sorry - typo!! just updated the comment. 

[KenBuja]

What happens when you use the syntax

galleryTemplatesGroupQuery: "d3cad8c2b40046928585d09b020e133c", //Custom BaseMap Gallery Group from AGOL

[AnneFitz · Accepted solution]

I spoke too soon - it does appear that the galleryTemplatesGroupQuery is returning more basemaps than what is actually in that group - I can dig into that and see if there might be a bug there. In the meantime, you can use the query property on PortalBasemapsSource to define the id of your group: 

const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: "https://corr.maps.arcgis.com",
          query: {
            id: "d3cad8c2b40046928585d09b020e133c"
          }
        }
      });

[ArianaBernal]

Oh this works perfectly! Thank you so much, glad it was not just me receiving that issue.