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; } } }

NavToolbar icons wont show?

JohnWall

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?

Encontre mais publicações marcadas com

Accepted answers

khutchins

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.

All comments

khutchins

Can you post some code that shows the problem?

JohnWall

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>

khutchins

JohnWall

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

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!

khutchins

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.

Capture.PNG

DanPajak

Thank you Kelly. That did the trick.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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