[GIS] Interacting with the Map after selecting a button/tool

arcgis-javascript-api

I am using the ESRI Javascript API 2.0 and Dojo dijits.

Does anyone know how to wire up a dojo button (or toggle button) in a toolbar to a mouse click event on the map?

I want the user to have to select a tool/button before clicking on the map and NOT just have the map listen to any old mouse click event as this is too open i.e. I want to constrain the functionality to the selecting a tool from the UI.

Best Answer

Here are the methods to disable the built-in map events like drag to pan, double-click to zoom.

Then you can use the navigation toolbar for some basic functionality and/or wire up your own custom controls using the map events

Here's a some example code for wiring a button up to a map onClick programatically, and a corresponding deactivate selected control button.

var depthButton = new dijit.form.Button({
        id: "depth",
        iconClass: "depthIcon",
        onClick: function(){
            navControls.deactivate();
            getDepth(); 
        }
    });
    navToolbar.addChild(depthButton);
    new dijit.Tooltip({connectId:["depth"], label: "Identify Depth of SLR model at a Point"});

function getDepth(){
    identifyTask = new esri.tasks.IdentifyTask("http://servergoeshere/ArcGIS/rest/services/slr/MapServer");
    identifyParams = new esri.tasks.IdentifyParameters();
    identifyParams.tolerance = 3;
    identifyParams.layerIds = [1];

    map.infoWindow.resize(100, 70);
    map.infoWindow.setTitle("Depth");

    identHandle = dojo.connect(map, "onClick", doIdentify);
}

function showDepth(result, evt) {
    value = result[0].value;
    meters = Math.round(result[0].value*100)/100;
    feet = Math.round(result[0].value*3.2808399*100)/100;
    map.infoWindow.setContent(meters + " m <br>" + feet + " ft");
    map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}

var deactivateButton = new dijit.form.Button({
    id: "deactivate",
    iconClass: "deactivateIcon",
    //label: "Cancel",
    onClick: function(){
        navControls.deactivate();
        dojo.disconnect(identHandle);
    }
});
navToolbar.addChild(deactivateButton);
new dijit.Tooltip({connectId:["deactivate"], label: "Deactivate Selected Control"});
Related Question