topic Re: Can anyone help with getting the legend, overview, and scalebar to show when using an ArcGISDynamicMapServiceLayer? in ArcGIS JavaScript Maps SDK Questions

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

RichardLafleur — Mon, 21 Mar 2016 20:02:56 GMT

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

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

RichardLafleur — Mon, 21 Mar 2016 20:31:04 GMT

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

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

MichaelVolz — Mon, 21 Mar 2016 20:31:28 GMT

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

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

RichardLafleur — Mon, 21 Mar 2016 20:42:03 GMT

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

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:24:12 GMT

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>

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

RichardLafleur — Mon, 21 Mar 2016 22:27:35 GMT

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