How do I resolve the conflict of info Windows on multiple widgets?

4978
20
Jump to solution
12-18-2014 07:52 AM
ChrisSergent
Regular Contributor III

I have a geocode widget and the default editor widget. They both use infoWindows. When I do a search for an address, the goecode widget's infoWindow is retained. For example if I search for an address of 100 S Main and then I click on the editor widget, instead of the editor window displaying, the address that I just search for displays. The conflict is infoWindow. What do I need to do to my code to resolve this conflict?

Here are the two blocks of code for these widgets:

Editor-

// Starts initEditing after the feature layer(s) have been added

                map.on("layers-add-result", initEditing);

                // add imagery

                var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

                map.addLayer(tiled);

                // add operational layer

                var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", {

                    "opacity": 0.5

                });

                map.addLayer(operationalLayer);

                // add point feature layer for editing

                var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

                    mode: FeatureLayer.MODE_ONDEMAND,

                    outFields: ["*"]

                });

                map.addLayers([pointFeatureLayer]);

                // settings for the editor widget

                function initEditing(event) {

                    // sizes the edit window

                    map.infoWindow.resize(400, 300);

                    var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

                        return {

                            "featureLayer": layer.layer

                        };

                    });

                    var settings = {

                        map: map,

                        layerInfos: featureLayerInfos,

                        toolbarVisible: true,

                        enableUndoRedo: true,

                        maxUndoOperations: 20

                    };

                    var params = {

                        settings: settings

                    };

                    var editorWidget = new Editor(params, 'editorDiv');

                    editorWidget.startup();

                    var options = { snapKey: keys.copyKey };

                    map.enableSnapping(options);

                }

Geocode -

// begin geocoder

                var geocoder = new Geocoder({

                    arcgisGeocoder: false,

                    geocoders: [{

                        url: "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

                        name: "Web Address Locator",

                        placeholder: "Find address",

                        outFields: "*"

                    }],

                    map: map,

                    autoComplete: true,

                    zoomScale: 600

                }, dom.byId("search"));

                geocoder.startup();

                geocoder.on("select", showGeocodeLocation);

                function showGeocodeLocation(evt) {

                    map.graphics.clear();

                    var point = evt.result.feature.geometry;

                    var symbol = new SimpleMarkerSymbol()

                        .setStyle("square")

                        .setColor([255, 0, 0, 0.5]);

                    var graphic = new Graphic(point, symbol);

                    map.graphics.add(graphic);

                    map.infoWindow.setTitle("Search Result");

                    map.infoWindow.setContent(evt.result.name);

                    map.infoWindow.show(evt.result.feature.geometry);

                    map.infoWindow.on('hide', function () {

                        map.graphics.clear();

                        map.infoWindow.clear();

                    });

                }

                // end geocoder

0 Kudos
20 Replies
williamcarr
Occasional Contributor II

oh yes, sorry.  In the code I replaced the:

     function initSelectToolbar(layer) {

         var petroFieldsFL = layer;

         petroFieldsFL.setInfoTemplate();

         var selectQuery = new Query();

         map.on("click", function (evt) {

             selectQuery.geometry = evt.mapPoint;

             petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {

                 if (features.length > 0) {

                     //store the current feature

                     updateFeature = features[0];

                     map.infoWindow.setTitle(features[0].getLayer().name);

                     map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

                 } else {

                     map.infoWindow.hide();

                 }

             });

         });

  map.infoWindow.on("hide", function () {

             petroFieldsFL.clearSelection();

         });

With:

     function initSelectToolbar(evt) {

          var asdf = evt.layers[0].layer;

          asdf.setInfoTemplate();

          var selectQuery = new Query();

          map.on("click", function(evt) {

              var selectionQuery = new esri.tasks.Query();

        var tol = map.extent.getWidth()/map.width * 15;

        var x = evt.mapPoint.x;

        var y = evt.mapPoint.y;

        var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

        selectionQuery.geometry = queryExtent;

        asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

            

               //store the current feature

                updateFeature = features[0]; console.log("adf");

                map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

                map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

        });

      

          });

In order to accommodate multiple feature point and line feature layers. My personal project, along with the fiddle(with the changes) throws the TypeError: evt.layers is undefined..

0 Kudos
KellyHutchins
Esri Frequent Contributor

How are you calling the initSelectToolbar function?  In the fiddle you sent it looks like you are doing so when the edit pane is clicked. In that example you are calling initSelectToolbar(petroFieldsLayer) which means that in initSelectToolbar you'll have access to the layer but its not var asdf = evt.layers[0].layer;

Have you made additional modifications to the code?

0 Kudos
williamcarr
Occasional Contributor II

Getting the initSelectToobar function to run is the issue. I can access single layers by calling them individually, and then go from attribute inspector to popup template without issue, but i have 5 other layers in my app that don't require the popup template. The fiddle works when intiSelectToolbar(petroFieldsLayer) is called.. But any attempts at loading an array of layers(and there has been many attempts) for the attribute inspector have failed. I'm not sure what to try next.

0 Kudos
KellyHutchins
Esri Frequent Contributor

William

Can you send a working code sample showing what you are trying? Might be easier to do so in a new thread because this one is getting kind of confusing since there are two similar (but not the same) questions and users who find this thread later may be confused.

Kelly

0 Kudos
williamcarr
Occasional Contributor II
0 Kudos
ChrisSergent
Regular Contributor III

William,

Just a side note. We have a power user group(we have a couple of programmers) we started in my area; saw you were from Illinois too. If you are interested, follow me and I will send you my contact info.

Chris

0 Kudos
ChrisSergent
Regular Contributor III

Kelly,

I tried to integrate the code into my main application and the title bar does not display when I geocode an address and the content does not display for the editor widget. Did I miss something when I attempted to combine the code?

I uploaded my project on dropbox so you would get the related files- Dropbox - decaturGisEditor.zip

Chris

0 Kudos
KellyHutchins
Esri Frequent Contributor

Chris,

There may be errors in your version due to the code modifications. Try running the app and use the developer tools available in Chrome or Firefox to see if there are any errors written to the console. The developer tools will also allow you to step through the code to find the problem.

ChrisSergent
Regular Contributor III

I ran it in Chrome and the console displays no errors or warnings.

0 Kudos
KellyHutchins
Esri Frequent Contributor

Ok so you are missing a few things in your version of the code.  In the revised code the editor is created and placed using the create and place methods from dojo/dom-construct. So you'll need to load this module in the requires section. 

The code also checks to see if the Editor widget is already created by checking a global variable called editorWidget. In your code you use that value but never declare it with var. Try adding it as a variable around line 326 with your other globals. For example you'd add var editorWidget = null;

To find this type of error I'll typically set a breakpoint in my code just before the area I suspect is the problem then I step through the code line by line to check variable values, look for undefined things etc.