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