Community
Select to view content in your preferred language

Query a layer with multiple search criterias

5248
28
Jump to solution
04-09-2014 08:05 PM
kiranbodhasrungi
by
Deactivated User
‎04-09-2014 08:05 PM
hi,

i have a requirement in my project where i have to query the layer with the help of multiple search fields.How can i achieve this?

till now i have been doing it like this:

findParams.layerIds = [1];
findParams.searchFields = ["STREET_NAME", "STREET_NUMBER"];

findTask.execute(findParams, showResults);

I have  a single text box and i query the map with the help street name OR number.How can i combine both(similar to AND) to filter results?

thanks in advance.

keran.
0 Kudos
28 Replies
RaymondGoins
by
Regular Contributor
‎04-14-2014 07:37 AM
Here is the code or the featureZoom function which also uses the showFeature function
I have these outside the require section.
    function featureZoom(feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      //console.log(result);
      if(ftype == "point")
      {
        var pt = feature.geometry;
        var factor = 1; //some factor for converting point to extent
        var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
        map.setExtent(extent.expand(60));
        showFeature(feature);
      } else {
        var fExtent = feature.geometry.getExtent().expand(3);
        map.setExtent(fExtent);
        showFeature(feature);
      }

    }

    function showFeature (feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      if(ftype == "point")
      {
        feature.setSymbol(psymbol)
        setTimeout(function(){map.graphics.clear()}, 3000); // 3000 is a timeout to show the feature then clear it. change to liking
      } else {
        feature.setSymbol(symbol);
        setTimeout(function(){map.graphics.clear()}, 3000);  // 3000 is a timeout to show the feature then clear it. change to liking
      }
      map.graphics.add(feature);
    }


The symbol and psymbol are set in the map initialize function for the identify/query

          symbol =  new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                      new Color([0, 255, 255]), 5),
                      new Color([255, 255, 0, 0.25])
                    );
          psymbol = new SimpleMarkerSymbol(
                      SimpleMarkerSymbol.STYLE_CIRCLE, 8,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([0, 255, 255]), 8),
                        new Color([255, 255, 0, 0.25])
                    );


Let me know how you make out.

Ray
0 Kudos
kiranbodhasrungi
by
Deactivated User
‎04-14-2014 09:04 AM
But where are you adding these results on the map?I mean if i have some 20 results from the search,which am displaying on the grid,i click one one of the rows,how can we identify the point on the map?I tried to add these results to the map before selecting a row in the grid but my map is always empty!! i cant see my results added to the map.

here is my code:

