nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Disable Info Window while Measuring

EmilyLaMunyon

Hi,
I have an application that utilizes an Identify Task to select and show a popup Info Window on certain layers. This works fine until
the Measurement Widget is activated and an Info Window popups up every time a distance is measured. I have come across many threads that deal with this issue but have had no luck implementing any of them. How do I deactivate the Info Window when
using the Measure Widget? Any help is greatly appreciated!!

//Measurement Tool       var measurement = new esri.dijit.Measurement({              map: map,     defaultLengthUnit: esri.Units.FEET,      }, dojo.byId('measurementDiv'));             measurement.startup();                       dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){          this.setTool(activeTool, false),    });  //Identify Event function executeIdentifyTask(evt) {             identifyParams.geometry = evt.mapPoint;         identifyParams.mapExtent = map.extent;         var deferred = identifyTask.execute(identifyParams);          deferred.addCallback(function(response) {              return dojo.map(response, function(result) {         var feature = new esri.Graphic(result.feature.toJson());;                        feature.attributes.layerName = result.layerName;         if(result.layerName === 'Section Corners' || result.layerName === 'Accessory Monuments'){          // console.log(feature.attributes.POINT_NAME);          var template = new esri.InfoTemplate("Monuments", "Point Name: ${POINT_NAME}<br/><a target='_blank'  href='http://surveyor.slco.org/jsapi/map/mrs_javamap.cfm?LAT=${LATITUDE}&LONG=${LONGITUDE}&POINT_NAME=${POINT_NAME}'>Mon. Ref. Sheet</a>");          feature.setInfoTemplate(template);             }             else if (result.layerName === 'Surveys'){             var template = new esri.InfoTemplate("Surveys", "${SURVEYOR}<br/> Survey Number: ${DOCUMENT_N}<br/><a target='_blank' href='http://surveyor.slco.org/jsapi/map/sire_survey_image.cfc?page_id=${page_id}'>Survey PDF Document</a>");               feature.setInfoTemplate(template);             }                 return feature;           });         });                    map.infoWindow.setFeatures([ deferred ]);         map.infoWindow.show(evt.mapPoint);       }

Find more posts tagged with

Accepted answers

EmilyLaMunyon

Jason,
Your advice was great, and I appreciate your time, I just could not get it to work with my application. I did finally figure it out, and
hopefully this helps someone else with the same issue.

