Select to view content in your preferred language

Navigation toolbar is in a corrupt state if created after map.onLoad

511
4
09-20-2011 06:01 AM
LucasScharenbroich
Frequent Contributor
I found this issue is a much larger application and narrowed it down to the Navigation toolbar.  If the navToolbar is created *after* the map.onLoad event is fired, it is initialized in a corrupt state.  There is only a single entry in the _extents array, but the _extentCursor is set to -1.  This causes isLastExtent() and isFirstExtent() to both return false and triggers a javascript error when trying to zoomToNext() or zoomToPrev().

I've modified the Navigation Toolbar example to illustrate the problem.  Load the example and click on the "Prev Extent" button to get the error.

<!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" />
    <!--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 type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css";
    </style>
  
    <script type="text/javascript">dojoConfig = { parseOnLoad:true }</script>
  
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></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() {
        esriConfig.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});
 
  // *** BUG ** : Create the navigation toolbar after the map is loaded
  dojo.connect( map, 'onLoad', function() {
      navToolbar = new esri.toolbars.Navigation(map);
   dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
  });
 
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
      }

      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>
0 Kudos
4 Replies
LucasScharenbroich
Frequent Contributor
Can anyone confirm if this is a real bug in the Javascript API?
0 Kudos
derekswingley1
Deactivated User
I will take a look. Will post back with what I find...if it is a bug, can you create your nav toolbar before the map loads?
0 Kudos
LucasScharenbroich
Frequent Contributor
I will take a look. Will post back with what I find...if it is a bug, can you create your nav toolbar before the map loads?


Yes, I've worked around it by creating the navigation toolbar earlier in the application startup process, so no problem there.

Just thought that this seemed close enough to be a real bug to report -- I would expect the navigation toolbar could properly initialize itself regardless of the map's loaded status.

Thanks!
0 Kudos
derekswingley1
Deactivated User
It's a bug and is now logged as NIM072979. It will be addressed in a future release (not 2.5). Until it's fixed, please create your nav toolbar before the map loads.
0 Kudos