Adding Custom Basemaps to Basemap Gallery in 4.3

[NathanSommers1]

I have imagery dating back 20 years or so that I need to add to my Basemap Gallery widget in a v4.3 map. Has anyone figured out how to add these custom basemap layers to the widget in this version of the APi?

Here's an example of one of the layers I'd like to add to the Basemap Gallery.

// Mapbox Basemap URL
 var mapbox = new WebTileLayer({
 urlTemplate: "https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{level}/{col}/{row}"
 });
 
 // Mapbox Basemap
 var mapboxBasemap = new Basemap({
 baseLayers: [mapbox],
 title: "Mapbox",
 id: "mapbox",
 thumbnailUrl: "includes/images/mapbox.PNG"
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is how I have the Basemap Gallery widget styled right now. I'm using an Expand on it, so it may look different than the normal widget layout.

//Basemap Gallery Widget
 var basemapGallery = new BasemapGallery({
 view: view,
 container: document.createElement("div")
 });
 
 var basemapGalleryExpand = new Expand({
 view: view,
 content: basemapGallery.domNode,
 expandIconClass: "esri-icon-basemap"
 });
 
 view.ui.add(basemapGalleryExpand, {
 position: "top-right"
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Also, does anyone known the line to hide the default ArcGIS Basemaps in the widget? The old line doesn't/didn't work in this version of the API. (Below is the old line of code that used to hide the default basemaps.)

showArcGISBasemaps: false,‍

[Zdenekprocner]

Hello,

my solution: all ESRI Basemaps + myBasemaps

const MyBasemap = new Basemap({
  baseLayers: [
    new MapImageLayer({
      url: "https://xxxxxxxxxx/MapServer/",
      title: "My Title"
    })
  ],
  title: "My Title",
  id: "MyID_BS",
  thumbnailUrl: "https://xxxxxxxx/basemap_LS.png"
});

/*

MapImageLayer/TileLayer - Depends on the scale (LODS) MyBasemap 

*/

const basemaps = new BasemapGallery({
  view,
  container: "basemaps-container",
  //source: MyBasemap
  //source: [MyBasemap, Basemap.fromId("topo-vector"), Basemap.fromId("hybrid")]
});

basemaps.when(()=>{
  setTimeout(() => {
    //basemaps.source.basemaps.add(MyBasemap); // Last position
    basemaps.source.basemaps.splice(0, 0, MyBasemap); // First position
  }, "2000");  // :-((
});