function executeIdentifyTask(evt) {        var measureMode =   dojo.query(".esriButton .dijitButtonNode").some(function(node, index, arr){             if(node.childNodes[0].checked){             //at least one of the measure tools is active so disable identify             return true;                        }        });        if(! measureMode){         map.graphics.clear();         identifyParams.geometry = evt.mapPoint;         identifyParams.mapExtent = map.extent;          var deferred = identifyTask.execute(identifyParams);         deferred.addCallback(function(response) {              return dojo.map(response, function(result) {         var feature = new esri.Graphic(result.feature.toJson());;               feature.attributes.layerName = result.layerName;             if(result.layerName === 'Section Corners' || result.layerName === 'Accessory Monuments'){                         var template = new esri.InfoTemplate("Monuments", "Point Name: ${POINT_NAME}<br/><a target='_blank' href='../../mrs_javamap.cfm?LAT=${LATITUDE}&LONG=${LONGITUDE}&POINT_NAME=${POINT_NAME}'>Mon. Ref. Sheet</a>");               feature.setInfoTemplate(template);             }             else if (result.layerName === 'Surveys'){           var template = new esri.InfoTemplate("Surveys", "${SURVEYOR}<br/> Survey Number: ${DOCUMENT_N}<br/>Address: ${ADDRESS_OF_SURVEY}<br/><a target='_blank' href='../../sire_survey_image.cfc?page_id=${page_id}'>Survey PDF Document</a>");               feature.setInfoTemplate(template);             }                 return feature;           });         });                    map.infoWindow.setFeatures([ deferred ]);         map.infoWindow.show(evt.mapPoint);       }     }

All comments

Quynh_NhuMai

Okay, that's perfect. Thank you.

kenbuja

Instead of using dojo.connect, you should be using dojo/on, the preferred way of dealing with events. In the documentation, you'll see that there is a pausable method, which allows you to stop listening to an event but start again later.

Quynh_NhuMai

I know this is a javascript question and not arcgis--but, wondering how you reconnect a saved handler? Not able to figure that out with the docs...

I save my handler like this:

window.myHandler = dojo.connect(window.myMap, "onClick", runIdentifies)

Later, I do:

dojo.disconnect(window.myHandler);

Is there any way to do the following:

dojo.connect(window.myHandler)

This is because i'm having issues accessing the runIdentifies function from where I want to reconnect.

VincentAwino

Hi jason,

I'm quit new to ArcGIS JavaScript API, so its a little difficult to follow the thread here. could you get me a simple example where you use a PopupTemplate and disable the Popup when using the Measurement widget. id greatly appreciate. thanks a lot. In case you need to check out my code view here http://jsfiddle.net/vince_awino/D3J8H/15/

adrian.marsden_DevonCC

Oddly my code I had a different approach, which broke when I moved to API 3.7

I had hooked the onclick of the tool to a routine, disableID(), that set a global variable - which I then checked against on my id function

        dojo.connect(measurement, "onClick", function() {           
            navToolbar.deactivate();
            ClearAllButtonsIcon();
            disableID();
        });

Since 3.7 none of this event gets triggered - using your method of checking works fine - so many thanks.

Anyone any ideas why my old code broke at 3.7? I haven't tried using the newer style "on" way of linking to events yet.

Cheers

ACM

EmilyLaMunyon

Jason,
Your advice was great, and I appreciate your time, I just could not get it to work with my application. I did finally figure it out, and
hopefully this helps someone else with the same issue.

function executeIdentifyTask(evt) {        var measureMode =   dojo.query(".esriButton .dijitButtonNode").some(function(node, index, arr){             if(node.childNodes[0].checked){             //at least one of the measure tools is active so disable identify             return true;                        }        });        if(! measureMode){         map.graphics.clear();         identifyParams.geometry = evt.mapPoint;         identifyParams.mapExtent = map.extent;          var deferred = identifyTask.execute(identifyParams);         deferred.addCallback(function(response) {              return dojo.map(response, function(result) {         var feature = new esri.Graphic(result.feature.toJson());;               feature.attributes.layerName = result.layerName;             if(result.layerName === 'Section Corners' || result.layerName === 'Accessory Monuments'){                         var template = new esri.InfoTemplate("Monuments", "Point Name: ${POINT_NAME}<br/><a target='_blank' href='../../mrs_javamap.cfm?LAT=${LATITUDE}&LONG=${LONGITUDE}&POINT_NAME=${POINT_NAME}'>Mon. Ref. Sheet</a>");               feature.setInfoTemplate(template);             }             else if (result.layerName === 'Surveys'){           var template = new esri.InfoTemplate("Surveys", "${SURVEYOR}<br/> Survey Number: ${DOCUMENT_N}<br/>Address: ${ADDRESS_OF_SURVEY}<br/><a target='_blank' href='../../sire_survey_image.cfc?page_id=${page_id}'>Survey PDF Document</a>");               feature.setInfoTemplate(template);             }                 return feature;           });         });                    map.infoWindow.setFeatures([ deferred ]);         map.infoWindow.show(evt.mapPoint);       }     }

JasonZou

Ok. After some testing, this should work. Change toggleIdentify function as below.

function toggleIdentify(toolName) {
    var isMeasurementActive = measurement[toolName].checked;

    // disable identifyHandler when measurement tool is set and activated
    if (isMeasurementActive) {
        dojo.disconnect(identifyHandler);
        identifyHandler = null;
    }
    // activate identify tool otherwise
    else {
        identifyHandler = map.on("click", executeIdentifyTask);
    }
}

EmilyLaMunyon

I put the break point on:

 if (activate && identifyHandler) {

and the app reaches it, but in the scope variables in Chrome developer it says that activate is undefined.

JasonZou

Open the app in Chrome and start the Developer Tools. Set a breakpoint at the first statement inside toggleIdentify. Will the app reach the breakpoint when you click any of the measurement tools?

EmilyLaMunyon

Change:

dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
    this.setTool(activeTool, false)
    dojo.aspect.after(measurement, "setTool", toggleIdentify, true);
});

To:

dojo.aspect.after(measurement, "setTool", toggleIdentify, true);
dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
    this.setTool(activeTool, false)
});

Jason, again, thanks so much. I have no idea why, but this is still not working. This is what I have, and the popups are still appearing when I measure. Sorry to be such a pain...

var identifyHandler = (map,"onClick",executeIdentifyTask);

var measurement = new esri.dijit.Measurement({ 
            map: map,
     defaultLengthUnit: esri.Units.FEET, 
     }, dojo.byId('measurementDiv')); 
               measurement.startup(); 
     
     
   dojo.aspect.after(measurement, "setTool", toggleIdentify, true);
          dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
          this.setTool(activeTool, false)
});
   
       function toggleIdentify(measurement, activate) {
    // disable identifyHandler when measurement tool is set and activated
    if (activate && identifyHandler) {
        dojo.disconnect(identifyHandler);
        identifyHandler = null;
    }
    // activate identify tool otherwise
    else {
        identifyHandler = (map, "onClick", executeIdentifyTask);
    }
}

  measurement.deactivate = function() {
         var locationBtn = dijit.byId('location'),
         distanceBtn = dijit.byId('distance'),
         areaBtn = dijit.byId('area')
  this.closeTool();
  locationBtn.setAttribute('checked', false);
  distanceBtn.setAttribute('checked', false);
  areaBtn.setAttribute('checked', false);
 
}

//Identify Task
function mapReady(map){
  
      var identifyHandler = (map,"onClick",executeIdentifyTask);
       dojo.connect(map,"onClick",executeIdentifyTask);
       //create identify tasks and setup parameters 
       identifyTask = new esri.tasks.IdentifyTask("http://gis10.slco.org/SLCOGIS/rest/services/public/Surveyor_New/MapServer");
       
       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 8;
       identifyParams.returnGeometry = true;
       identifyParams.layerIds = [1,2,4];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
       identifyParams.width  = map.width;
       identifyParams.height = map.height;
      }
      
   
      function executeIdentifyTask(evt) {
   
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {     
        return dojo.map(response, function(result) {
        var feature = new esri.Graphic(result.feature.toJson());;
    
         
            feature.attributes.layerName = result.layerName;
            if(result.layerName === 'Section Corners' || result.layerName === 'Accessory Monuments'){
             // console.log(feature.attributes.POINT_NAME);
               var template = new esri.InfoTemplate("Monuments", "Point Name: ${POINT_NAME}<br/><a target='_blank' href='http://surveyor.slco.org/jsapi/map/mrs_javamap.cfm?LAT=${LATITUDE}&LONG=${LONGITUDE}&POINT_NAME=${POINT_NAME}'>Mon. Ref. Sheet</a>");
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'Surveys'){
              var template = new esri.InfoTemplate("Surveys", "${SURVEYOR}<br/> Survey Number: ${DOCUMENT_N}<br/>Address: ${ADDRESS_OF_SURVEY}<br/><a target='_blank' href='http://surveyor.slco.org/jsapi/map/sire_survey_image.cfc?page_id=${page_id}'>Survey PDF Document</a>");
              feature.setInfoTemplate(template);
            }
   
            return feature;
          });
        });
   
      
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }

JasonZou

Change:

dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
    this.setTool(activeTool, false)
    dojo.aspect.after(measurement, "setTool", toggleIdentify, true);
});

