Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 3 down vote accepted

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

    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.getInfoWindowAnchor(evt.screenPoint));

var deactivateButton = new dijit.form.Button({
    id: "deactivate",
    iconClass: "deactivateIcon",
    //label: "Cancel",
    onClick: function(){
new dijit.Tooltip({connectId:["deactivate"], label: "Deactivate Selected Control"});
share|improve this answer
thanks very much for that - I will check it out next week. – Vidar Aug 19 '10 at 20:40
got it working how I want it - so very happy. Thanks. – Vidar Aug 27 '10 at 15:52

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.