Swap web maps in same view api 4.10

829
7
01-09-2019 06:51 AM
JasonDavenport
New Contributor

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>
0 Kudos
7 Replies
KellyHutchins
Esri Frequent Contributor

There's a sample in the API using the latest version (4.10) that shows how to switch web maps: 

Swap web maps in the same view | ArcGIS API for JavaScript 4.10 

0 Kudos
JasonDavenport
New Contributor

Yes Kelly, that is where I got the sample from. I just don't understand why it's not working correctly. Any thoughts?

0 Kudos
KellyHutchins
Esri Frequent Contributor

When I run your test code locally it works for me. I just updated the url for esriConfig.portalUrl to point to https://www.arcgis.com

Does it work for you if you comment out the esriConfig.portalUrl?  Are there any errors in the developer console?  Have you tried different browsers? 

0 Kudos
JasonDavenport
New Contributor

When I comment out the esriConfig.portalUrl it does not load anything and I get: "Failed to load portal item" in the Developer Console. No errors at all in the console when I don't have it commented out. It will load the initial view. I click on the second button and it does bring the next view up but not centered on the map(background does not change). I click back on the first button, the background doesn't change, and it does not load the initial view. Very odd.

0 Kudos
KellyHutchins
Esri Frequent Contributor

Are you sure all the web maps you have listed are valid and accessible? You can test them by trying to open them in the online map viewer. 

http://www.arcgis.com/home/item.html?id=6a8590710dd847ef967b8b45e8439bb4 

0 Kudos
JasonDavenport
New Contributor

Yes. They work in version 4.1.

0 Kudos
JasonDavenport
New Contributor

I'm going to upgrade from 10.5 to 10.6.1 next week and see if this will have any affect.

0 Kudos