nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Query a layer with multiple search criterias

kiranbodhasrungi

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.

Find more posts tagged with

Accepted answers

RaymondGoins

Yes this code does that.

Since I am relatively new to the arcgis jsapi, I think the difference is the ability to query more than one field and use an operator other than equal.

Here is the other function which creates the list into a table

function addrList(results)
        {
          var template = "";
          var addr = results.features;
          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;
        }

Hope that helps

Ray

All comments

MayJeff

That will be great if you can post your complete source code. Thanks for your time.

kiranbodhasrungi

let me know if need the complete source code i can share it with you,i never used jsfiddle.

MayJeff

Can you post the entire code in JSFiddle? Thanks.

RaymondGoins

Glad you got it working.

Ray

kiranbodhasrungi

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!!

RaymondGoins

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

kiranbodhasrungi

That did not make any difference!! still the zoom link doesnt work 😞

RaymondGoins

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

kiranbodhasrungi

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>
       </div>
          </div>
        </div>
      </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="well">

                
   <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
   
            </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>
          </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>

mvolz47

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">
    
    <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>

RaymondGoins

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

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);
}

RaymondGoins

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

kiranbodhasrungi

Ray,

am having problems with the featureZoom code,could you please help?

thanks,
keran.

kiranbodhasrungi

Ok.That clears my doubt!! you saved lot of my time!! thnks!!

RaymondGoins

function addrList(results)
        {
          var template = "";
          var addr = results.features;
          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;
        }

Hope that helps

Ray

kiranbodhasrungi

I use a query task instead of find task here is a sample.

        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);
        }

The 17 is the layer id from your service. You should be able to modify it to use your fields.

query.where uses Standard Query Language(SQL) so you can use LIKE, IN, ect..

This returns the results to another function called pickAddress

        function pickAddress(results)
        {
          AddrFeatures = results.features;
          console.log(results);
          var scount = AddrFeatures.length;
          switch(scount)
          {
            case 0:
            showMessage("asmessages", "Address not found");
            break;
            case 1:
            zoomToStreet(results);
            break;
            default:
            AddrResults = {displayFieldName: null, features:[]};
            for (var i = 0; i < scount; i++)
            {
              var aResult = AddrFeatures;
              if (!AddrResults.displayFieldName){ AddrResults.displayFieldName = aResult.displayFieldName }
              AddrResults.features.push(aResult);
            }
            var stlist = addrList(AddrResults);
            $("#addrlist").html(stlist);
            $("#addrlist").show("slow");
            break;
          }
        }

If more than one result is found it will create a pick list if only one result is found it will zoom to the point. Some of this code requires other functions and variable in order to function correctly which I have not included.

BTW I have enclosed these function in jQuery in order to populate divs and tables. You can use the stardard ArcGIS JSAPI functions to do this if you like.

Ray

Thanks for the reply!! Between what is the difference between find and query?both are like SQL rite!! I intend to perform a search on a single layer which should return me some values which i show in a datagrid and the map,when i click on a row on the grid it should zoom to the point.is this the way your code works?

kiranbodhasrungi

If you are querying just a single layer, you could use a query task and write a more specific "where" clause like "street_name = 'SOUTH' and owner_name = 'katz'".

https://developers.arcgis.com/javascript/jsapi/query-amd.html#where

Yes,I am querying a single layer.This is the one am looking for.Thanks!!

RaymondGoins

I use a query task instead of find task here is a sample.

        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;
          console.log(results);
          var scount = AddrFeatures.length;
          switch(scount)
          {
            case 0:
            showMessage("asmessages", "Address not found");
            break;
            case 1:
            zoomToStreet(results);
            break;
            default:
            AddrResults = {displayFieldName: null, features:[]};
            for (var i = 0; i < scount; i++)
            {
              var aResult = AddrFeatures;
              if (!AddrResults.displayFieldName){ AddrResults.displayFieldName = aResult.displayFieldName }
              AddrResults.features.push(aResult);
            }
            var stlist = addrList(AddrResults);
            $("#addrlist").html(stlist);
            $("#addrlist").show("slow");
            break;
          }
        }

TimCollyer

If you are querying just a single layer, you could use a query task and write a more specific "where" clause like "street_name = 'SOUTH' and owner_name = 'katz'".

https://developers.arcgis.com/javascript/jsapi/query-amd.html#where

kiranbodhasrungi

Thanks for the reply!!

SearchText will do a search through out all the search params,i want to club multiple search results.For example:

there are 3 search params,street name,street number,owner,i want to search by both street name SOUTH and owner name katz.
Normal search would return rows which has SOUTH in any of the 3 params.

thanks,
keran.

TimCollyer

I think "searchText" is probably what you are looking for.

https://developers.arcgis.com/javascript/jsapi/findparameters-amd.html#searchtext

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.