BasemapGallery how to set source from my URL

Question

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 · Answer

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 · Answer

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

where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef; initializeMap(): Promise { 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(); } } }

DimaY · Answer

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!