function init() {
  //dojo.connect(grid, "onRowClick", onRowClickHandler);

  center = [ -72.65065, 41.56232 ];
  zoom = 11;
  map = new esri.Map("map", {
   basemap : "streets",
   center : center,
   zoom : zoom
  });
 
  var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
  "http://localhost:6080/arcgis/rest/services/MidParcelFabric/MapServer");
  map.addLayer(censusMapLayer);
}
      function AddressSearchTask(stname)
      {
       console.log('into AddressSearchTask');
     var query,queryTask;
        streetname = stname.toUpperCase();
        queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/MidParcelFabric/MapServer/1");
        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["STREET_NAME", "GRANTEE", "CAMAACCT_1"];
        query.where ="STREET_NAME like '%" + stname + "%'";// + " OR " + "STREET_NUMBER like '%" + stnum + "%'";
        //if(stcity != 0)
        //{
          //query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%' AND ZN = '" + stcity + "'";
        //}
        queryTask.execute(query, populateResults);
      }
      //populate results info templates for all results
      function populateResults(results) {
       console.log('length:'+results.features.length);
       console.log('into populateResults');
      
       var symbol = new esri.symbol.SimpleFillSymbol(
     esri.symbol.SimpleFillSymbol.STYLE_NONE,
     new esri.symbol.SimpleLineSymbol(
       esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
       new dojo.Color([ 255, 0, 0 ]), 2), new dojo.Color([
       255, 255, 0, 0.25 ]));
       map.graphics.clear();
       var addr = results.features;
       for ( var i = 0, il = addr.length; i < il; i++) {
       
        var graphic = addr;
    graphic.setSymbol(symbol);
    var pid = addr.attributes['CAMAACCT_1'];
    console.log(pid);
    var infoTemplate = new esri.InfoTemplate();
    infoTemplate.setTitle(addr.attributes['CAMAACCT_1']);
    infoTemplate.setContent("Account Number: "
        + addr.attributes['CAMAACCT_1']
        + "<br />Street Name:"
        + addr.attributes["STREET_NAME"]
        + "<br />Owner Name: "
        + addr.attributes["GRANTEE"]
        + "<br/>Location:"
        + addr.attributes["PROPERTY_LOCATIO"]
        + "<br/>Click<a href='#' onclick='propertyReport(\""
        + pid
        + "\")'>here</a>to view Property Report Card");
    graphic.setInfoTemplate(infoTemplate);
    map.graphics.add(graphic);
        }
       console.log(map.graphics.length);
   addrList(results);
  
  }
      //populate grid
      function addrList(results)
      {
       console.log('addrList');
       var text = '';
       var addr = results.features;
       addresslist = results.features;
   text += '<thead><tr>'
           +"<th>Street Name</th>"
           +"<th>Owner</th>"
           +"<th>Account No</th>"
         +"</tr></thead> <tbody>";
   for ( var i = 0, il = addr.length; i < il; i++) {
   
    text += '<tr>'
      + '<td>' + addr.attributes["STREET_NAME"] + '</td>'
      + '<td>' + addr.attributes["GRANTEE"] + '</td>'
      + '<td>' + addr.attributes["CAMAACCT_1"] + '</td>'
      //+ '<td>' + '<a href="#" onclick="zoomToProperty('+addr.attributes["CAMAACCT_1"]+')">(Zoom To)</a>' + '</td>'
      + '<td><a href="#" onclick="zoomToProperty('+i+')">(Zoom To)</a></td>'
      + '</tr>';
   }
   text +="</tbody>";
   $('#resultsGrid').html(text);
     
      }
    //Zoom to the parcel when the user clicks a row
  function zoomToProperty(cammaacct) {
      console.log(cammaacct);
   var clickedCammaacct = addresslist[cammaacct].attributes["CAMAACCT_1"];
   console.log(clickedCammaacct);
  
   var selectedTaxLot;
   alert(map.graphics.graphics.length);
   for ( var i = 0, il = map.graphics.graphics.length; i < il; i++) {
    var currentGraphic = map.graphics.graphics;
    if ((currentGraphic.attributes)
      && currentGraphic.attributes.CAMAACCT_1 == clickedTaxLotId) {
     selectedTaxLot = currentGraphic;
     break;
    }
   }
           if ( selectedTaxLot.length ) {
             map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
           }
         //Zoom back to the initial map extent
           map.centerAndZoom(center, zoom);
  }
0 Kudos
RaymondGoins
by
Regular Contributor
‎04-14-2014 09:45 AM
OK will run down the steps. first address form is opened

code for form.
[HTML]    <div id="form_address_search" class="esriPopup PopUpForm" style="display:none;">
      <div class="titlePane">
        <div class="title">Search for Address</div>
        <div class="titleButton close"></div>
      </div>
      <div class="contentPane PopUpContent" style="min-height: 163px;">
        <label for="addnum">Building Number:</label><br>
        <div id="addnum" data-dojo-type="dijit/form/TextBox" class="clearresults" data-mdiv="asmessages" style="width:50px;"></div>
        <br> <br>
        <label for="addname">Street Name:</label><br>
        <div id="addname" data-dojo-type="dijit/form/TextBox" class="clearresults" data-mdiv="asmessages"></div>
        <br> <br>
        <label for="addcity">Select Town:</label><br>
          <select id="addcity" data-dojo-type="dijit/form/Select" class="clearresults" data-mdiv="asmessages" >
            <option value="0" selected="selected">All Towns</option>
            <option value="CRANSTON">Cranston</option>
            <option value="JOHNSTON">Johnston</option>
            <option value="NORTH PROVIDENCE">North Providence</option>
            <option value="PROVIDENCE">Providence</option>
            <option value="LINCOLN">Lincoln</option>
            <option value="PAWTUCKET">Pawtucket</option>
            <option value="SCITUATE">Scituate</option>
          </select>
        <br> <br>
        <div data-dojo-type="dijit/form/Button" id="AddressSearch">Search</div>
        <div id="asmessages" class="errmess"></div>
        <div id="addrlist" ></div>
      </div>
    </div>[/HTML]
Notice the divs with id "addrlist" and "asmessages" see pic 1

