AnsweredAssumed Answered

Can anyone help with getting the legend, overview, and scalebar to show when using an ArcGISDynamicMapServiceLayer?

Question asked by rglafleur on Mar 21, 2016
Latest reply on Mar 21, 2016 by rglafleur

Here is my code so far. I need the third map in the dropdown to do the same thing the first two do. When chosen the third map should refresh with a scalebar, overview window, a legend found on the legend tab, and the title of the map.

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

   

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">   

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <style>

      html, body, #map {

        height: 100%;

        margin: 0;

        padding: 0;

      }

    </style>

    <script src="https://js.arcgis.com/3.16/"></script>

    <script>

 

      require([

        "dojo/on",

        "dojo/parser",

        "dojo/ready",

        "dijit/layout/BorderContainer",

        "dijit/layout/TabContainer",

        "dijit/layout/ContentPane",

        "dijit/form/ComboBox",

        "dojo/dom",

            "dojo/dom-construct",

        "esri/map",

        "esri/urlUtils",

        "esri/arcgis/utils",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/dijit/Legend",

        "esri/dijit/Scalebar",

        "esri/dijit/OverviewMap",

        "dojo/domReady!"

      ], function(

        on,

        parser,

        ready,

        BorderContainer,

        TabContainer,

        ContentPane,

        ComboBox,

        dom,

            domConstruct,

        Map,

        urlUtils,

        arcgisUtils,

        ArcGISDynamicMapServiceLayer,

        Legend,

        Scalebar,

        OverviewMap

      ) {

         

          ready(function(){

           

           

            var map, legendDijit, scalebar, overviewMapDijit, legendLayers;

     

            parser.parse();

           

            var select = dijit.byId('mySelect'); // element to reference for event listener below

            select.on('change', function(evt) {

              // event listener - do something here when select value changes

              updateMap();

            }); // end on

         

            function updateMap() {

              var selection;

              //Delete all existing map-related components

              if(map != undefined){

                map.destroy();

                legendDijit.destroy();

                scalebar.destroy();

                overviewMapDijit.destroy();

              }

             

              //Create <div> as the legend container

              domConstruct.create("div",{id:"legend"},"legendPanel", "first");

             

              //Create new map

              switch (mySelect.value){

                case "Chicago Youth Population":

                  youth();

                  break;

                case "USA Median Household Income":

                  median();

                  break;

                case "USA HHS Healthcare Resources":

                  health();

                  break;

              } // end switch

             

            } // end updateMap

            function dynamicMap(){

 

               map = new Map("map", {

                basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd

                center: [-98.5795, 39.8282], // longitude, latitude

                zoom: 4

              }); // end map

             

                var newLayer = new ArcGISDynamicMapServiceLayer("http://maps3.arcgisonline.com/ArcGIS/rest/services/A-16/HHS_IOM_Health_Resources/MapServer");

                map.addLayer (newLayer);

                legendLayers = [];

                if("legend" != undefined)

              {

              constDiv (domConstruct, dom, on)

              }

 

                legendLayers.push({layer: newLayer});

                legend = new Legend({

                map: map,

                layerInfos: legendLayers

                },"legend");

                legend.startup();

               

                scalebar = new Scalebar({

                 map: map,

                 scalebarUnit: "english"

                });

               

                overviewMapDijit = new OverviewMap({

                 map: map,

                 visible: true

                });

                overviewMapDijit.startup();

            };

           

            function youth()  {

              arcgisUtils.createMap("c63cdcbbba034b62a2f3becac021b0a8","map").then(function(response){

          //update the app

          dom.byId("title").innerHTML = response.itemInfo.item.title;

          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

 

          map = response.map;

          //add the scalebar

          scalebar = new Scalebar({

            map: map,

            scalebarUnit: "english"

          });

 

          overviewMapDijit = new OverviewMap({

          map: map,

          visible: true

        });

        overviewMapDijit.startup();

 

          //add the legend. Note that we use the utility method getLegendLayers to get

          //the layers to display in the legend from the createMap response.

          var legendLayers = arcgisUtils.getLegendLayers(response);

          legendDijit = new Legend({

            map: map,

            layerInfos: legendLayers

          },"legend");

          legendDijit.startup();

        }); // end map

            } // end youth

           

            function median()  {

              arcgisUtils.createMap("b4db98c3e1fe45c0afb7217f78b20d76","map").then(function(response){

          //update the app

          dom.byId("title").innerHTML = response.itemInfo.item.title;

          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

 

          map = response.map;

          //add the scalebar

          scalebar = new Scalebar({

            map: map,

            scalebarUnit: "english"

          });

 

          overviewMapDijit = new OverviewMap({

          map: map,

          visible: true

        });

        overviewMapDijit.startup();

 

          //add the legend. Note that we use the utility method getLegendLayers to get

          //the layers to display in the legend from the createMap response.

          var legendLayers = arcgisUtils.getLegendLayers(response);

          legendDijit = new Legend({

            map: map,

            layerInfos: legendLayers

          },"legend");

          legendDijit.startup();

        }); // end map

            } // end median

 

          function health()  {

            dynamicMap({

              map: map,

              visible: true

            });

            dynamicMap.startup();

            } // end health

         

          // update map on first load

          updateMap();

 

           

          }) // end ready

 

       

      }); // end require

    </script>

  </head>

 

  <body class="claro">

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%; height:100%;">

      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="width:100%; height:40px;">

        <div id="title"></div>

        <div id="subtitle"></div>

      </div>

     

      <div id="tabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'leading'" style="width: 20%; height: 100%; margin: 0px;">

                <div data-dojo-type="dijit/layout/ContentPane" title="Map Selection">Select the map from the drop-down list

                    <select method="get" data-dojo-type="dijit/form/ComboBox" id="mySelect" style="width: 100%">

                        <option value="Chicago Youth Population">Chicago Youth Population</option>

                        <option value="USA Median Household Income">USA Median Household Income</option>

                        <option value="USA HHS Healthcare Resources">USA HHS Healthcare Resources</option>

                    </select>

                </div>

                <div id="legendPanel" data-dojo-type="dijit/layout/ContentPane" title="Map Legend">

                    <div id="legend"></div>

                </div>

            </div>

     

      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

     

    </div>

  </body>

</html>

 

 

Thanks in advance

Outcomes