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.
Best Answer
Think you almost have it. It may be that you need to reset the handle on connect...
The following is working for me...