Turn Popups On/Off in ArcGIS Online Webmap via Javascript API Web Application

Question

I am writing my first ArcGIS Javascript API web map application and consuming a web map authored in ArcGIS Online. The ArcGIS Online web map apparently does most of the work for me in terms of symbology, editing templates, and even popups.

For my application, I am trying to allow the user to edit features, but not all the time. I am able to toggle the editor on and off with the click of a button. The problem is that I have not been able to toggle the default popups on and off so that the user can edit attributes. Even when editing is enabled, the default non-editable popup appears when you click on a feature. The only way to avoid this is to use the ignorePopups option when calling esri.arcgis.utils.createMap. However, this means that when editing is disabled nothing happens when you click on a feature.

Here is my code. This has all been adapted from several samples provided in the ArcGIS Javascript API documentation.

 <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
 <script>
 dojo.require("dijit.layout.BorderContainer");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("dijit.layout.StackContainer");
 dojo.require("dijit.form.Button");
 dojo.require("dijit.Menu");
 dojo.require("esri.dijit.editing.Editor-all");
 dojo.require("esri.map");
 dojo.require("esri.IdentityManager");
 dojo.require("esri.dijit.OverviewMap");
 dojo.require("esri.arcgis.utils");
 dojo.require("dijit.layout.AccordionContainer");
 dojo.require("esri.dijit.Legend");
 dojo.require("esri.layers.FeatureLayer");
 var map;
 var geometryService = "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
 var layers;
 var templatePicker;
 var editorWidget;
 // var clickHandle;
 // var clickListener;
 function init() {
 esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
 //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
 esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
 var urlObject = esri.urlToObject(document.location.href);
 var webmap = "0d6761afcb3c45c8840cdbb589f54fa7";
 var bingMapsKey = "/*Please enter your own Bing Map key*/";
 if (urlObject.query) {
 webmap = urlObject.query.webmap;
 bingMapsKey = urlObject.query.bingMapsKey;
 }
 var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
 mapOptions : {
 slider : true
 },
 bingMapsKey : bingMapsKey,
 ignorePopups : true,
 geometryServiceURL : geometryService
 });
 mapDeferred.then(function(response) {
 map = response.map;
 dojo.byId("title").innerHTML = response.itemInfo.item.title;
 // dojo.byId("snippet").innerHTML = response.itemInfo.item.snippet;
 dojo.byId("dataSource").innerHTML = "<a target='_blank' href='http://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>";
 layers = response.itemInfo.itemData.operationalLayers;
 // clickHandle = response.clickEventHandle;
 // clickListener = response.clickEventListener;
 //add the legend
 var layerInfo2 = dojo.map(layers, function(layer, index) {
 return {
 layer : layer.layerObject,
 title : layer.title
 };
 });
 if (layerInfo2.length > 0) {
 var legendDijit = new esri.dijit.Legend({
 map : map,
 layerInfos : layerInfo2
 }, "legendDiv");
 legendDijit.startup();
 }
 var overviewMap = new esri.dijit.OverviewMap({
 map : map
 }, dojo.byId("overviewDiv"));
 overviewMap.startup();
 }, function(error) {
 console.log("CreateMap failed: ", dojo.toJson(error));
 });
 }
 function initEditor(bool) {
 //initialize the editor
 if (bool == true) {
 // dojo.disconnect(clickHandle);
 dojo.create("div", {id: "templateDiv"}, "rightPane")
 dojo.create("div", {id: "editorDiv"}, "rightPane")
 var layerInfo = [];
 var templateInfo = [];
 dojo.forEach(layers, function(layer) {
 layerInfo.push({
 'featureLayer' : layer.layerObject
 });
 templateInfo.push(layer.layerObject);
 });
 templatePicker = new esri.dijit.editing.TemplatePicker({
 featureLayers : templateInfo,
 grouping : true,
 rows : 'auto',
 columns : 'auto'
 }, 'templateDiv');
 templatePicker.startup();
 var settings = {
 map : map,
 templatePicker : templatePicker,
 geometryService : new esri.tasks.GeometryService(geometryService),
 layerInfos : layerInfo,
 toolbarVisible : true,
 showAttributesOnClick : true,
 enableUndoRedo : true
 };
 var params = {
 settings : settings
 };
 editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
 editorWidget.startup();
 } else {
 if (editorWidget) {
 editorWidget.destroy();
 editorWidget = null;
 }
 if (templatePicker) {
 templatePicker.destroy();
 templatePicker = null
 }
 // dojo.connect(map, "onClick", clickListener);
 }
 }
 //show map on load
 dojo.addOnLoad(init);
 </script>
 <script type="text/javascript">
 function showPane(pane, otherpane) {
 if (dojo.style(dojo.byId(pane), "display") == "none") {
 dojo.style(dojo.byId(pane), "display", "block");
 initEditor(true);
 } else {
 dojo.style(dojo.byId(pane), "display", "none");
 initEditor(false);
 }
 }
 </script>