To:

dojo.aspect.after(measurement, "setTool", toggleIdentify, true);
dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
    this.setTool(activeTool, false)
});

EmilyLaMunyon

Jason,
Thanks again for getting back to me. I have tried to implement your advice into my code and am still having the popup window appear when measuring. I am sure I am missing something obvious. I added in my identify code in case I am missing something there.

var identifyHandler = (map,"onClick",executeIdentifyTask);
  
 
  var measurement = new esri.dijit.Measurement({ 
                map: map,
  defaultLengthUnit: esri.Units.FEET, 
  }, dojo.byId('measurementDiv')); 
                measurement.startup(); 
     
     
   dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
   this.setTool(activeTool, false)
   dojo.aspect.after(measurement, "setTool", toggleIdentify, true);

   });
   
       function toggleIdentify(measurement, activate) {
    // disable identifyHandler when measurement tool is set and activated
    if (activate && identifyHandler) {
        dojo.disconnect(identifyHandler);
        identifyHandler = null;
    }
    // activate identify tool otherwise
    else {
        identifyHandler = (map, "onClick", executeIdentifyTask);
    }
}

    measurement.deactivate = function() {
    var locationBtn = dijit.byId('location'),
         distanceBtn = dijit.byId('distance'),
         areaBtn = dijit.byId('area')
  this.closeTool();
  locationBtn.setAttribute('checked', false);
  distanceBtn.setAttribute('checked', false);
  areaBtn.setAttribute('checked', false);
 
}

