topic BasemapGallery how to set source from my URL in ArcGIS JavaScript Maps SDK Questions

BasemapGallery how to set source from my URL

DimaY — Wed, 24 Aug 2022 18:59:25 GMT

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!

Re: BasemapGallery how to set source from my URL

AnneFitz — Wed, 24 Aug 2022 22:23:47 GMT

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

Re: BasemapGallery how to set source from my URL

DimaY — Thu, 25 Aug 2022 09:28:08 GMT

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!

Re: BasemapGallery how to set source from my URL

DimaY — Sat, 27 Aug 2022 09:51:58 GMT

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

Re: BasemapGallery how to set source from my URL

AnneFitz — Mon, 29 Aug 2022 15:29:47 GMT

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

Yes, that sounds about right!