Identify all layers on the map without pre-designing the infoWindow

Question

This applies to the ArcGIS Server JavaScript API 2.4.

The Identify Task sample shows how IdentifyTask can be used to find features in multiple layers, as specified in the IdentifyParameters:

identifyParams.layerIds = [0,2];

In this sample, the infoWindow already contains elements for the expected layers, which are used to display multiple features in separate tabs of the infoWindow:

<!-- info window tabs -->
<div id="tabs" dojoType="dijit.layout.TabContainer" style="width:385px;height:150px;">
  <div id="bldgTab" dojoType="dijit.layout.ContentPane" title="Buildings"></div>
  <div id="parcelTab" dojoType="dijit.layout.ContentPane" title="Tax Parcels"></div>
</div>

//In the JavaScript:
dijit.byId("bldgTab").setContent(layerTabContent(bldgResults,"bldgResults"));
dijit.byId("parcelTab").setContent(layerTabContent(parcelResults,"parcelResults"));

Is there a way to handle this dynamically, and create the required tabs at run-time?

For example, I wish to run IdentifyTask on all visible layers, and return the results in a separate tab of the infoWindow. How can I create the tabs dynamically?

Answer 1

Yes, this is possible. To create your tabs dynamically, look at creating dojo dijits programmatically vs. declaratively. When your visible layers change, modify your tab container to remove or add the appropriate tabs.

Edit: here's a proof of concept on JS Fiddle: http://jsfiddle.net/swingley/wKue4/ It doesn't really handle attributes but lets you select which layers to identify and builds the info window content dynamically.

Answer 2

I have figured out a way to do that, but unfortunately, for a Flex project. I don't know how transferable this is to JavaScript, but hopefully this will give you an idea of the logic. For each visible layer, the features returned from the IdentifyTask are put into a datagrid on a separate tab. Although I didn't include the additional code for the listeners added to each row in the datagrids, as you roll over each of the rows in the datagrid, the feature is highlighted on the map. You can see this in action here.

            protected function MainMap_mapClickHandler(event:MapMouseEvent):void
        {
            var identifyParams:IdentifyParameters = new IdentifyParameters();
            var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPointSymbol);

            identifyParams.returnGeometry = true;
            identifyParams.tolerance = 5;
            identifyParams.width = MainMap.width;
            identifyParams.height = MainMap.height;
            identifyParams.geometry = event.mapPoint;
            identifyParams.mapExtent = MainMap.extent;
            identifyParams.spatialReference = MainMap.spatialReference;
            identifyParams.layerIds = dynamicLayer.visibleLayers.source;
            identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
            clickGraphicsLayer.clear();
            MainMap.infoWindow.hide();

            graphicsLayer.clear();
            cursorManager.setBusyCursor();

            identifyTask.url = dynamicLayer.url;
            identifyTask.execute(identifyParams, new AsyncResponder(resultFunction, faultFunction, clickGraphic));

            function resultFunction(results:Array, clickGraphic:Graphic):void
            {
                var myInfoRenderer:InfoRenderer = new InfoRenderer;
                var mapPoint:MapPoint = MapPoint(clickGraphic.geometry);
                var point:Point = MainMap.toScreen(mapPoint);

                if (results && results.length > 0)
                {
                    var oldLayer:Number = -1;
                    var resultsArray:Array = [];
                    var result:IdentifyResult;
                    var resultGraphic:Graphic;
                    var tab:TabNavigator = new TabNavigator();
                    var newVBox:VBox = new VBox;
                    var newVBoxDG:VBox = new VBox;
                    var newText:Text = new Text;
                    var newDG:DataGrid = new DataGrid;
                    var graphic:Graphic;

                    clickGraphicsLayer.add(clickGraphic);

                    result = results[0];
                    oldLayer = result.layerId;
                    resultsArray.push(result.feature.attributes);
                    newText = new Text;
                    newText.text = result.layerName;
                    graphic = result.feature;
                    graphic.alpha = 0.3;
                    graphicsLayer.add(graphic);
                    tab.width = 400;
                    tab.height = 230;

                    for (var i:int = 1; i < results.length; i++)
                    {
                        result = results[i];
                        graphic = new Graphic;
                        graphic = result.feature;
                        graphic.alpha = 0.3;
                        graphicsLayer.add(graphic);
                        if (result.layerId == oldLayer)
                        {
                            resultsArray.push(result.feature.attributes);
                        }
                        else
                        {
                            newDG = new DataGrid;
                            newVBox = new VBox;
                            newDG.dataProvider = resultsArray;


                            newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                            newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0 ,true);
                            newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);

                            newVBox.addElement(newText);
                            newVBox.addElement(newDG);

                            newVBox.label = oldLayer.toString();
                            newVBox.label = oldLayer.toString();
                            tab.addElement(newVBox);
                            myInfoRenderer.addElement(tab);

                            newText = new Text;
                            newText.text = result.layerName;
                            resultsArray = [];
                            resultsArray.push(result.feature.attributes);
                        }
                        oldLayer = result.layerId;
                    }

                    newVBox = new VBox;
                    newVBoxDG = new VBox;
                    newDG = new DataGrid;
                    newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                    newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0, true);
                    newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);
                    newVBox.addElement(newText);
                    newDG.dataProvider = resultsArray;

                    newVBox.addElement(newDG);
                    newVBox.label = oldLayer.toString();
                    tab.addElement(newVBox);
                    myInfoRenderer.addElement(tab);

                    cursorManager.removeBusyCursor();

                    MainMap.infoWindow.content = myInfoRenderer;
                    MainMap.infoWindow.label = "Results";
                    MainMap.infoWindow.show(MainMap.toMap(point));
                    MainMap.infoWindow.addEventListener(Event.CLOSE, infoWindow_Close, false, 0, true);
                }
            }
        }