user clicks the search button
        registry.byId("AddressSearch").on("click", function ()
          {
            map.graphics.clear();
            var stnum = registry.byId("addnum").get("value");
            var stname = registry.byId("addname").get("value");
            var stcity = registry.byId("addcity").get("value");
            AddressSearchTask(stnum, stname, stcity);
          }
        );

gets the values and passes them to the addressSearchTask
        function AddressSearchTask(stnum, stname, stcity)
        {
          streetname = stname.toUpperCase();
          queryTask = new QueryTask("http://192.168.20.14:6080/arcgis/rest/services/emap12/MapServer/17");
          query = new Query();
          query.returnGeometry = true;
          query.outFields = ["PRIMARYADD", "ZN"];
          query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%'";
          if(stcity != 0)
          {
            query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%' AND ZN = '" + stcity + "'";
          }
          queryTask.execute(query, pickAddress);
        }

Once found passes results to the pickAddress function
if no results are found show the messages div see pic 3
        function pickAddress(results)
        {
          AddrFeatures = results.features;
          var scount = AddrFeatures.length;
          switch(scount)
          {
            // if no address found show the message in div
            case 0:
            showMessage("asmessages", "Address not found");
            break;
            // if only one message found just zoom directly to it
            case 1:
            zoomToStreet(results);
            break;
            // if multiple addresses found
            default:
            // create the variable for the address results
            AddrResults = {displayFieldName: null, features:[]};
            // loop through the features found and add them for the AddrResults variable
            for (var i = 0; i < scount; i++)
            {
              var aResult = AddrFeatures;
              if (!AddrResults.displayFieldName){ AddrResults.displayFieldName = aResult.displayFieldName }
              AddrResults.features.push(aResult);
            }
            // pass the results to the function to format the results
            var stlist = addrList(AddrResults);
            // put the results into the addrlist div
            $("#addrlist").html(stlist);
            // show the div
            $("#addrlist").show("slow");
            break;
          }
        }


function to format the results see pic 2
        function addrList(results)
        {
          var template = "";
          var addr = results.features;
          //alert(sn.length);
          template = "<i>Streets Found: " + addr.length + "</i>";
          template += "<table border='1'>";
          template += "<tr>"
          template += "</tr>";
          for (var i = 0, il = addr.length; i < il; i++)
          {
            template += "<tr>";
            template += "<td>"+ addr.attributes["PRIMARYADD"] +" "+ addr.attributes["ZN"] +"</td>";
            template += '<td><a href="#" onclick="featureZoom(AddrResults.features['+ i +']); return false;">(Zoom To)</a></td>';
            template += "</tr>";
          }

          template += "</table>";

          return template;
        }

featureZoom function to zoom to feature
    function featureZoom(feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      //console.log(result);
      if(ftype == "point")
      {
        var pt = feature.geometry;
        var factor = 1; //some factor for converting point to extent
        var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
        map.setExtent(extent.expand(60));
        showFeature(feature);
      } else {
        var fExtent = feature.geometry.getExtent().expand(3);
        map.setExtent(fExtent);
        showFeature(feature);
      }

    }

showFeature which just lights up the feature for 3 seconds
    function showFeature (feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      if(ftype == "point")
      {
        feature.setSymbol(psymbol)
        setTimeout(function(){map.graphics.clear()}, 3000);
      } else {
        feature.setSymbol(symbol);
        setTimeout(function(){map.graphics.clear()}, 3000);
      }
      map.graphics.add(feature);
    }


You probably know most of this, I just wanted to run through my logic. I am also using jQuery to hide and show divs. You may be using something else.

Ray
Preview file
20 KB
Preview file
28 KB
Preview file
17 KB
0 Kudos
MichaelVolz
by
Esteemed Contributor
‎04-14-2014 10:57 AM
Is this what the code would look like if put together with essental HTML5/Javascript elements added (Although I am probably missing some require objects):

