Select to view content in your preferred language

Change item description depending on the active map

639
7
Jump to solution
12-01-2022 04:34 AM
LeidavanHees
Occasional Contributor

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!

0 Kudos
1 Solution

Accepted Solutions
LeidavanHees
Occasional Contributor

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

 

 

View solution in original post

0 Kudos
7 Replies
KenBuja
MVP Esteemed Contributor

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

0 Kudos
LeidavanHees
Occasional Contributor

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?

0 Kudos
KenBuja
MVP Esteemed Contributor

Can you post your code?

0 Kudos
LeidavanHees
Occasional Contributor

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;

const nodes = document.querySelectorAll(".btn-switch");
for (let idx = 0; idx < nodes.length; idx++) {
const node = nodes[idx];
const mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.appearance = "solid";
} else {
node.appearance = "outline";
}
}
document.querySelector("#item-description").innerHTML = description[id];
}
});

0 Kudos
KenBuja
MVP Esteemed Contributor

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

 

0 Kudos
LeidavanHees
Occasional Contributor

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

0 Kudos
LeidavanHees
Occasional Contributor

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

 

 

0 Kudos