Correct the code pl? I tried lot

PoovalingaGanesh · ‎04-08-2014

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">
    
    <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>

JakeSkinner · ‎04-08-2014

Hi Poovalinga,

It looks like you are trying to combine the legacy and new AMD modules in the require function. You will want to use one or the other. I would recommend sticking with AMD since the old legacy (dojo.require) module will be deprecated. Also, you will want to execute the dojo/parser. ex:

parser.parse();

See this example below:

<!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;
} 

#map {
    height: 100%;
    width: 100%;
}

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;
        require([
            "esri/map",
            "esri/dijit/Scalebar",
            "esri/toolbars/navigation",
            "dojo/on",
            "dojo/parser",
            "dijit/registry",
            "dijit/Toolbar",
            "dijit/form/Button",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer",
            "dojo/domReady!"
        ],
        function (
            Map,
            Scalebar, 
            Navigation, 
            on, 
            parser, 
            registry, 
            Toolbar,
            Button
         ){
             
        parser.parse();

        map = new 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>