<!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>Query State Info without Map</title>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
  require([
        "esri/tasks/query", "esri/tasks/QueryTask"
      ],

  registry.byId("AddressSearch").on("click", function ()
          {
            map.graphics.clear();
            var stnum = registry.byId("addnum").get("value");
            var stname = registry.byId("addname").get("value");
            var stcity = registry.byId("addcity").get("value");
            AddressSearchTask(stnum, stname, stcity);
          }
        );
 
  function AddressSearchTask(stnum, stname, stcity)
        {
          streetname = stname.toUpperCase();
          queryTask = new QueryTask("http://192.168.20.14:6080/arcgis/rest/services/emap12/MapServer/17");
          query = new Query();
          query.returnGeometry = true;
          query.outFields = ["PRIMARYADD", "ZN"];
          query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%'";
          if(stcity != 0)
          {
            query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%' AND ZN = '" + stcity + "'";
          }
          queryTask.execute(query, pickAddress);
        }
 
  function pickAddress(results)
        {
          AddrFeatures = results.features;
          var scount = AddrFeatures.length;
          switch(scount)
          {
            // if no address found show the message in div
            case 0:
            showMessage("asmessages", "Address not found");
            break;
            // if only one message found just zoom directly to it
            case 1:
            zoomToStreet(results);
            break;
            // if multiple addresses found
            default:
            // create the variable for the address results
            AddrResults = {displayFieldName: null, features:[]};
            // loop through the features found and add them for the AddrResults variable
            for (var i = 0; i < scount; i++)
            {
              var aResult = AddrFeatures;
              if (!AddrResults.displayFieldName){ AddrResults.displayFieldName = aResult.displayFieldName }
              AddrResults.features.push(aResult);
            }
            // pass the results to the function to format the results
            var stlist = addrList(AddrResults);
            // put the results into the addrlist div
            $("#addrlist").html(stlist);
            // show the div
            $("#addrlist").show("slow");
            break;
          }
        }
 
  function addrList(results)
        {
          var template = "";
          var addr = results.features;
          //alert(sn.length);
          template = "<i>Streets Found: " + addr.length + "</i>";
          template += "<table border='1'>";
          template += "<tr>"
          template += "</tr>";
          for (var i = 0, il = addr.length; i < il; i++)
          {
            template += "<tr>";
            template += "<td>"+ addr.attributes["PRIMARYADD"] +" "+ addr.attributes["ZN"] +"</td>";
            template += '<td><a href="#" onclick="featureZoom(AddrResults.features['+ i +']); return false;">(Zoom To)</a></td>';
            template += "</tr>";
          }

          template += "</table>";

          return template;
        }
 
  function featureZoom(feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      //console.log(result);
      if(ftype == "point")
      {
        var pt = feature.geometry;
        var factor = 1; //some factor for converting point to extent
        var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
        map.setExtent(extent.expand(60));
        showFeature(feature);
      } else {
        var fExtent = feature.geometry.getExtent().expand(3);
        map.setExtent(fExtent);
        showFeature(feature);
      }

    }

function showFeature (feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      if(ftype == "point")
      {
        feature.setSymbol(psymbol)
        setTimeout(function(){map.graphics.clear()}, 3000);
      } else {
        feature.setSymbol(symbol);
        setTimeout(function(){map.graphics.clear()}, 3000);
      }
      map.graphics.add(feature);
    }

  </head>

  <body>
<div id="form_address_search" class="esriPopup PopUpForm" style="display:none;">
      <div class="titlePane">
        <div class="title">Search for Address</div>
        <div class="titleButton close"></div>
      </div>
      <div class="contentPane PopUpContent" style="min-height: 163px;">
        <label for="addnum">Building Number:</label><br>
        <div id="addnum" data-dojo-type="dijit/form/TextBox" class="clearresults" data-mdiv="asmessages" style="width:50px;"></div>
        <br> <br>
        <label for="addname">Street Name:</label><br>
        <div id="addname" data-dojo-type="dijit/form/TextBox" class="clearresults" data-mdiv="asmessages"></div>
        <br> <br>
        <label for="addcity">Select Town:</label><br>
          <select id="addcity" data-dojo-type="dijit/form/Select" class="clearresults" data-mdiv="asmessages" >
            <option value="0" selected="selected">All Towns</option>
            <option value="CRANSTON">Cranston</option>
            <option value="JOHNSTON">Johnston</option>
            <option value="NORTH PROVIDENCE">North Providence</option>
            <option value="PROVIDENCE">Providence</option>
            <option value="LINCOLN">Lincoln</option>
            <option value="PAWTUCKET">Pawtucket</option>
            <option value="SCITUATE">Scituate</option>
          </select>
        <br> <br>
        <div data-dojo-type="dijit/form/Button" id="AddressSearch">Search</div>
        <div id="asmessages" class="errmess"></div>
        <div id="addrlist" ></div>
      </div>
    </div>
  </body>
</html>
0 Kudos
kiranbodhasrungi
by
Deactivated User
‎04-14-2014 08:17 PM
Ray,

i have modified and used your code,everthing works till i hit the zoomTo link.once i click zoomTo there is an error in function featureZoom(feature) which says "Map: Geometry (wkid: 102656) cannot be converted to spatial reference of the map (wkid: 102100) "

Only difference is that i used a table to display the results instead of a list.Here is the code:



function init() {
  //dojo.connect(grid, "onRowClick", onRowClickHandler);

  center = [ -72.65065, 41.56232 ];
  zoom = 11;
  map = new esri.Map("map", {
   basemap : "streets",
   center : center,
   zoom : zoom
  });
 
  var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
  "http://12.132.106.112:6080/arcgis/rest/services/MidParcelFabric/MapServer");
  map.addLayer(censusMapLayer);
 
  symbol =  new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([0, 255, 255]), 5),
                new Color([255, 255, 0, 0.25])
              );
     psymbol = new SimpleMarkerSymbol(
                SimpleMarkerSymbol.STYLE_CIRCLE, 8,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                  new Color([0, 255, 255]), 8),
                  new Color([255, 255, 0, 0.25])
              );
    
}
function AddressSearchTask(stnum, stname, stcity)
    {
  console.log(stname);
      streetname = stname.toUpperCase();
      queryTask = new esri.tasks.QueryTask("http://12.132.106.112:6080/arcgis/rest/services/MidParcelFabric/MapServer/1");
      query = new esri.tasks.Query();
      query.returnGeometry = true;
      query.outFields = ["STREET_NAME", "GRANTEE", "CAMAACCT_1"];
      query.where ="STREET_NAME like '%" + stname + "%'";
      //if(stcity != 0)
      //{
        //query.where = "HOUSENUMBE = '" + stnum + "' AND PRIMARYNAM LIKE '%" + streetname + "%' AND ZN = '" + stcity + "'";
      //}
      queryTask.execute(query, pickAddress);
    }
    