function mapReady(map){
  
    var identifyHandler = (map,"onClick",executeIdentifyTask);
       dojo.connect(map,"onClick",executeIdentifyTask);
       //create identify tasks and setup parameters 
       identifyTask = new esri.tasks.IdentifyTask("http://gis10.slco.org/SLCOGIS/rest/services/public/Surveyor_New/MapServer");
       
       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 8;
       identifyParams.returnGeometry = true;
       identifyParams.layerIds = [1,2,4];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
       identifyParams.width  = map.width;
       identifyParams.height = map.height;
      }
      
   
      function executeIdentifyTask(evt) {
   
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {     
        return dojo.map(response, function(result) {
        var feature = new esri.Graphic(result.feature.toJson());;
    
         
            feature.attributes.layerName = result.layerName;
            if(result.layerName === 'Section Corners' || result.layerName === 'Accessory Monuments'){
             // console.log(feature.attributes.POINT_NAME);
               var template = new esri.InfoTemplate("Monuments", "Point Name: ${POINT_NAME}<br/><a target='_blank' href='http://surveyor.slco.org/jsapi/map/mrs_javamap.cfm?LAT=${LATITUDE}&LONG=${LONGITUDE}&POINT_NAME=${POINT_NAME}'>Mon. Ref. Sheet</a>");
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'Surveys'){
              var template = new esri.InfoTemplate("Surveys", "${SURVEYOR}<br/> Survey Number: ${DOCUMENT_N}<br/>Address: ${ADDRESS_OF_SURVEY}<br/><a target='_blank' href='http://surveyor.slco.org/jsapi/map/sire_survey_image.cfc?page_id=${page_id}'>Survey PDF Document</a>");
              feature.setInfoTemplate(template);
            }
   
            return feature;
          });
        });
   
      
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }

ZachLiu1

Emily, I think you should try Jason's approach for your purpose.

to make it clear,

My approach works in a control system with something like a menu or control buttons. So when you trigger your measurement dijit you can disconnect the handler for identify. And when you trigger your identify function, you can again add the listener for it to work. So functions won't bother each other.

JasonZou

Have you tried my approach? My approach assumes that identifyHandler is a global variable. You will need to change it if not.

EmilyLaMunyon

Thank you both so much for your helpful responses!

I have tried to integrate the advice provided into my code and it still is not working, I am sure I am close but still missing something.

var identifyHandler = (map,"onClick",executeIdentifyTask);

var measurement = new esri.dijit.Measurement({ 
           map: map,
    defaultLengthUnit: esri.Units.FEET, 
 }, dojo.byId('measurementDiv')); 
           measurement.startup(); 
  
   dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
   dojo.disconnect(identifyHandler);
   return false;
   this.setTool(activeTool, false)
   });

JasonZou

Try this:

// invoke toggleIdentify after measurement.setTool is called.
// The last parameter "true" means to pass the setTool parameter to toggleIdentify 
dojo.aspect.after(measurement, "setTool", toggleIdentify, true);

function toggleIdentify(toolName, activate) {
    // disable identifyHandler when measurement tool is set and activated
    if (activate && identifyHandler) {
        dojo.disconnect(identifyHandler);
        identifyHandler = null;
    }
    // activate identify tool otherwise
    else {
        identifyHandler = map.on("click", executeIdentifyTask);
    }
}

ZachLiu1

When you set up your event handlers for your Identify Task, you can assign it to a variable, like,

 var identifyHandler = map.on("click", executeIdentifyTask);

Then your measurement dijit can start like this,

$(".measure_trigger").click(function(e){
                e.preventDefault();
                dojo.disconnect(identifyHandler);
                return false;
            });

So the basic idea is you can add and remove the event listener for your Identify Task as you need.

Hope this may help.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.