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

[DimaY]

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

[AndreasUlmer]

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?

[DimaY]

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/

[DimaY]

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.  

[JoelBennett]

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.

[DimaY]

Thanks a lot!

[DimaY]

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

[JoelBennett]

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.

[DimaY]

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.