Using both the navigation and drawing toolbar

SwenWaschk — Thu, 16 Jun 2011 17:00:39 GMT

Hi,

I'm having a bit of a problem with getting my navigation toolbar to work. My drawing toolbar on the other hand is working just fine.

dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.toolbars.draw"); 
dojo.require("esri.toolbars.edit");
dojo.require("esri.toolbars.navigation");
       
 var map, navToolbar, toolbar, editToolbar, ctxMenuForGraphics, selected;
 
    function init() {
   
  esriConfig.defaults.map.slider = {left : "23px", top : "65px", width : null, height : "200px"};
  
        var initExtent = new esri.geometry.Extent({"xmin":-11613537,"ymin":1962657,"xmax":10204648,"ymax":12118386,"spatialReference":{"wkid":102100}}); 

        map = new esri.Map("map", {extent: initExtent , logo: false, slider: true}); 
 
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in  
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm 
        var resizeTimer; 
        dojo.connect(map, 'onLoad', function(theMap) { 
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized 
            clearTimeout(resizeTimer); 
            resizeTimer = setTimeout(function() { 
              map.resize(); 
              map.reposition(); 
            }, 500); 
          }); 
          
    //add the scale bar
    var scalebar = new esri.dijit.Scalebar(
    {
     map : map, 
     scalebarUnit : 'metric'
    }
   );
    
    //add the overview map  
          var overviewMapDijit = new esri.dijit.OverviewMap(
    {
     map : map, 
     attachTo : "bottom-right", 
     color : "#769dc0", 
     visible : true
    }
   );
   overviewMapDijit.startup();
        }); 
 
  dojo.connect(map, "onLoad", createToolbarAndContextMenu)
  dojo.connect(map, "onLoad", createToolbar);
 
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service     
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); 
        map.addLayer(basemap); 
   
      }
           
 function createToolbarAndContextMenu(map) { 
        // Create and setup editing tools 
        editToolbar = new esri.toolbars.Edit(map);
 
        dojo.connect(map,"onClick", function(evt){ 
          editToolbar.deactivate(); 
        });
 
        createMapMenu(); 
        createGraphicsMenu(); 
         
        //resize map when browser resizes 
        dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized 
          clearTimeout(resizeTimer); 
          resizeTimer = setTimeout( function() { 
            map.resize(); 
            map.reposition(); 
          }, 500); 
        }); 
 
      }
  
  function createNavToolbar(map){
    // Create and setup navigation tools
    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(); 
      } 
  
  function createMapMenu() { 
        // Creates right-click context menu for map 
        ctxMenuForMap = new dijit.Menu({ 
          onOpen: function(box) {           
            editToolbar.deactivate(); 
          } 
        }); 
 
        /*ctxMenuForMap.addChild(new dijit.MenuItem({  
          label: "Add Point", 
          onClick: function addToMap (geometry) { 
            map.showZoomSlider(); 
    var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); 
                var graphic = new esri.Graphic(geometry, symbol); 
    map.graphics.add(graphic);
          } 
        }));*/ 
   
 
        ctxMenuForMap.startup(); 
        ctxMenuForMap.bindDomNode(map.container); 
      } 
  
    function createGraphicsMenu() { 
        // Creates right-click context menu for GRAPHICS 
 
        ctxMenuForGraphics = new dijit.Menu({}); 
        ctxMenuForGraphics.addChild(new dijit.MenuItem({  
          label: "Edit", 
          onClick: function() { 
            if(selected.geometry.type !== "point"){ 
              editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES, selected); 
            } 
            else{ 
              alert("Not implemented"); 
            } 
          }  
        })); 
 
 
        ctxMenuForGraphics.addChild(new dijit.MenuItem({  
          label: "Move", 
          onClick: function() { 
            editToolbar.activate(esri.toolbars.Edit.MOVE, selected); 
          }  
        })); 
 
        ctxMenuForGraphics.addChild(new dijit.MenuItem({  
          label: "Rotate/Scale", 
          onClick: function() { 
          if(selected.geometry.type !== "point"){ 
              editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected); 
            } 
            else{ 
              alert("Not implemented"); 
            } 
          } 
        })); 
 
        ctxMenuForGraphics.addChild(new dijit.MenuItem({  
          label: "Style", 
          onClick: function() { 
            alert("Not implemented"); 
          } 
        })); 
       
        ctxMenuForGraphics.addChild(new dijit.MenuSeparator()); 
        ctxMenuForGraphics.addChild(new dijit.MenuItem({  
          label: "Delete", 
          onClick: function() { 
            map.graphics.remove(selected); 
          } 
        })); 
 
        ctxMenuForGraphics.startup(); 
 
        dojo.connect(map.graphics, "onMouseOver", function(evt) { 
          // We'll use this "selected" graphic to enable editing tools 
          // on this graphic when the user click on one of the tools 
          // listed in the menu. 
          selected = evt.graphic; 
 
          // Let's bind to the graphic underneath the mouse cursor            
          ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode()); 
        }); 
 
 
        dojo.connect(map.graphics, "onMouseOut", function(evt) { 
          ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode()); 
        }); 
      } 
        
 function createToolbar(themap) { 
        dojo.connect(dijit.byId('map'), 'resize', function() { 
          resizeMap(); 
        }); 
 
       toolbar = new esri.toolbars.Draw(map); 
        
       dojo.connect(toolbar, "onDrawEnd", addToMap); 
      } 
 
    function addToMap(geometry) { 
        toolbar.deactivate(); 
        map.showZoomSlider(); 
         switch (geometry.type) { 
            case "point": 
              var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); 
              break; 
            case "polyline": 
              var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); 
              break; 
            case "polygon": 
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 
              break; 
            case "extent": 
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 
              break;
          } 
          var graphic = new esri.Graphic(geometry, symbol); 
          map.graphics.add(graphic); 
      }
   
 //Handle resize of browser 
    function resizeMap(){ 
        clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(function(){ 
          map.resize(); 
          map.reposition(); 
        }, 500);
      }
   
dojo.addOnLoad(init);

Re: Using both the navigation and drawing toolbar

SwenWaschk — Sun, 19 Jun 2011 08:41:01 GMT

I found my error, it was actually pretty simple i forgot to add:

dojo.connect(map, "onLoad", createNavToolbar);

at the end of the function(init)

topic Using both the navigation and drawing toolbar in ArcGIS JavaScript Maps SDK Questions

Using both the navigation and drawing toolbar

Re: Using both the navigation and drawing toolbar