topic Re: NavToolbar icons wont show? in ArcGIS JavaScript Maps SDK Questions

NavToolbar icons wont show?

JohnWall — Thu, 17 May 2012 19:38:42 GMT

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?

Re: NavToolbar icons wont show?

KellyHutchins — Thu, 17 May 2012 19:43:38 GMT

Can you post some code that shows the problem?

Re: NavToolbar icons wont show?

JohnWall — Thu, 17 May 2012 19:55:03 GMT

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>

Re: NavToolbar icons wont show?

KellyHutchins — Thu, 17 May 2012 20:16:11 GMT

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.

Re: NavToolbar icons wont show?

JohnWall — Thu, 17 May 2012 20:56:42 GMT

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

Re: NavToolbar icons wont show?

DanPajak — Thu, 31 May 2012 20:29:04 GMT

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!

Re: NavToolbar icons wont show?

KellyHutchins — Thu, 31 May 2012 22:30:48 GMT

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.

Re: NavToolbar icons wont show?

DanPajak — Fri, 01 Jun 2012 13:48:15 GMT

Thank you Kelly. That did the trick.