Basemap Gallery component - Add basemap from tile layer

[MatthewDriscoll]

Does anyone have an example of how to remove the default basemaps in the basemap gallery component and add our own from a service layer.  I am struggling.  Thanks.

[Laura]

Is this what you're referring to?

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/custom-basemap-gallery

[MatthewDriscoll]

No, not through online.  Using the SDK code.  Add the component in HTML and put it in a slot, then customize it in JS.  This the way the new format is supposed to go, no? 

    <!--Basemap Gallery-->
    <arcgis-basemap-gallery
        id="baseMapGal"
        slot="top-right">
    </arcgis-basemap-gallery>

const basemapGallery = document.getElementById("baseMapGal");

[MatthewDriscoll]

I think I may have gotten it, or at least a working solution, by using the LocalBasemapsSources?  However the format/look is different.  So I am not sure.  Would still like to know if the actual basemap gallery component is a direction I can take. 

let basemapGallery = new BasemapGallery({
 source: new LocalBasemapsSource({
   basemaps: [
     myBasemap//Basemap.fromId("topo-vector"), // create a basemap from a well known id basemap
   ]
  }),
 view: view
});
view.ui.add(basemapGallery, 'top-right');

[AnneFitz · Accepted solution]

Hi @MatthewDriscoll - yes you can use the Basemap Gallery component to do this! Just set the source via JavaScript after adding the component to your markup. Example code snippet here - https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-basemap-gallery/#so...