Multiple WebMap Instances with Map Components

JaredPilbeam2 — Mon, 14 Apr 2025 16:39:31 GMT

How would I convert this sample to map components? I have an existing app that combines that sample with a swipe widget. And I'm attempting to update it. I've gotten as far as utilizing the arcgis-swipe component, but I'm stuck on how to implement more than one webmap.

Re: Multiple WebMap Instances with Map Components

ReneRubalcava — Mon, 14 Apr 2025 17:08:05 GMT

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>

topic Multiple WebMap Instances with Map Components in ArcGIS JavaScript Maps SDK Questions

Multiple WebMap Instances with Map Components

Re: Multiple WebMap Instances with Map Components