BasemapGallery how to set source from my URL

[DimaY]

How can I set the objects I want from my url to BasemapGallery  and not those that are in it initially from default?

Project Angular ASP NET6. I am using the object  const world = new WMSLayer({ url: "my Url "}); 

const map = new Map({
ground: "world-elevation",
layers: [world]
});

const container = this.mapViewEl.nativeElement;

const view = new MapView({
container,
map: map
});

const basemapGallery = new BasemapGallery({
view: view
});

view.ui.add(basemapGallery, "top-right"); // Add to the view

How to set new my source to BasemapGallery? 

Thanks! 

[AnneFitz]

Hi, you can add your own basemaps via the source property of the BasemapGallery. Something like this: 

const world = new WMSLayer({ url: "my Url "});
// create a basemap with your WMS layer as the base layer
const worldBasemap = new Basemap({
  baseLayers: [world]
});

const basemapGallery = new BasemapGallery({
   view: view,
   // set the source to an array of basemaps
   //   here we are including the worldBasemap from your WMSLayer
   //   and the Esri hybrid basemap
   source: [worldBasemap, Basemap.fromId("hybrid")]
});
view.ui.add(basemapGallery, "top-right");

[DimaY]

First of all, thank you very much for your reply! 

Please tell me what is in your code view? I had a MapView with that view name. What do you have? 

In your code Basemap.fromId("hybrid") where did you define it - Basemap? Why am I asking? Because you defined this const worldBasemap = new Basemap({
baseLayers: [world]
});   

As a programmer, I got the idea that I should define a new Basemap object in which I should insert and define property baseLayers , which in turn, I will take from WMSLayer, in which, in turn, I will insert my URL. Something like that, yes?

And thank you very much, you helped me a lot!

[AnneFitz]

Please tell me what is in your code view? I had a MapView with that view name. What do you have? 

I was using a MapView. But either MapView or SceneView should work.

In your code Basemap.fromId("hybrid") where did you define it - Basemap?

This is an API class "esri/Basemap" that I imported at the name time as my MapView and BasemapGallery: https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html

As a programmer, I got the idea that I should define a new Basemap object in which I should insert and define property baseLayers , which in turn, I will take from WMSLayer, in which, in turn, I will insert my URL. Something like that, yes?

Yes, that sounds about right!

[DimaY]

Here is an example of my code and it doesn't work, what is done wrong? Thank you!

import {
Component,
OnInit,
ViewChild,
ElementRef,
OnDestroy,
} from '@angular/core';

import Map from '@arcgis/core/Map';
import Basemap from "@arcgis/core/Basemap";;
import SceneView from '@arcgis/core/views/SceneView';
import WMSLayer from '@arcgis/core/layers/WMSLayer';
import BasemapGallery from "@arcgis/core/widgets/BasemapGallery";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
public view: any = null;

// The <div> where we will place the map
@ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;

initializeMap(): Promise<any> {

const world = new WMSLayer({
url: "example my geoserver url",
});

const map = new Map({
ground: "world-elevation",
layers: [world]
});

const container = this.mapViewEl.nativeElement;

const view = new SceneView({
container,
map: map
});

const worldBasemap = new Basemap({
baseLayers: [world]
});

const basemapGallery = new BasemapGallery({
view: view,
source: [worldBasemap]
});

view.ui.add(basemapGallery, "top-right"); // Add to the view

this.view = view;
return this.view.when();
}

ngOnInit(): any {
this.initializeMap().then(() => {
console.log('The map is ready.');
});
}

ngOnDestroy(): void {
if (this.view) {
this.view.destroy();
}
}
}