NavToolbar icons wont show?

JohnWall · ‎05-17-2012

Every time I try to code the NavToolbar the icons do not show. I've copied the code directly into Aptana and tested it. For some reason the icons are not showing up locally. What am I missing?

KellyHutchins · ‎05-17-2012

Have you copied the images to your local computer? The sample is looking for the images in a folder in your applications main directory called images.

If you have copied the images locally you can use Firebug or Chrome Developer tools to try and debug the issue. Firebug and Chrome Dev Tools both allow you to inspect the application while its running and view things like the code and css. You could run the app then use the debugging tools to select the toolbar icon and examine the css for the various icons to see if the images are successfully located.

View solution in original post

KellyHutchins · ‎05-17-2012

Can you post some code that shows the problem?

JohnWall · ‎05-17-2012

Can you post some code that shows the problem?

Sure, but it's the exact same code that is provided for the Navigation Toolbar. For whatever reason it simply will not show the icons locally.

[/HR]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Navigation toolbar</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }
    </style>

    <script type="text/javascript">dojoConfig = { parseOnLoad:true }</script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

    <script type="text/javascript">

      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");

      var map, navToolbar;

      function init() {
        esri.config.defaults.map.sliderLabel = null;
        var startExtent = new esri.geometry.Extent({"xmin":-16358747,"ymin":2847778,"xmax":3678761,"ymax":12866532,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));

        navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
      }

      function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
    <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 data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div>
    </div>
    <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
</body>
</html>

KellyHutchins · ‎05-17-2012

Have you copied the images to your local computer? The sample is looking for the images in a folder in your applications main directory called images.

If you have copied the images locally you can use Firebug or Chrome Developer tools to try and debug the issue. Firebug and Chrome Dev Tools both allow you to inspect the application while its running and view things like the code and css. You could run the app then use the debugging tools to select the toolbar icon and examine the css for the various icons to see if the images are successfully located.

JohnWall · ‎05-17-2012

Have you copied the images to your local computer? The sample is looking for the images in a folder in your applications main directory called images.

If you have copied the images locally you can use Firebug or Chrome Developer tools to try and debug the issue. Firebug and Chrome Dev Tools both allow you to inspect the application while its running and view things like the code and css. You could run the app then use the debugging tools to select the toolbar icon and examine the css for the various icons to see if the images are successfully located.

Dang! Thanks for catching that! It's been a long day...

DanPajak · ‎05-31-2012

This may seem silly but from where can you copy the images locally? I'm not seeing the images either. Just the text. I see they reference a .png file.

It's been a long day here too!

KellyHutchins · ‎05-31-2012

Jeremy,

You can use Firebug or Chrome Developer tools to view and save the images. Here are the steps in Chrome:

1. Open Chrome Developer Tools while running the sample. You can open Chrome Developer Tools by clicking the wrench in the upper-right corner of Chrome then pressing Tools > Developer Tools.
2. In the dev tools click the Resources tab then expand Frames > toolbar > images and you'll see all the images used by the app. You can then select an image, right-click and select 'Open in new tab'.
3. In the new tab right-click the image and save locally.

DanPajak · ‎06-01-2012

Thank you Kelly. That did the trick.