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

RichardLafleur · ‎03-21-2016

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>

<title>Simple Map</title>

<style>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

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>

</div>

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

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

</div>

</body>

</html>

Thanks in advance

RobertScheitlin__GISP · ‎03-21-2016

Richard,

I have made some corrections to your code and it work fine now (corrections commented):

<!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 = [];
            //Not sure why you are asking a string if it is undefined when you are defining it right there in the same line.
            //You do not have a constDiv function...
            /*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();
            //Not sure way you were treating the dynamicMap function like a dijit with a constructor.
            /*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>

View solution in original post

RichardLafleur · ‎03-21-2016

I know this is asking a lot and time is not on everyones side, but i need this by 5:45 tonight March 21, 2016

MichaelVolz · ‎03-21-2016

What kind of layers are the other two maps created from?

What sample did you use to get the following code snippet from?

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

RichardLafleur · ‎03-21-2016

The first two maps I used the web map IDs so the layers are already included, and the code came from an example in the arcgis Api. As for the third map i need to use the ArcGISDynamicMapServiceLayer ontop of a topo map

RobertScheitlin__GISP · ‎03-21-2016

Richard,

I have made some corrections to your code and it work fine now (corrections commented):

<!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 = [];
            //Not sure why you are asking a string if it is undefined when you are defining it right there in the same line.
            //You do not have a constDiv function...
            /*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();
            //Not sure way you were treating the dynamicMap function like a dijit with a constructor.
            /*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>

RichardLafleur · ‎03-21-2016

Thank you to everyone, that was perfect and after seeing what had to be changed i feel like an idiot. so simple of changes.