Change item description depending on the active map

LeidavanHees

Hello!

 

I have an app where you can change the active webmap like in this sample.

That works wonderful, but I also have a calcite panel that is populated with the map's description. This also works. But when I change the active map, it does not update to the description of the active map.

How can I get it to update when clicking the button that changes the active webmap?

 

This is how the description of the first map is put into the panel:

map.when(() => {
const {
title,
description
} = map.portalItem;
document.querySelector("#header-title").textContent = title;
document.querySelector("#item-description").innerHTML = description;

)};

 

Any help would be much appreciated!

LeidavanHees

Unfortunately, that didn't quite work. But you did point me in the right direction.

It seems the descriptions weren't loading because the map.when fucntion belonged to the first webmap. The others apparently need to be loaded before you can get their description.

So, I ended up loading the descriptions of the other maps each in their own map.when functions.

 

Thanks again for the help, you are awesome!

 

	let description = ["Beschrijving wordt geladen","Beschrijving wordt geladen","Beschrijving wordt geladen","Beschrijving wordt geladen"];

      webmaps[0].when(() => {
	const title = map.portalItem.title;
	description[0] = [webmaps[0].portalItem.description];
        document.querySelector("#header-title").textContent = title;
        document.querySelector("#item-description").innerHTML = description[0];
});

     webmaps[1].when(() => {
	description[1] = [webmaps[1].portalItem.description]
        document.querySelector("#item-description").innerHTML = description[1];
	});

	
     webmaps[2].when(() => {
	description[2] = [webmaps[2].portalItem.description]
        document.querySelector("#item-description").innerHTML = description[2];
	});


     webmaps[3].when(() => {
	description[3] = [webmaps[3].portalItem.description]
        document.querySelector("#item-description").innerHTML = description[3];
	});