Good question! I've been wanting to update this one to show it.
You can do one of two things, depending on what you need. You can create the webmaps ahead of time and set the `element.map = myMap` property or set the `element.itemId = myItemid` property.
Here is a demo using the itemId
https://codepen.io/odoe/pen/raaByOg?editors=1000
<body>
<div id="container">
<section class="header esri-widget">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Missing Migrants</div>
<div class="btn-switch" data-id="1">Refugee Routes</div>
<div class="btn-switch" data-id="2">2015 European Sea Arrivals</div>
</div>
</section>
<arcgis-map>
</arcgis-map>
</div>
<script type="module">
const webmapids = [
"ad5759bf407c4554b748356ebe1886e5",
"71ba2a96c368452bb73d54eadbd59faa",
"45ded9b3e0e145139cc433b503a8f5ab"
];
const mapElement = document.querySelector("arcgis-map");
mapElement.itemId = webmapids[0];
document.querySelector(".btns").addEventListener("click", (event) => {
const id = event.target.getAttribute("data-id");
if (id) {
mapElement.itemId = webmapids[id];
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.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
</script>
</body>
