Use tabs to switch between web map and dashboard

Michelle_Baragona · ‎06-14-2022

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>