topic Re: BasemapGallery doesn't respond to event "selection-change" in ArcGIS JavaScript Maps SDK Questions

BasemapGallery doesn't respond to event "selection-change"

DimaY — Mon, 12 Sep 2022 07:34:33 GMT

Very strange! Everything works, but even the alert does not pop up on the event. And no errors either in the code, or in the debug, or in the console

What's wrong?

Example Code:

const map = new Map({
basemap: "satellite"
});

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

const basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

basemapGallery.on("selection-change", function (event) {
alert("basemapGallery selection change");
console.log("event ", event);
});

Re: BasemapGallery doesn't respond to event "selection-change"

AndreasUlmer — Mon, 12 Sep 2022 10:11:10 GMT

According to the doc, there is no "selection-change" event on the BasemapGallery widget:
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html
Did you find a reference to this event somewhere?

---

You could instead watch the basemap like this:

map.watch("basemap", (newBasemap, oldBasemap) => { console.log("new", newBasemap); console.log("old", oldBasemap); });

which will allow you to react to arbitrary changes of the basemap, e.g. when changed via BasemapGallery widget.
Does this help your case?

Re: BasemapGallery doesn't respond to event "selection-change"

DimaY — Mon, 12 Sep 2022 17:10:23 GMT

I don't understand, if I created an object "const basemapGallery = new BasemapGallery", why can't I catch events just at least by choice or just by click? Just to see that I clicked on the select, I have to describe all the possible basemaps? newBasemap, oldBasemap, 3, 4,5,6,7,8 .... If there are many? 🤔

"Did you find a reference to this event somewhere?" Here is the link.

https://developers.arcgis.com/javascript/3/jsapi/basemapgallery.html#event-selection-change

But this is obvious from another opera, as they say... 😀

Obviously, it is necessary to insert and add a bunch of all sorts of troubles in order to earn an elementary event for selecting an element from the list. 🙄
Thanks/

Re: BasemapGallery doesn't respond to event "selection-change"

DimaY — Mon, 12 Sep 2022 17:21:22 GMT

And sorry again. I apparently really did not understand the description of the parameters. But I'm interested in the event on click on the basemapgallery event before changing the map. And not on map watch, which takes place after.

Re: BasemapGallery doesn't respond to event "selection-change"

JoelBennett — Mon, 12 Sep 2022 18:02:54 GMT

The code you have indicates you're using version 4.x of the API, but the documentation you referred to is for 3.x, which doesn't correspond. The 4.x BasemapGallery does not support the kind of event you're looking for, at least according to the documentation anyways, but you shouldn't let that stop you. With a glance at the source code for the BasemapGallery widget, it can be seen that the following hack will do what you're asking:

const basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div") }); basemapGallery._originalHandleClick = basemapGallery._handleClick; basemapGallery._handleClick = function(evt) { var basemapGalleryItem = evt.currentTarget["data-item"]; alert("You selected the basemap with title = [" + basemapGalleryItem.get("basemap.title") + "] and id = [" + basemapGalleryItem.get("basemap.id") + "]"); this._originalHandleClick(evt); };

See also the reference for BasemapGalleryItem for further information.

Re: BasemapGallery doesn't respond to event "selection-change"

DimaY — Mon, 12 Sep 2022 18:28:24 GMT

Thanks a lot!

Re: BasemapGallery doesn't respond to event "selection-change"

DimaY — Tue, 13 Sep 2022 05:36:53 GMT

But properties _originalHandleClick, _handleClick ... does not exist on type BasemapGallery. Code doesn't work.

Re: BasemapGallery doesn't respond to event "selection-change"

JoelBennett — Tue, 13 Sep 2022 16:06:37 GMT

The code works as it should. To verify, replace lines 43-45 of this sample with the code above, then click the Refresh item at the top right of the page. Afterwards, clicking an item in the gallery will then produce an alert as expected, and also change the basemap.

Re: BasemapGallery doesn't respond to event "selection-change"

DimaY — Wed, 14 Sep 2022 09:14:19 GMT

But in the angular that I use, exactly the same code does not know this event and these properties at all. And it doesn't work.