function pickAddress(results)
    {
      AddrFeatures = results.features;
      var scount = AddrFeatures.length;
      switch(scount)
      {
        // if no address found show the message in div
        case 0:
        showMessage("asmessages", "Address not found");
        break;
        // if only one message found just zoom directly to it
        case 1:
        zoomToStreet(results);
        break;
        // if multiple addresses found
        default:
        // create the variable for the address results
        AddrResults = {displayFieldName: null, features:[]};
        // loop through the features found and add them for the AddrResults variable
        for (var i = 0; i < scount; i++)
        {
          var aResult = AddrFeatures;
          if (!AddrResults.displayFieldName){ AddrResults.displayFieldName = aResult.displayFieldName }
          AddrResults.features.push(aResult);
        }
        // pass the results to the function to format the results
        var stlist = addrList(AddrResults);
        // put the results into the addrlist div
       // $("#addrlist").html(stlist);
        // show the div
        //$("#addrlist").show("slow");
        break;
      }
    }
  function addrList(results)
     {
      console.log('addrList');
      var text = '';
      var addr = results.features;
      addresslist = results.features;
   text += '<thead><tr>'
           +"<th>Street Name</th>"
           +"<th>Owner</th>"
           +"<th>Account No</th>"
         +"</tr></thead> <tbody>";
   for ( var i = 0, il = addr.length; i < il; i++) {
   
    text += '<tr>'
      + '<td>' + addr.attributes["STREET_NAME"] + '</td>'
      + '<td>' + addr.attributes["GRANTEE"] + '</td>'
      + '<td>' + addr.attributes["CAMAACCT_1"] + '</td>'
      + '<td>' + '<a href="#" onclick="featureZoom(AddrResults.features['+ i +']); return false;">(Zoom To)</a>' + '</td>'
      //+ '<td><a href="#" onclick="zoomToProperty('+i+')">(Zoom To)</a></td>'
      + '</tr>';
   }
   text +="</tbody>";
   $('#resultsGrid').html(text);
    
     }
    //Zoom to the parcel when the user clicks a row
   function featureZoom(feature)
     {
       map.graphics.clear();
       ftype = feature.geometry.type;
       console.log(ftype);
       if(ftype == "point")
       {
         var pt = feature.geometry;
         var factor = 1; //some factor for converting point to extent
         var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
         map.setExtent(extent.expand(60));
         showFeature(feature);
       } else {
         var fExtent = feature.geometry.getExtent().expand(3);
         map.setExtent(fExtent);
         showFeature(feature);
       }

     }

     function showFeature (feature)
     {
      console.log('showFeature');
       map.graphics.clear();
       ftype = feature.geometry.type;
       if(ftype == "point")
       {
         feature.setSymbol(psymbol)
         setTimeout(function(){map.graphics.clear()}, 3000); // 3000 is a timeout to show the feature then clear it. change to liking
       } else {
         feature.setSymbol(symbol);
         setTimeout(function(){map.graphics.clear()}, 3000);  // 3000 is a timeout to show the feature then clear it. change to liking
       }
       map.graphics.add(feature);
     }
    function propertyReport(pid) {
     console.log('propertyReport');
    }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
  <div class="container">
      <div class="bs-docs-section clearfix">
        <div class="row">
          <div class="col-lg-12">
            <div class="page-header">
              <img href="#" src="img/header.jpg"/>
            </div>
              <div class="navbar navbar-inverse">
        <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
         </button>
        </div>
        <div class="navbar-collapse collapse navbar-inverse-collapse">
         <ul class="nav navbar-nav">
          <li class="active"><a href="#">GIS Property Viewer</a></li>
         </ul>
         <form class="navbar-form navbar-left">
          <input type="text" class="form-control col-lg-8" placeholder="Street Name/No or Owner Name" id="streetName" value="NORTH">
          <button id="search" type="button" class="btn btn-primary" style="margin-left:5px;">Search</button>
         </form>
         <ul class="nav navbar-nav navbar-right">
          <li><a data-toggle="modal" href="#example" href="index.html">Advanced Search</a></li>
         </ul>
        </div><!-- /.nav-collapse -->
       </div><!-- /.navbar -->
          </div>
        </div>
      </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="well">
            
                <!--Map Content-->
   <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
   <!--Map Content-->
            </div>
          </div>
          <div class="col-lg-6">
      <div class="bs-example table-responsive">
       <table class="table table-striped table-bordered table-hover" id="resultsGrid">
       
        </table>
      </div><!-- /example -->           
          </div>
        </div>    
    </div>
 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    $("#search").bind( "click", function() {
  map.graphics.clear();
        //var stnum = registry.byId("addnum").get("value");
        var stname = $("#streetName").val();
        //var stcity = registry.byId("addcity").get("value");
        AddressSearchTask("", stname, "");
    });
    </script>
  </body>
