wshuart

Combine identify task with results in tab content frame

Discussion created by wshuart on Dec 2, 2010
Latest reply on Dec 2, 2010 by lowgas
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[i];
                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[i].attributes['PARCELID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>";
                        content += "<td>" + layerResults.features[i].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> 




Outcomes