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 } })); };
Solved! Go to 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){ |
Then, at the end of the addGraphic function, reactivate the it with map.setInfoWindowOnClick(true);
Lis,
Try placing it after line 23 if the code snippit above.
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){ |
Then, at the end of the addGraphic function, reactivate the it with map.setInfoWindowOnClick(true);
This worked!
Thanks!