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!
Solved! Go to Solution.
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];
});
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
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?
Can you post your code?
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];
}
});
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];
});
I will test that as soon as I can! Thanks again and I will be sure to post my code better next time.
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];
});