</head>
<body class="claro">
 <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
 <div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
 <div id="title"></div>
 <!-- <div id="snippet"></div> -->
 <nav id="menu">
 <ul>
 <li>
 <a href="#" onclick="showPane('rightPane', 'centerPane');">Edit</a>
 </li>
 </ul>
 </nav>
 </div>
 <div id="leftPane" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
 <div data-dojo-type="dijit.layout.AccordionContainer">
 <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
 <div id="legendDiv"></div>
 </div>
 <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Pane 2'">
 This pane could contain tools or additional content
 </div>
 </div>
 </div>
 <div id="centerPane" data-dojo-type="dijit.layout.BorderContainer" class="roundedCorners" data-dojo-props="region:'center',gutters:'false'">
 <div id="map" data-dojo-type="dijit.layout.ContentPane" class="shadow" data-dojo-props="region:'center'" style="position:relative; overflow:hidden;">
 <div id="ovWin" class="shadow" style="position:absolute; right:5px; top:5px; z-Index:998; width:100px;height:100px; ">
 <div id="overviewDiv" style="width:100%;height:100%;"></div>
 </div>
 </div>
 <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
 <div id="dataSource"></div>
 </div>
 </div>
 <div id="rightPane" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="">
 <!-- <div id="templateDiv"></div>
 <div id="editorDiv"></div> -->
 </div>
 </div>
</body>

I realize that I could recreate a custom InfoWindow and AttributeInspector, but since this is already done automatically by the API, it would be nice if I didn't have to.

I tried to get the clickEventHandle and clickEventListener from the response given by mapDeffered.then() and then connect and disconnect when the editor is disabled and enabled, but the default popups remained even after I called dojo.disconnect(clickEventHandle).

Any help would be greatly appreciated.

Answer 1

Think you almost have it. It may be that you need to reset the handle on connect...

clickHandle = dojo.connect(map, "onClick", clickListener);

The following is working for me...

var agolPopupClickHandle,
 agolPopupclickEventListener;
 //get the response
 .then {
 agolPopupClickHandle = response.clickEventHandle;
 agolPopupclickEventListener = response.clickEventListener;
 }
 //connect editor
 if (agolPopupClickHandle) {
 dojo.disconnect(agolPopupClickHandle);
 agolPopupClickHandle = null;
 }
 //disconnect editor
 if (!agolPopupClickHandle) {
 agolPopupClickHandle = dojo.connect(theMap, "onClick", agolPopupclickEventListener);
 }

Answer 2

So with further trial and error, I discovered the issue. I was unaware of how dojo.disconnect and dojo.connect work.

If I turn off the ignorePopups option when calling esri.arcgis.utils.createMap I will get the standard popup. Then, in the mapDeferred.then call, I set global variables

clickHandle = response.clickEventHandle
clickListener = response.clickEventListener

Later in my initEditor function, if bool == true then I disconnect clickHandle

dojo.disconnect(clickHandle)

In the else clause:

dojo.disconnect(clickHandle) // This will disconnect the original clickHandle if it is still connected
clickHandle = dojo.connect(map, "onClick", clickListener) // This will reconnect clickListener and return a new clickHandle that can be disconnected next time the editor is enabled

The issue was that I had multiple handles connected to the onClick event and I was only disconnecting one or the other and not both.

• awesomo: Lol, I was answering as you posted..
• Ann: Can you post the final code?

Answer 3

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

map.infoWindow.set("popupWindow", false);

• nmtoken: Not enough detail to answer the question. You should explain why this solves the issue, especially as the OP has accepted one answer and and posted another.