</html>
0 Kudos
RaymondGoins
by
Regular Contributor
‎04-15-2014 06:37 AM
The only difference I see is that the featureZoom function is within the require section of your ArcGIS. Try moving id down to where your jquery is for the search submittable.
<script>
$("#search").bind( "click", function() {
map.graphics.clear();
//var stnum = registry.byId("addnum").get("value");
var stname = $("#streetName").val();
//var stcity = registry.byId("addcity").get("value");
AddressSearchTask("", stname, "");
});

//Zoom to the parcel when the user clicks a row
function featureZoom(feature)
{
map.graphics.clear();
ftype = feature.geometry.type;
console.log(ftype);
if(ftype == "point")
{
var pt = feature.geometry;
var factor = 1; //some factor for converting point to extent
var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
map.setExtent(extent.expand(60));
showFeature(feature);
} else {
var fExtent = feature.geometry.getExtent().expand(3);
map.setExtent(fExtent);
showFeature(feature);
}

}

function showFeature (feature)
{
console.log('showFeature');
map.graphics.clear();
ftype = feature.geometry.type;
if(ftype == "point")
{
feature.setSymbol(psymbol)
setTimeout(function(){map.graphics.clear()}, 3000); // 3000 is a timeout to show the feature then clear it. change to liking
} else {
feature.setSymbol(symbol);
setTimeout(function(){map.graphics.clear()}, 3000); // 3000 is a timeout to show the feature then clear it. change to liking
}
map.graphics.add(feature);
}
</script>


Ray
0 Kudos
kiranbodhasrungi
by
Deactivated User
‎04-15-2014 07:54 AM
That did not make any difference!! still the zoom link doesnt work 😞
0 Kudos
RaymondGoins
by
Regular Contributor
‎04-16-2014 09:28 AM
Can you get the error from the click. If using firefox get/open firebug and there should be an error in the console. If using IE hit f12 to bring up the developer tools and see what the error is.

