2

I am new to arcGIS javascript API.I tried to display a simple dynamic map service with legend but its not displaying legend. I am not able to find error in my code. Please help me in resolving the problem.

<!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></title>
    <link rel="stylesheet" href="http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/esri/claro/claro.css">
        <link rel="stylesheet" href="http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/esri/css/esri.css">
    <style>
     @import "http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/claro.css";
      @import "http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dojo/resources/dojo.css";
      @import "http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dojox/grid/resources/claroGrid.css";
      .zoominIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_zoomin.png); width:32px; height:32px; }
      .zoomoutIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_zoomout.png); width:32px; height:32px; }
      .zoomfullextIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_fullextent.png); width:32px; height:32px; }
      .zoomprevIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_previous.png); width:32px; height:32px; }
      .zoomnextIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_next.png); width:32px; height:32px; }
      .panIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_pan.png); width:32px; height:32px; }
      .deactivateIcon { background-image:url(http://{Myserver}/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/claro/images/nav_decline.png); width:32px; height:32px; }
    </style>
    <style>
body, html {
    margin:0; padding:0; height:100%; width:100%;
}
</style>
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script src="http://{Myserver}/arcgis_js_api/library/3.7/3.7/init.js"></script>
    <script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.dijit.Legend");
    dojo.require("esri.toolbars.navigation");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.Toolbar");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");

    var map,navToolbar; 


      function init() {
       map = new esri.Map("map", {
       basemap:"topo",
       zoom:3
      });
      var startExtent = new esri.geometry.Extent(73.955727,  11.490257, 78.632229, 18.627605,
     new esri.SpatialReference({wkid:4326}));
      map.setExtent(startExtent);

       var layer1=new esri.layers.ArcGISDynamicMapServiceLayer("http://{Myserver}/ArcGIS/rest/services/Karnataka_new/MapServer");
        map.addLayer(layer1);


      navToolbar = new esri.toolbars.Navigation(map);
      dojo.connect(navToolbar,"onExtentHistoryChange", extentHistoryChangeHandler);

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

}
     function extentHistoryChangeHandler() {
     dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
     dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
     };
    dojo.addOnLoad(init);
  </script>
 </head>
 <body class="claro">
  <div dojoType="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;margin:0" liveSizing="false">
     <div data-dojo-props="region:'left'" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'" style="width:18%; border:1px solid #000;">
         <div id="legendDiv"></div>
        </div>
        <div dojoType="dijit.layout.ContentPane" region="top" style="height:33px; width:100%;"> 
      <div id="navToolbar" data-dojo-type="dijit.Toolbar">
      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div>
   </div></div>
   <div id="map" dojoType="dijit.layout.ContentPane" region="center"  style="overflow:hidden;">
   </div>
   </div>
  </body>
</html>


    enter code here
2

onLayersAddResult fires after all layers are added to the map using the map.addLayers method.
Change
map.addLayer(layer1);
with:
map.addLayers([layer1]);

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.