Combine identify task with results in tab content frame

WilliamShuart · ‎12-02-2010

Hello-
I'm realtivly new to the api... I'm using the map layout sample and the identify sample to combine them. I'm trying to allow the user to identify a polygon and then show the results of the identify in a tab next to the legend tab. I'll post my code below. I can get a map, but haven't been able to get the identify working yet - nor display it in the tab instead of the common infowindow.

Thanks for the help! I'd be interestested in comments on the code or any samples anyone has that might that might help. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>
    </title>
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
     <style type="text/css">
      html, body { 
        height: 100%; width: 100%; margin: 0; 
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Trebuchet MS"; 
      }
      #header {
        background-image: url(images/banner.jpg); background-repeat: repeat-x;
        margin: 2px;
        border: solid 4px #224a54;
        color:white; font-size:18pt; 
        text-align:left; font-weight:bold; height:70px;
      }
      #subheader {
        font-size:small;
        color:white;
        padding-left:20px;
      }
      #rightPane{
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
      }
      #leftPane{
        margin: 5px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 4px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:40px;
      }
      .dijitTabInnerDiv{
        background-color:#ecefe4;
      }
      #tabs{
        padding:5px;
      }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.tasks.identify");
        dojo.require("esri.map");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("esri.dijit.Legend");

        var map;
        function init() {
            var initialExtent = new esri.geometry.Extent({ "xmin": -9380000.069899248, "ymin": 4340000.391548632, "xmax": -8330000.0000, "ymax": 4895884.47539039, "spatialReference": { "wkid": 102100} });
            map = new esri.Map("map", {
                extent: initialExtent
            });
            dojo.connect(map, 'onLoad', function (map) {
                dojo.connect(dijit.byId('map'), 'resize', resizeMap);
            });
            var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
            var dynamicUrl = "http://gis.vcu.edu/ArcGIS/rest/services/Housing/MapServer";


            var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl, { opacity: 0.55 });
            var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl, { opacity: 0.8 });
            

            dojo.connect(map, 'onLayersAddResult', function (results) {
                //add the legend 
                var legend = new esri.dijit.Legend({
                    map: map,
                    layerInfos: [{ layer: dynamicLayer, title: "Housing"}],
                    arrangement: esri.dijit.Legend.ALIGN_Left
                }, "legendDiv");
                legend.startup();
            });

            map.addLayer(basemap);
            map.addLayers([dynamicLayer]);
        }


        //addedcontent for identify widgit start here WS
        function initFunctionality(map) {
            dojo.connect(map, "onClick", doIdentify);

            identifyTask = new esri.tasks.IdentifyTask("http://gis.vcu.edu/ArcGIS/rest/services/housing/MapServer");

            identifyParams = new esri.tasks.IdentifyParameters();
            identifyParams.tolerance = 3;
            identifyParams.returnGeometry = true;
            identifyParams.layerIds = [0];
            identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
            identifyParams.width = map.width;
            identifyParams.height = map.height;
                        
            symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
        }

        function doIdentify(evt) {
            map.graphics.clear();
            identifyParams.geometry = evt.mapPoint;
            identifyParams.mapExtent = map.extent;
            identifyTask.execute(identifyParams, function (idResults) { addToMap(idResults, evt); });
        }

        function addToMap(idResults, evt) {
            CountyResults = { displayFieldName: null, features: [] };

            for (var i = 0, il = idResults.length; i < il; i++) {
                var idResult = idResults;
                if (idResult.layerId === 0) {
                    if (!CountyResults.displayFieldName) { CountyResults.displayFieldName = idResult.displayFieldName };
                    CountyResults.features.push(idResult.feature);
                }
            }
            dijit.byId("ResultsDiv").setContent(layerTabContent(CountyResults, "CountyResults"));
        }

        function layerTabContent(layerResults, layerName) {
            var content = "";
            switch (layerName) {
                case "CountyResults":
                    content = "<i>Total features returned: " + layerResults.features.length + "</i>";
                    content += "<table border='1'><tr><th>ID</th><th>Address</th></tr>";
                    for (var i = 0, il = layerResults.features.length; i < il; i++) {
                        content += "<tr><td>" + layerResults.features.attributes['PARCELID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>";
                        content += "<td>" + layerResults.features.attributes['Full Site Address'] + "</td>";
                    }
                    content += "</tr></table>";
                    break;
           }
            return content;
        }

        function showFeature(feature) {
            map.graphics.clear();
            feature.setSymbol(symbol);
            map.graphics.add(feature);
        }




        //end here with added content stuff

        function resizeMap() {
            //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
            //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_faq.htm
            var resizeTimer;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                map.resize();
                map.reposition();
            }, 500);
        }
        //show map on load 
        dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
        This is the header section
       <div id="subheader">subheader</div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
            <div id="legendDiv"></div>
          </div>
          <div dojotype="dijit.layout.ContentPane"  title = "Results" selected="false">
            <div id="ResultsDiv"></div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        this is the footer section
      </div>
    </div>
  </body>

</html>

timgogl · ‎12-02-2010

this sample puts the results of an identify inside tabs (inside an infowindow).

WilliamShuart · ‎12-02-2010

Thanks-
yes, I used the skeleton of that code to perform the identify. However, I do not want an 'infowindow'. I want the results to be displayed in a tab off of the map (see image).

So, I combined the tabbed layout/legend sample and the identify sample. I have the legend showing up, I just can't get the results of the identify operation to show in a "results' tab off the map.

a screen-shot is attached

timgogl · ‎12-02-2010

if you look in the sample, the content for the tabs are produced in the function layerTabContent.

this function returns formatted html. just send the results of that function to the div ie: (dojo.byId(mytabdivid)) that identifies the tab you want to use to show the identify data.

heh. since the function is for two tabs, it wont work out of the box for you, but hopefully you get the idea of how to go about it.