Swap web maps in same view api 4.10

JasonDavenport — Wed, 09 Jan 2019 14:51:21 GMT

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>

    #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>

      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"
      });

<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>

Re: Swap web maps in same view api 4.10

KellyHutchins — Thu, 10 Jan 2019 22:36:32 GMT

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

Re: Swap web maps in same view api 4.10

JasonDavenport — Fri, 11 Jan 2019 16:49:24 GMT

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

Re: Swap web maps in same view api 4.10

KellyHutchins — Fri, 11 Jan 2019 17:09:28 GMT

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?

Re: Swap web maps in same view api 4.10

JasonDavenport — Fri, 11 Jan 2019 17:27:09 GMT

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.

Re: Swap web maps in same view api 4.10

KellyHutchins — Fri, 11 Jan 2019 17:39:29 GMT

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

Re: Swap web maps in same view api 4.10

JasonDavenport — Fri, 11 Jan 2019 17:50:32 GMT

Yes. They work in version 4.1.

Re: Swap web maps in same view api 4.10

JasonDavenport — Wed, 23 Jan 2019 16:13:40 GMT

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

topic Re: Swap web maps in same view api 4.10 in ArcGIS JavaScript Maps SDK Questions

Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10

Re: Swap web maps in same view api 4.10