gpoovalinga

Correct the code pl? I tried lot

Discussion created by gpoovalinga on Apr 8, 2014
Latest reply on Apr 8, 2014 by jskinner-esristaff
Dear All,

Thanks in advance. I am new to ArcGIS JavaScript API. I tried to build New web map using layout containers. But dojo/on functions not at all working for me and showing some other errors also. Can u please correct it and send me the corrected code and explain me also where I done a mistakes. My code given below and also given as attachment file.

Thanks once again
Ganesh


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> 
    <!--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></title>

   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

 
<style>
html, body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}
body{
  background-color:white; overflow:hidden;
  font-family: "Kimberley", sans-serif
}
#header {
-moz-border-radius: 5px;
  margin:2px;
  padding-top: 4px;
  padding-right: 15px;
  background-color:#929761;
  color:#421b14;
  font-size:16pt; text-align:right;font-weight:bold;
  border: solid 2px #79663b;
  height:55px;
}
#subheader {
  font-size:small;
  color: #cfcfcf;
  text-align:right;
  padding-right:20px;
}
#footer {
  margin:2px;
  padding: 2px;
  background-color:white; color:#2a3537;
  border: solid 2px #79663b;
  font-size:10pt; text-align:center;
  height: 30px;
}
#rightPane{
  margin:3px;
  padding:10px;
  background-color:white;
  color:#421b14;
  border: solid 2px #79663b;
  width:20%;
}
#leftPane{
  margin:3px;
  padding:5px;
  width:150px;
  color:#3C1700;
  background-color:white;
  border: solid 2px #79663b;
}
#map {
  margin:5px;
  border:solid 4px #79663b;
}
.shadow{
  -o-border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 8px 8px 16px #323834;
  -webkit-box-shadow: 8px 8px 16px #323834;
  -moz-box-shadow: 8px 8px 16px #323834;
  -o-box-shadow: 8px 8px 16px #323834;
}

.claro.dijitAccordionText {
  margin-left:4px;
  margin-right:4px;
  color:#5c8503;

.panIcon {
        background-image: url(images/nav_pan.png);
        width: 16px;
        height: 16px;
 
}
 
.zoominIcon {
  background-image: url(images/nav_zoomin.png);
  width: 16px;
  height: 16px;
}

</style>
 
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.8"></script>
    <script>
  var map, navToolbar;
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
   require(["esri/map","esri/dijit/Scalebar","esri/toolbars/navigation",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "dijit/Toolbar",
        "dijit/form/Button",
        "dojo/domReady!"],
   function (Map,Scalebar, Navigation, on, parser, registry) {

        map = new esri.Map("map", {
          basemap: "topo",
          center: [-118.404, 34.054],
          zoom: 11
        });
  
  
  var scale=new Scalebar({
   map:map,
   attachTo:"bottom-left",
   scalebarStyle:"line",
   scalebarUnit:"metric"
  });
  
  navToolbar = new Navigation(map);


  registry.byId("pan").on("click", function () {
  navToolbar.activate(Navigation.PAN);
  });
  
  registry.byId("Zoomin").on("click", function () {
        navToolbar.activate(Navigation.ZOOM_IN);
        });

  });


    </script>
  </head>
  <body class="claro">
 
     <div id="mainWindow"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%; height:100%;">

      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        This is the header section
        <div id="subheader">with a subheader</div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
      <div data-dojo-type="dijit.layout.AccordionContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'">
          Content for pane 1
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 2'">
          <p>Content for pane 2</p>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 3'">
          <p>Content for pane 3</p>
        </div>
      </div>
      </div>
      <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    <div id="navToolbar" data-dojo-type="dijit.Toolbar" ></div>
    <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
    <div data-dojo-type="dijit.form.Button" id="Zoomin"  data-dojo-props="iconClass:'zoominIcon'">ZoomIn</div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
        This is the right section
      </div>
      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
        this is the footer section
      </div>
    </div>

  </body>
</html>

Attachments

Outcomes