AnsweredAssumed Answered

Basic Navigation buttons with Webmap IDs

Question asked by lawrence1gis on Dec 12, 2013
Latest reply on Dec 13, 2013 by JGravois-esristaff
Good Morning,

My map always disappear when using the locate or home widget. Is it compatible with my webmaps id that I copy from arcgis online?
If not is there an alternative?

Code below:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>WSSC Web GIS</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      .map { opacity: 0; }
      #feedback {
        background: #fff;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 80px;
        margin: 2px;
        padding: 8px;
        right: 10px;
        top: 10px;
        width: 150px;
        z-index: 40;
      }
      #header { background: #0000FF;color: 0000FF;
      }
      #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }
      #show_next {
        cursor: pointer;
        font-size: 80%;
      }
      #show_next:hover { border-bottom: 1px solid #444; }
    
     #LocateButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
    </style>

    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      require([
          "dojo/ready",
          "dojo/on",
          "dojo/dom",
          "dijit/registry",
          "dojo/dom-construct",
          "dojo/parser",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "esri/dijit/LocateButton",
          "dojo/domReady!"
          "esri/map",
          "esri/arcgis/utils",
          "esri/domUtils",
          "dojo/fx",
          "dojo/_base/fx"
      ], function(
          ready,
          on,
          dom,
          registry,
          domConstruct,
          parser,
          BorderContainer,
          ContentPane,
          Map,
          LocateButton,
          arcgisUtils,
          domUtils,
          coreFx,
          baseFx
      ) {
          ready(function(){

            parser.parse();
            var currentMap, previousMap, resizeHandle, counter = -1, webmaps = [
              "2304492501464de4af53d23149b120a4", // In Your Neighborhood
              "9098f678ed9f4a449e5ba5f15a20cec4", // Outage Locations
              "b867986f3881483db44ba79ef3307ad6", // Service Alerts
              "b8b9195de3f04ead870a401c2e5c8f2a", // Boil Water advisory
              "7bf74f94aae34186bd0c7edd021b5f2d",// Mandatory Water Restrictions
            ];


            on(dom.byId("show_next"), "click", nextMap);
            loadNext();
       
            function loadNext(previousMap){
              //create the content pane for the map
              var mapPane = new ContentPane({
                "content": "",
                "id": "map" + (++counter),
                "region": "center"
              },domConstruct.create("div"));

              //add the newly constructed content pane to the page
              registry.byId("mainWindow").addChild(mapPane);

              var deferred;
              if(previousMap && previousMap.hasOwnProperty("extent")){
                deferred = arcgisUtils.createMap((webmaps[counter % webmaps.length]),mapPane.domNode.id,{
                  mapOptions: {
                    extent: previousMap.extent
                  }
                });
              }else{
                deferred = arcgisUtils.createMap((webmaps[counter % webmaps.length]), mapPane.domNode.id);
              }
              deferred.then(function(response){
                dom.byId("current_map").innerHTML = response.itemInfo.item.title;
                fadeMap(response.map);
              });

            }

            function fadeMap(map){

              currentMap = map;

              if ( currentMap.loaded ) {
                if (previousMap) {

                  // References:
                  // http://dojotoolkit.org/documentation/tutorials/1.6/effects/
                  // http://dojotoolkit.org/documentation/tutorials/1.6/animation/
                  var combinedAnim = coreFx.combine([
                    baseFx.fadeIn({ node: currentMap.container, duration: 1000 }),
                    baseFx.fadeOut({ node: previousMap.container, duration: 1000 })
                  ]);
                  combinedAnim.on("end", function(){
                      previousMap.destroy();
                      domConstruct.destroy(previousMap.container);
                  });
                  /*dojo.connect(combinedAnim, "onEnd", function() {
                      previousMap.destroy();
                      domConstruct.destroy(previousMap.container);
                  });*/
                  combinedAnim.play();
                }
                else {
                  baseFx.fadeIn({ node: currentMap.container }).play();
                }
              } else {
                // handle map onLoad from webmap
                map.on("load", function(){
                  fadeMap(map);
                });
              }

            }

            function nextMap(){
              if(currentMap){
                loadNext(currentMap);
              }
            }

          });
         
            geoLocate = new LocateButton({
               map: map
            }, "LocateButton");
            geoLocate.startup();
      });
    </script>
  </head>

  <body class="tundra">
          <header>
            <a href="http://www.wsscwater.com" target = "blank"><img src="http://3.bp.blogspot.com/-7RUPNXf0v2Q/TPVHtyz0_4I/AAAAAAAAABs/gr3FSG86ao4/s1600/wssc+logo.jpg" height="50" width="150"></a>
            <a href="help.html"><img src="http://p3-inc.com/wp-content/uploads/2011/07/info-button.png" height="30" width="30" align="right" style=" PADDING-TOP: 20px"></a>
        </header>
    <div id="mainWindow"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
     
      <div id="feedback" class="shadow">
        <div id="info">
          <div id="note">
            Current Map:  <span id="current_map"></span>
          </div>
           <span id="show_next"><button>Next Map</button></span>
                   </div>
      <div id="LocateButton"></div>
      </div>

    </div>
  </body>
</html>

Outcomes