Select to view content in your preferred language

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

1347
6
Jump to solution
01-19-2023 08:44 AM
ArianaBernal
Occasional Contributor

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",
  });

 

 
0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Regular Contributor

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"
          }
        }
      });

View solution in original post

6 Replies
AnneFitz
Esri Regular Contributor

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
MVP Esteemed Contributor

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

0 Kudos
AnneFitz
Esri Regular Contributor

sorry - typo!! just updated the comment. 

0 Kudos
KenBuja
MVP Esteemed Contributor

What happens when you use the syntax

galleryTemplatesGroupQuery: "d3cad8c2b40046928585d09b020e133c", //Custom BaseMap Gallery Group from AGOL
0 Kudos
AnneFitz
Esri Regular Contributor

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
Occasional Contributor

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

0 Kudos