Use tabs to switch between web map and dashboard

Michelle_Baragona — Tue, 14 Jun 2022 17:29:57 GMT

Hi there,

I'm trying to create a tabbed map view as is seen on this website (that I manage). However, I would like one of the tabs to be a map, and the other to be a dashboard. Is this possible? Code for that map is below. Maybe this isn't the right template to use? Any advice would be appreciated. Thanks!

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Utah Fire Restrictions - Swap Maps</title> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } #viewDiv { position: absolute; right: 0; left: 0; top: 60px; bottom: 0; } .header { position: absolute; top: 0; width: 100%; height: 10%; } .btns { margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: auto; } .btn-switch { flex-grow: 4; background-color: #ffa87d; color: #fff; font-size: 1.2em; font-weight: bold; margin: 1px; width: 50%; padding: 20px; overflow: auto; text-align: center; cursor: pointer; } .active-map { color: #fff; background-color: #ea763c; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.19/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Search", "esri/widgets/BasemapToggle"], function(MapView, WebMap, Search, BasemapToggle) { var webmapids = [ "dc1ab69b0d48495d8da6534604d030d3", "658cbebc11334e72ba7b29d72cd9d8bd" ]; /************************************************************ * Create multiple WebMap instances ************************************************************/ var webmaps = webmapids.map(function(webmapid) { return new WebMap({ portalItem: { // autocasts as new PortalItem() id: webmapid } }); }); /************************************************************ * Initialize the View with the first WebMap ************************************************************/ var view = new MapView({ map: webmaps[0], container: "viewDiv" }); const searchWidget = new Search({ view: view }); // Adds the search widget below other elements in // the top left corner of the view view.ui.add(searchWidget, { position: "top-left", index: 2 }); let basemapToggle = new BasemapToggle({ view: view, // The view that provides access to the map's "streets-vector" basemap nextBasemap: "streets-vector" // Allows for toggling to the "hybrid" basemap }); document.querySelector(".btns").addEventListener("click", function(event) { /************************************************************ * On a button click, change the map of the View ************************************************************/ var id = event.target.getAttribute("data-id"); if (id) { var webmap = webmaps[id]; view.map = webmap; var nodes = document.querySelectorAll(".btn-switch"); for (var idx = 0; idx < nodes.length; idx++) { var node = nodes[idx]; var mapIndex = node.getAttribute("data-id"); if (mapIndex === id) { node.classList.add("active-map"); } else { node.classList.remove("active-map"); } } } }); }); </script> </head> <body> <section class="header esri-widget"> <div class="btns"> <div class="btn-switch active-map" data-id="0">Campfire and Other Restrictions</div> <div class="btn-switch" data-id="1">Fireworks Restrictions</div> </div> </section> <div id="viewDiv" class="esri-widget"></div> </body> </html>

topic Use tabs to switch between web map and dashboard in ArcGIS JavaScript Maps SDK Questions

Use tabs to switch between web map and dashboard