chyang0107

zoom-in function in popout window

Discussion created by chyang0107 on Jan 14, 2014
Latest reply on Jan 21, 2014 by JUihlein-esristaff
Hi All,

I have a question if I could zoomin to a feature of selected when I click the "show" in popout window. I put codes in the function "showFeature(feature) "(red texts in the bottom part of the code). However, it failed to work. Please let me know if you all have any idea.

Thanks,
Hank


<!DOCTYPE html>
<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>Identify Sample</title>
   
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
       html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
    </style>

    <script>var dojoConfig = { parseOnLoad:true }</script>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.identify");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.form.Button");
      dojo.require("esri.tasks.geometry");
      var map, identifyTask, identifyParams, symbol;
    

      function init() {
        map = new esri.Map("map", {
          basemap: "streets",
          center: [-106.9048, 34.0665],
          zoom: 7
        });
        dojo.connect(map, "onLoad", initFunctionality);
       
        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://129.138.12.83:6080/arcgis/rest/services/aasg_geothermal/Geothermal/MapServer",{opacity:.70});
        dojo.connect(map.infoWindow, "onShow", function() {
          dijit.byId("tabs").resize();
        });
        map.addLayer(landBaseLayer);

      }

      function initFunctionality(map) {
       
        dojo.connect(map, "onClick", doIdentify);

        identifyTask = new esri.tasks.IdentifyTask("http://129.138.12.83:6080/arcgis/rest/services/aasg_geothermal/Geothermal/MapServer");

        identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0,1,2,3];
        identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width  = map.width;
        identifyParams.height = map.height;
       
        map.infoWindow.resize(415, 200);
        map.infoWindow.setContent(dijit.byId("tabs").domNode);
        map.infoWindow.setTitle("Identify Layers");

        symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,   new dojo.Color([255,0,0]), 1),
   new dojo.Color([0,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) {
        BT0 = {displayFieldName:null,features:[]};
        BT1 = {displayFieldName:null,features:[]};
   BT2 = {displayFieldName:null,features:[]};
BT3 = {displayFieldName:null,features:[]};
 
 
 

        for (var i=0, il=idResults.length; i<il; i++) {
          var idResult = idResults[i];
          if (idResult.layerId === 0) {
            if (!BT0.displayFieldName) {BT0.displayFieldName = idResult.displayFieldName};
            BT0.features.push(idResult.feature);
          }
          else if (idResult.layerId === 1) {
            if (!BT1.displayFieldName) {BT1.displayFieldName = idResult.displayFieldName};
            BT1.features.push(idResult.feature);
          }
    else if (idResult.layerId === 2) {
            if (!BT2.displayFieldName) {BT2.displayFieldName = idResult.displayFieldName};
            BT2.features.push(idResult.feature);
          }
    else if (idResult.layerId === 3) {
            if (!BT3.displayFieldName) {BT3.displayFieldName = idResult.displayFieldName};
            BT3.features.push(idResult.feature);
          }
        }
        dijit.byId("BT0").setContent(layerTabContent(BT0,"BT0"));
        dijit.byId("BT1").setContent(layerTabContent(BT1,"BT1"));
  dijit.byId("BT2").setContent(layerTabContent(BT2,"BT2"));
  dijit.byId("BT3").setContent(layerTabContent(BT3,"BT3"));
 
 
        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
      }

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

      function showFeature(feature) {
  var featureExtent = feature[0].geometry.getExtent();
        map.graphics.clear();
        feature.setSymbol(symbol);
        map.graphics.add(feature);
        map.setExtent(featureExtent);
      }

      dojo.ready(init);
    </script>

  </head>
  <body class="claro">
    Click the map to identify building and tax information.
    <div id="map" style="width:800px; height:600px; border:1px solid #000;"></div>
    <!-- info window tabs -->
    <div id="tabs" dojoType="dijit.layout.TabContainer" style="width:385px;height:150px;">
       <div id="BT0" dojoType="dijit.layout.ContentPane" title="BoreT(<50F)"></div>
       <div id="BT1" dojoType="dijit.layout.ContentPane" title="BoreT(50-100F)"></div>
       <div id="BT2" dojoType="dijit.layout.ContentPane" title="BoreT(100-150F)"></div>
       <div id="BT3" dojoType="dijit.layout.ContentPane" title="BoreT(150-200F)"></div>
    </div>
  </body>
</html>

Outcomes