Community

Legend and scale bar

2504
3
Jump to solution
10-03-2013 11:31 AM
KeisukeNozaki
by
Occasional Contributor II
‎10-03-2013 11:31 AM
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">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <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>
0 Kudos
1 Solution

Accepted Solutions
CaseySchneebeck
by
New Contributor II
‎10-04-2013 10:12 AM
Here you go...

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

<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<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/MapSer...", {
  "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>

View solution in original post

0 Kudos
3 Replies
CaseySchneebeck
by
New Contributor II
‎10-03-2013 01:00 PM
//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
0 Kudos
KeisukeNozaki
by
Occasional Contributor II
‎10-04-2013 06:04 AM
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">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <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>
0 Kudos
CaseySchneebeck
by
New Contributor II
‎10-04-2013 10:12 AM
Here you go...

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

<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<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/MapSer...", {
  "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>
0 Kudos