Turn Off Pop Ups When Drawing Geometry

[LisCollins]

Hi there,

The Issue

I need help with turning off the pop up functionality temporarily when a user presses the draw button on my web map to draw a point, line, or polygon. The drawing function works fine. It's just that when a user draws and a layer has popups enabled, the popups show as well.

My Attempts

I tried placing "map.setInfoWindowOnClick(false)" in various places within my drawing code, but it doesn't work properly.

If I add "map.setInfoWindowOnClick(false)" near the beginning of function, it seems to turn off popups for the whole map once the map is loaded. If I add "map.setInfoWindowOnClick(false)" near the end of the function, pop ups will display until the user presses the draw function. Then popups will not display again even after the user finishes drawing.

Background info:

Level: newbie JS developer.

Using ESRI JavaScript API - ESRI's Public information web map template: Esri/public-information-map-template-js · GitHub

This code was added to the main.js file in the _init: function ().

Any ideas on how I can get pop ups to turn off only when the user is drawing?

Thanks!

My Code for drawing and my attempt to turn off pop ups in main.js file:

//for Drawing
            if (this.config.enableDrawarea) {
var tb;
    // markerSymbol is used for geo
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setColor(new Color([255,0,0]));
        markerSymbol.setStyle("STYLE_CIRCLE");

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        var fillSymbol = new SimpleFillSymbol();
            fillSymbol.setColor(new Color ([255,0,0,0.3])); 
            fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1));

            //activate when click on a draw button button
      var initDrawbar = query("div#info div#DrawButtons").on('click', lang.hitch (this, function (evt){    
        var map = this.map;    
             
             //creates new drawing tool and showtool tips options enabled
          tb = new Draw(this.map, { showTooltips: true });
          
          //when drawing is complete add graphic to map?
          tb.on("draw-end", addGraphic);

            if ( evt.target.id === "DrawButtons" ) {
              return;
            };
            console.log("Tool Picked"); 
            var tool = evt.target.id.toLowerCase();
            console.log(tool);
            map.disableMapNavigation();
            tb.activate(tool);
        
//add graphic to map
    function addGraphic (evt){    
        var map = this.map;   
      
     //map.setInfoWindowOnClick(false); //this doesn't work properly here
    
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          console.log("Value of evt");
          console.log(evt);
          console.log("Value of symbol variable:");
          console.log(symbol);
          console.log("The symbol that was picked is: ");
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }
          console.log(symbol);
               
              console.log("Add graphic now"); 
          map.graphics.add(new Graphic(evt.geometry, symbol));
 //map.setInfoWindowOnClick(false); //this doesn't work properly here either
        }  
           }));   
            };

[RobertScheitlin__GISP]

Lis,

  Try placing it after line 23 if the code snippit above.

[KenBuja · Accepted solution]

In your code, you're putting that line in the event that happens after the drawing is complete...after the user has started clicking on the map. You'll want to deactivate it when the user clicks on the draw toolbar.

var initDrawbar = query("div#info div#DrawButtons").on('click', lang.hitch (this, function (evt){ 
 
    var map = this.map;
    map.setInfoWindowOnClick(false);

Then, at the end of the addGraphic function, reactivate the it with map.setInfoWindowOnClick(true);

[LisCollins]

This worked!

Thanks!