topic Re: navigation toolbar icond does not display in ArcGIS JavaScript Maps SDK Questions

navigation toolbar icond does not display

SalemJamal-Uddeen — Mon, 30 Sep 2013 06:00:19 GMT

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?

Re: navigation toolbar icond does not display

ManishkumarPatel — Mon, 30 Sep 2013 06:58:07 GMT

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

Re: navigation toolbar icond does not display

SunilPalkar — Mon, 30 Sep 2013 07:12:57 GMT

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?

Re: navigation toolbar icond does not display

SalemJamal-Uddeen — Mon, 30 Sep 2013 07:52:26 GMT

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

Re: navigation toolbar icond does not display

ManishkumarPatel — Mon, 30 Sep 2013 08:42:15 GMT

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">
    
    <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_zoomin.png" 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.

Re: navigation toolbar icond does not display

SunilPalkar — Mon, 30 Sep 2013 08:49:37 GMT

At my end its displaying ( I am using online references)

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

Re: navigation toolbar icond does not display

ManishkumarPatel — Mon, 30 Sep 2013 08:58:37 GMT

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

Re: navigation toolbar icond does not display

SalemJamal-Uddeen — Sun, 12 Dec 2021 02:38:59 GMT

You can try the following:

<div>
<img src="http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/toolbars/images/nav_zoomin.png" 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?

Re: navigation toolbar icond does not display

SalemJamal-Uddeen — Mon, 30 Sep 2013 09:18:33 GMT

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

is this what you looking for??

the "result" iframe shows an empty page.

Re: navigation toolbar icond does not display

SalemJamal-Uddeen — Mon, 30 Sep 2013 09:23:54 GMT

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.

Re: navigation toolbar icond does not display

ManishkumarPatel — Mon, 30 Sep 2013 09:59:12 GMT

the "result" iframe shows an empty page.

[ATTACH=CONFIG]27869[/ATTACH]
view attached.