SWAP Webmaps sample and widgets

AxelLévy · ‎07-25-2019

Hello,

I try to reproduce a tabbed application but with the possibility to have widgets in the map. (The Story Map Mapseries is too limited).

This example is almost perfect for me: https://developers.arcgis.com/javascript/latest/sample-code/webmap-swap/index.html

But when I add widgets (Home Button for example), they only load after clicking a tab.

Someone can help me ?

Here my code

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

var homeBtn = new Home({
view: view
});

var layerList = new LayerList({
view: view
});

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

view.ui.add(homeBtn, "top-left");
view.ui.add(layerList, "bottom-left");
});

Btw if we could switch between layers and not webmaps it would be even better!

thank you in advance

KenBuja · ‎07-25-2019

This code adds the home button.

<!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.12</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: rgba(34, 111, 14, 0.5);
        color: #fff;
        margin: 1px;
        width: 50%;
        padding: 20px;
        overflow: auto;
        text-align: center;
        cursor: pointer;
      }

      .active-map {
        color: #fff;
        background-color: rgba(34, 111, 14, 1);
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Home"], function(MapView, WebMap, Home) {
        var webmapids = [
          "ad5759bf407c4554b748356ebe1886e5",
          "71ba2a96c368452bb73d54eadbd59faa",
          "45ded9b3e0e145139cc433b503a8f5ab"
        ];

        /************************************************************
         * 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"
        });
        
        var homeBtn = new Home({
          view: view
        });

        view.ui.add(homeBtn, "top-left");
        
        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">Missing Migrants</div>
        <div class="btn-switch" data-id="1">Refugee Routes</div>
        <div class="btn-switch" data-id="2">Sea Arrivals</div>
      </div>
    </section>
    <div id="viewDiv" class="esri-widget"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎07-25-2019

This code adds the home button.

<!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.12</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: rgba(34, 111, 14, 0.5);
        color: #fff;
        margin: 1px;
        width: 50%;
        padding: 20px;
        overflow: auto;
        text-align: center;
        cursor: pointer;
      }

      .active-map {
        color: #fff;
        background-color: rgba(34, 111, 14, 1);
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Home"], function(MapView, WebMap, Home) {
        var webmapids = [
          "ad5759bf407c4554b748356ebe1886e5",
          "71ba2a96c368452bb73d54eadbd59faa",
          "45ded9b3e0e145139cc433b503a8f5ab"
        ];

        /************************************************************
         * 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"
        });
        
        var homeBtn = new Home({
          view: view
        });

        view.ui.add(homeBtn, "top-left");
        
        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">Missing Migrants</div>
        <div class="btn-switch" data-id="1">Refugee Routes</div>
        <div class="btn-switch" data-id="2">Sea Arrivals</div>
      </div>
    </section>
    <div id="viewDiv" class="esri-widget"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AxelLévy · ‎07-26-2019

OK thanks a lot ! I understand. I wrote the view.ui.add in the wrong place