6

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.

3 Answers 3

7

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);
    }
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.

2
  • Lol, I was answering as you posted..
    – awesomo
    Jan 23, 2013 at 19:17
  • Can you post the final code?
    – Ann
    Dec 2, 2013 at 16:34
-1

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

1
  • 1
    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.
    – nmtoken
    Jul 3, 2019 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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