AnsweredAssumed Answered

Swap web maps in same view api 4.10

Question asked by JasonDavenport on Jan 9, 2019
Latest reply on Jan 11, 2019 by JasonDavenport

I'm trying to swap web maps in the same view using javascript api 4.10. I can get it to work using javascript 4.0. I'm using portal 4.5. The map will come up and I can click the second button and it will go to the second map although it is not centered like in the map viewer and when I try to click the button that opened originally... nothing happens.  Please let me know what I may be doing wrong. Thanks in advance.

 

Below is the code:

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Swap web maps in the same view - 4.10</title>
  <style>
    html,
    body {
      font-family: sans-serif;
      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: rgba(34, 111, 14, 0.5);
      color: #FFF;
      margin: 1px;
      width: 50%;
      padding: 20px;
      overflow: auto;
      text-align: center;
      cursor: pointer;
      font-size: 0.7em;
    }
    .active-map {
      color: #fff;
      background-color: rgba(34, 111, 14, 1);
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>
  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "esri/config",
      "esri/request"
    ], function(
      MapView, WebMap, esriConfig, esriRequest
    ) {
      var webmapids = [
        "6a8590710dd847ef967b8b45e8439bb4",
        "3c4662ffe4734f96a610ca4e971d836f",
        "54204c30cf6b4af79f4b228517a9e82f"
      ];
      /************************************************************
       * Create multiple WebMap instances
       ************************************************************/
      esriConfig.portalUrl = "https://xxx.yyyy.com/arcgis/"    
      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"
      });
      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">
    <div class="btns">
      <div class="btn-switch active-map" data-id="0">Button 1</div>
      <div class="btn-switch" data-id="1">Button 2</div>
      <div class="btn-switch" data-id="2">Button 3</div>
    </div>
  </section>
  <div id="viewDiv"></div>
</body>
</html>

Outcomes