Post when you get it.

Ray
0 Kudos
kiranbodhasrungi
by
Deactivated User
‎04-16-2014 10:05 AM
I changed the featureZoom() code a little and it worked.I also changed the showResults(results) to showResults(FeatureSet)

Here is the code to search,populate info templates,populate a results table and on row click zoom to the selected area:

<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, addresslist;
function init() {

  center = [ -83.266, 42.568 ];
  zoom = 14;
  map = new esri.Map("map", {
   basemap : "streets",
   center : center,
   zoom : zoom
  });

  //Takes a URL to a non cached map service.
  var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
    "http://localhost:6080/arcgis/rest/services/MidParcelFabric/MapServer");
  map.addLayer(dynamicMapServiceLayer);

  //initialize query task
  queryTask = new esri.tasks.QueryTask(
    "http://localhost:6080/arcgis/rest/services/MidParcelFabric/MapServer/1");

  //initialize query
  query = new esri.tasks.Query();
  query.returnGeometry = true;
  query.outFields = [ "*" ];

  //initialize InfoTemplate
  infoTemplate = new esri.InfoTemplate("${STREET_NAME}",
    "Account ID : ${CAMAACCT_1}<br/> PID : ${pid}");

  //create symbol for selected features
  symbol = new esri.symbol.SimpleFillSymbol();
  symbol.style = esri.symbol.SimpleFillSymbol.STYLE_SOLID;
  symbol.color = new dojo.Color([ 255, 255, 0, 0.5 ]);

}

dojo.addOnLoad(init);

function executeQueryTask(accountID) {
  //set query based on what user typed in for population;
  query.where = "STREET_NAME like '%" + accountID + "%'";

  //execute query
  queryTask.execute(query, showResults);

}

function showResults(featureSet) {
  //remove all graphics on the maps graphics layer
  map.graphics.clear();
  //Performance enhancer - assign featureSet array to a single variable.
  var resultFeatures = featureSet.features;

  //Loop through each feature returned
  for ( var i = 0, il = resultFeatures.length; i < il; i++) {
   //Get the current feature from the featureSet.
   //Feature is a graphic
   var graphic = resultFeatures;
   graphic.setSymbol(symbol);

   //Set the infoTemplate.
   graphic.setInfoTemplate(infoTemplate);

   //Add graphic to the map graphics layer.
   map.graphics.add(graphic);
  }
  resultList(featureSet);
}
//populate grid
function resultList(results) {
  console.log('resultList');
  var text = '';
  var addr = results.features;
  addresslist = results.features;
  text += '<thead><tr>' + "<th>Street Name</th>" + "<th>Owner</th>"
    + "<th>Account No</th>" + "</tr></thead> <tbody>";
  for ( var i = 0, il = addr.length; i < il; i++) {

   text += '<tr>' + '<td>' + addr.attributes["STREET_NAME"]
     + '</td>' + '<td>' + addr.attributes["GRANTEE"]
     + '</td>' + '<td>' + addr.attributes["CAMAACCT_1"]
     //+ '</td>' + '<td>' + '<a href="#" onclick="featureZoom('
     //+ addr + ')">(Zoom To)</a>' + '</td>'
     + '<td><a href="#" onclick="zoomToProperty('+i+')">(Zoom To)</a></td>'
     + '</tr>';
  }
  text += "</tbody>";
  $('#resultsGrid').html(text);

}
//Zoom to the parcel when the user clicks a row
function zoomToProperty(cammaacct) {

  console.log(cammaacct);

  var clickedCammaacct = addresslist[cammaacct].attributes["CAMAACCT_1"];

  console.log(clickedCammaacct);

  var selectedCammaacct;

  for ( var i = 0, il = map.graphics.graphics.length; i < il; i++) {

   var currentGraphic = map.graphics.graphics;

   if ((currentGraphic.attributes)

   && currentGraphic.attributes.CAMAACCT_1 == clickedCammaacct) {

    selectedCammaacct = currentGraphic;
    console.log(selectedCammaacct);
    break;
   }
  }
   map.setExtent(selectedCammaacct.geometry.getExtent(), true);
}
</script>

Thanks!!
0 Kudos
RaymondGoins
by
Regular Contributor
‎04-17-2014 06:14 AM
Glad you got it working.

Ray
0 Kudos