Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 6 down vote accepted

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);
    }
share|improve this answer
add comment

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.

share|improve this answer
    
Lol, I was answering as you posted.. –  awesomo Jan 23 '13 at 19:17
    
Can you post the final code? –  Ann Dec 2 '13 at 16:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.