topic Re: Change item description depending on the active map in ArcGIS JavaScript Maps SDK Questions

Change item description depending on the active map

LeidavanHees — Thu, 01 Dec 2022 12:34:49 GMT

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!

Re: Change item description depending on the active map

KenBuja — Thu, 01 Dec 2022 13:03:00 GMT

Similar to how a webmap is selected from the webmaps array when you click on the tab, set up your descriptions in an array. Select the description from the array using the data-id value and apply that to your panel

Re: Change item description depending on the active map

LeidavanHees — Thu, 01 Dec 2022 13:25:34 GMT

Thank you for your response!

I've tried what you suggested, but think I'm still missing something.

I set up the array in the map.when and call on the descriptions when clicking the button. That part works. But only the description of the first map is loaded into the array. The descriptions of the other maps remain empty.

I think maybe because the other maps have not loaded when trying to get the description? Do you know what I could try to fix this?

Re: Change item description depending on the active map

KenBuja — Thu, 01 Dec 2022 13:32:52 GMT

Can you post your code?

Re: Change item description depending on the active map

LeidavanHees — Thu, 01 Dec 2022 13:38:01 GMT

Ofcourse, I think these are the relevant bits. I can also post the rest if you prefer, but there is a lot of junk in there atm.

const webmapids = [
"3885bf6eb36c49d1a594b1ecfc093b08",
"57aadf0f1a374ccda9a0bfeea25f323d",
"5c41943d760d427a9f78b81b96c0af03",
"fa90c70cf7ea416381e8fde8bae57055"
];

const webmaps = webmapids.map((webmapid) => {
return new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: webmapid
}
});
});

const map = webmaps[0];

const view = new MapView({
map: webmaps[0],
container: "viewDiv",
});

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

});

document.querySelector(".btns").addEventListener("click", (event) => {
const id = event.target.getAttribute("data-id");
if (id) {
const webmap = webmaps[id];
view.map = webmap;

Re: Change item description depending on the active map

KenBuja — Thu, 01 Dec 2022 16:33:03 GMT

Note: when adding code to your post, please follow these instructions. It makes it much easier to read

You're creating the description variable within the map.when function, so I think you're running into a problem of variable scope. Try instantiating it in the main body of the code.

const webmapids = [ "3885bf6eb36c49d1a594b1ecfc093b08", "57aadf0f1a374ccda9a0bfeea25f323d", "5c41943d760d427a9f78b81b96c0af03", "fa90c70cf7ea416381e8fde8bae57055" ]; let description; map.when(() => { const title = map.portalItem.title; description = [webmaps[0].portalItem.description, webmaps[1].portalItem.description, webmaps[2].portalItem.description, webmaps[3].portalItem.description]; document.querySelector("#header-title").textContent = title; document.querySelector("#item-description").innerHTML = description[0]; });

Re: Change item description depending on the active map

LeidavanHees — Thu, 01 Dec 2022 16:52:18 GMT

I will test that as soon as I can! Thanks again and I will be sure to post my code better next time.

Re: Change item description depending on the active map

LeidavanHees — Mon, 05 Dec 2022 11:32:09 GMT

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!