Hi @Aeseir take a look at this codepen, hopefully it will get you started in the right direction. I wasn't sure exactly what properties on the layer you were interested in so I just used the layer title and index in the example.
require([
"esri/WebMap",
"esri/views/MapView",
"esri/core/Collection",
"esri/core/reactiveUtils",
"esri/widgets/LayerList"
], (WebMap, MapView, Collection, reactiveUtils, LayerList) => {
const changesList = document.querySelector("#changesList");
const map = new WebMap({
portalItem: {
id: "512944c00f8a4219a4bb70691089c9e9"
}
});
const view = new MapView({
container: "viewDiv",
map
});
const layerList = new LayerList({
selectionEnabled: true,
view
});
view.ui.add(layerList, "top-right");
let previousTitles = new Collection();
reactiveUtils.watch(
() => view.map.allLayers.map((layer) => layer.title),
(titles) => {
const areTitlesEqual = detectChanges(previousTitles, titles);
if (!areTitlesEqual) {
whatChanged(previousTitles, titles);
}
previousTitles = titles;
}
);
function detectChanges(
firstCollection: Collection,
secondCollection: Collection
) {
if (firstCollection.length === secondCollection.length) {
firstCollection.forEach((item, index) => {
if (item === secondCollection.getItemAt(index)) {
return true;
}
return false;
});
}
return false;
}
function whatChanged(
firstCollection: Collection,
secondCollection: Collection
) {
changesList!.innerHTML = "";
firstCollection.forEach((item, index) => {
if (item !== secondCollection.getItemAt(index)) {
const listItem = document.createElement("calcite-list-item");
listItem.label = item;
listItem.description = `previously at index ${index} moved to index ${secondCollection.findIndex(
(secondItem) => secondItem === item
)}`;
changesList!.appendChild(listItem);
}
});
}
});