Community
Select to view content in your preferred language

navigation toolbar icond does not display

2839
10
09-29-2013 11:00 PM
SalemJamal-Uddeen
by
Emerging Contributor
‎09-29-2013 11:00 PM
Hi everybody,

I have been learning ArcGIS for Javascript and trying to apply an example on using navigation toolbar.  The problem is that icon of the buttons does not display. Even though firebug (I am using Aptana IDE + firebug for debugging) shows that the image of the background is downloaded. I have only tried to add one button which is the zoomin button. Could this be the problem? I do not think so.
Anybody could help?
0 Kudos
10 Replies
ManishkumarPatel
by
Deactivated User
‎09-29-2013 11:58 PM
Hi everybody,

I have been learning ArcGIS for Javascript and trying to apply an example on using navigation toolbar.  The problem is that icon of the buttons does not display. Even though firebug (I am using Aptana IDE + firebug for debugging) shows that the image of the background is downloaded. I have only tried to add one button which is the zoomin button. Could this be the problem? I do not think so.
Anybody could help?


Can you provide some code snippet that you are trying or some link to verify.

Thanks
0 Kudos
SunilPalkar
by
Deactivated User
‎09-30-2013 12:12 AM
Please upload the code to debug.

I guess the path contains with icons is not configured (or default path you are using and your application is might be on different folder)

Hi everybody,

I have been learning ArcGIS for Javascript and trying to apply an example on using navigation toolbar.  The problem is that icon of the buttons does not display. Even though firebug (I am using Aptana IDE + firebug for debugging) shows that the image of the background is downloaded. I have only tried to add one button which is the zoomin button. Could this be the problem? I do not think so.
Anybody could help?
0 Kudos
SalemJamal-Uddeen
by
Emerging Contributor
‎09-30-2013 12:52 AM
Here is the full page code. Please note that I am using the javascript esri and dojo libraries downloaded on the local server.

<!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>Navigation toolbar</title>
   
   
    <style>
      @import "http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }     
    </style>
   
  
    <link rel="stylesheet" type="text/css" href="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/js/dojo/dijit/themes/claro/claro.css"/> 
    <script type="text/javascript" src="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/init.js" ></script>
    <script>var dojoConfig = { parseOnLoad:true };</script>
     <script >
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");
    
      var map;
      var navToolbar;
     
      function init() {
         
          var sr = new esri.SpatialReference({wkid:20438});     
        
          map = new esri.Map("mapDiv", {              
               spatialReference: sr
             });
        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 dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://plngissalem/ArcGIS/rest/services/BI/MapServer", {
          "opacity":0.5,
          "imageParameters":imageParameters
        });   
    navToolbar = new esri.toolbars.Navigation(map); 
        map.addLayer(dynamicMapServiceLayer);     
       
      }
      dojo.ready(init);
    </script>    

  </head>
 
 
 
 
  <body >

    <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>    
     
   
    <div id="mapDiv"  height="200" width="400">
    
    </div>
   

   
  </body> 
</html>
0 Kudos
ManishkumarPatel
by
Deactivated User
‎09-30-2013 01:42 AM
Here is the full page code. Please note that I am using the javascript esri and dojo libraries downloaded on the local server.

<!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>Navigation toolbar</title>
   
   
    <style>
      @import "http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }     
    </style>
   
  
    <link rel="stylesheet" type="text/css" href="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/js/dojo/dijit/themes/claro/claro.css"/> 
    <script type="text/javascript" src="http://132.35.22.9/arcgis_js_api/library/3.6/3.6/init.js" ></script>
    <script>var dojoConfig = { parseOnLoad:true };</script>
     <script >
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");
    
      var map;
      var navToolbar;
     
      function init() {
         
          var sr = new esri.SpatialReference({wkid:20438});     
        
          map = new esri.Map("mapDiv", {              
               spatialReference: sr
             });
        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 dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://plngissalem/ArcGIS/rest/services/BI/MapServer", {
          "opacity":0.5,
          "imageParameters":imageParameters
        });   
    navToolbar = new esri.toolbars.Navigation(map); 
        map.addLayer(dynamicMapServiceLayer);     
       
      }
      dojo.ready(init);
    </script>    

  </head>
 
 
 
 
  <body >

    <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>    
     
   
    <div id="mapDiv"  height="200" width="400">
    
    </div>
   

   
  </body> 
</html>




You can try the following:

<div>
    <img src="http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/toolbars/images/nav_zoo..." id="zoomin" onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);" title="Zoom In"/>
</div>


replace the url of the src with your image.

Let me know if this helps.
0 Kudos
SunilPalkar
by
Deactivated User
‎09-30-2013 01:49 AM
At  my end its displaying ( I am using online references)

Sample code :  http://jsfiddle.net/Y6KUB/
0 Kudos
ManishkumarPatel
by
Deactivated User
‎09-30-2013 01:58 AM
At  my end its displaying ( I am using online references)

Sample code :  http://jsfiddle.net/Y6KUB/



check this....http://jsfiddle.net/patelmanya/Y6KUB/1/

is this what you looking for??
0 Kudos
SalemJamal-Uddeen
by
Emerging Contributor
‎09-30-2013 02:16 AM
You can try the following:

<div>
    <img src="http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/toolbars/images/nav_zoo..." id="zoomin" onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);" title="Zoom In"/>
</div>


replace the url of the src with your image.

Let me know if this helps.



This actually displayed the image. To make sure that there is no problem referencing the image from my system I used the following code for the suggested <img> element :

<div>
      <img src="images/nav_zoomin.png" id="zoomin" onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);" title="Zoom In"/>
    </div>


Both alternatives displayed the image but none of them achieved the "zoom in" function on the map. What could be wrong?
0 Kudos
SalemJamal-Uddeen
by
Emerging Contributor
‎09-30-2013 02:18 AM
check this....http://jsfiddle.net/patelmanya/Y6KUB/1/

is this what you looking for??


the "result" iframe shows an empty page.
0 Kudos
SalemJamal-Uddeen
by
Emerging Contributor
‎09-30-2013 02:23 AM
At  my end its displaying ( I am using online references)

Sample code :  http://jsfiddle.net/Y6KUB/


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


With 
.zoominIcon { background-image:url(http://132.35.22.4/tempfiles/images/nav_zoomin.png); width:16px; height:16px; }


and it shows, but no zoom in functionality is provided.
0 Kudos