nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Correct the code pl? I tried lot

PoovalingaGanesh

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>

Vind meer berichten getagd met

Accepted answers

All comments

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.