topic Re: Legend and scale bar in ArcGIS JavaScript Maps SDK Questions

Legend and scale bar

KeisukeNozaki — Thu, 03 Oct 2013 18:31:55 GMT

I would like to add legend and scale bar to the following code.
I am little confused because many examples use web maps, not dynamic map services.
Thank you very much for your help.

<!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>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"/>
    <style>
      html,body,#mapDiv{
        padding:0;
        margin:0;
        height:100%;
      }

    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      dojo.require("esri.map");

      var map;

      function init() {
        map = new esri.Map("mapDiv", {
          sliderOrientation: "vertical"
        });

        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var mcdonough = new esri.layers.ArcGISDynamicMapServiceLayer("", {
          "opacity":1,
        });

         //Takes a URL to a non cached map service.
        var aerials = new esri.layers.ArcGISDynamicMapServiceLayer("", {
          "opacity":1,
          "minScale":24000,
        });

        map.addLayer(aerials);
        map.addLayer(mcdonough);
      }

      dojo.ready(init);
    </script>
</head>
<body>
    <div id="mapDiv"></div>

</body>
</html>

Re: Legend and scale bar

CaseySchneebeck — Thu, 03 Oct 2013 20:00:55 GMT

//bring in required classes
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Scalebar");

Scalebar
//in the init function after you have created the map
var scalebar = new esri.dijit.Scalebar({
map: map,
attachTo: "bottom-left"
});

Legend
//div for legend - added style positioning if you want it
<div id="legendDiv" style="position:absolute; bottom:10px; left:10px; z-index:40"></div>

//array to store legend layers
var legendLayers = [];

//after you define your dynamic map service layers push them into the array
legendLayers.push({layer:aerials,title:'Aerial Layer'});
legendLayers.push({layer:mcdonough,title:'McDonough Layer'});

//add the legend
dojo.connect(map, 'onLayersAddResult',function(results){
legend = new esri.dijit.Legend({
map:map,
layerInfos:legendLayers
},"legendDiv");
legend.startup();
});

Hope this helps,
Casey Schneebeck
The Nature Conservancy

Re: Legend and scale bar

KeisukeNozaki — Fri, 04 Oct 2013 13:04:32 GMT

I may have misplaced some codes, and legend does not show up.
Thank you so much for your help.

<!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>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"/>
    <style>
      html,body,#mapDiv{
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.dijit.Scalebar");
      dojo.require("esri.dijit.Legend");

      var map;

      function init() {
        map = new esri.Map("mapDiv", {
          sliderOrientation: "vertical"
        });

       var scalebar = new esri.dijit.Scalebar({
       map: map,
       attachTo: "bottom-left"
       });

        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var mcdonough = new esri.layers.ArcGISDynamicMapServiceLayer("", {
          "opacity":1,
        });

         //Takes a URL to a non cached map service.
        var aerials = new esri.layers.ArcGISDynamicMapServiceLayer("", {
          "opacity":1,
          "minScale":24000,
        });

        map.addLayer(aerials);
        map.addLayer(mcdonough);

        var legendLayers = [];
        dojo.connect(map, 'onLayersAddResult',function(results){
        legend = new esri.dijit.Legend({
        map:map,
        layerInfos:legendLayers
        },"legendDiv");
        legend.startup();
        });

        legendLayers.push({layer:aerials,title:'Aerial Layer'});
        legendLayers.push({layer:mcdonough,title:'McDonough Layer'});
      }

      dojo.ready(init);
    </script>
</head>
<body>
    <div id="mapDiv"></div>
    <div id="legendDiv" style="position:absolute; bottom:10px; left:10px; z-index:40"></div>
</body>
</html>

Re: Legend and scale bar

CaseySchneebeck — Fri, 04 Oct 2013 17:12:05 GMT

Here you go...

<!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>Create Map and add a dynamic layer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"/>
<style>
html,body,#map{
padding:0;
margin:0;
height:100%;
}
#legendBox{
position:absolute;
bottom:60px;
left:10px;
z-index:100;
padding-left:5px;
padding-top:5px;
padding-bottom:0px;
background-color:#fff;
border:1px solid #555;
-moz-box-shadow:0px 0px 5px #555;
-webkit-box-shadow:0px 0px 5px #555;
box-shadow:0px 0px 5px #555;
}
</style>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.Legend");

var map;

function init() {
//create map
map = new esri.Map("map", {
basemap: 'topo'
});
//create scalebar
var scalebar = new esri.dijit.Scalebar({
map: map,
attachTo: "bottom-left"
});
//Takes a URL to a non cached map service.
var mcdonough = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
"opacity":0.5
});
//Takes a URL to a non cached map service.
var aerials = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {
"opacity":0.5
});
//add layers to map
map.addLayers([mcdonough, aerials]);
// create legendLayers array
var legendLayers = [];
//Push layers into array
legendLayers.push({layer:mcdonough,title:'McDonough Layer'});
legendLayers.push({layer:aerials,title:'Aerial Layer'});
//after layers are added use legendLayers to populate legend
dojo.connect(map, 'onLayersAddResult',function(results){
legend = new esri.dijit.Legend({
   map:map,
   layerInfos:legendLayers
   },"legendDiv");
   legend.startup();
});
}
//call init function
dojo.ready(init);
</script>
</head>
<body>
<div id="map">
<div id="legendBox">
<div id="legendDiv"></div>
</div>
</div>

</body>
</html>