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

LucasScharenbroich — Tue, 20 Sep 2011 13:01:57 GMT

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

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

LucasScharenbroich — Tue, 20 Sep 2011 18:55:28 GMT

Can anyone confirm if this is a real bug in the Javascript API?

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

derekswingley1 — Tue, 20 Sep 2011 20:19:17 GMT

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?

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

LucasScharenbroich — Tue, 20 Sep 2011 20:23:43 GMT

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!

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

derekswingley1 — Wed, 21 Sep 2011 19:46:42 GMT

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.

topic Re: Navigation toolbar is in a corrupt state if created after map.onLoad in ArcGIS JavaScript Maps SDK Questions

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

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

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

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

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