Search widget with spatial query task "esri.tasks.Query.SPATIAL_REL_WITHIN"

340
3
Jump to solution
03-19-2018 03:36 AM
DenisGlibanovic
New Contributor III

Hello esri people,

 

I try to write a code to combine "esri search widget" with spatial query task "esri.tasks.Query.SPATIAL_REL_WITHIN" .

For example I have two polygons (feature classes) owerlayed on the basemap, when the users serach for the adress the marker of the search widget should give a pop up window whether it is in the polygone (feature class) one, two or in none of them.

 

Have anybody some Idea? Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Denis,

   This sample I made should get you going towards your goal. It queries on featurelayer based on the results of the search widget selected result geometry and then appends an attribute of the polygon that the search result is within and adds that to the search result popup:

<!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>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
  </style>
    <script src="https://js.arcgis.com/3.23/"></script>
  <script>


    require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer",
        "esri/InfoTemplate", "esri/tasks/query", "esri/symbols/SimpleFillSymbol",
        "dojo/domReady!"
      ], function (Map, Search, FeatureLayer,InfoTemplate, Query, SimpleFillSymbol) {
      var map = new Map("map", {
        basemap: "gray",
        center: [-82.93, 42.5], // lon, lat
        zoom: 10
      });

      var fl = new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
        outFields: ["*"],
        infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
      });
      //map.addLayer(fl);

      var search = new Search({
        map: map
      }, "search");

      search.on('select-result', function(evt){
        console.info(evt.result.feature.geometry);
        var query = new Query();
        query.geometry = evt.result.feature.geometry;
        query.spatialRelationship = Query.SPATIAL_REL_WITHIN;
        query.outFields = ['*'];
        query.returnGeometry = true;
        query.outSpatialReference = map.spatialReference;
        query.maxAllowableOffset = 0;
        fl.queryFeatures(query, function(result){
//Notice I am appending the Inside of portion based on the spatial query results.
          map.infoWindow.features[0].attributes.searchResult += " Inside of: " + result.features[0].attributes.PARCELID;
          map.infoWindow.setFeatures([map.infoWindow.features[0]]);
        });
      });

      search.startup();
      search.set("value", "1627 S Hill Blvd, bloomfield, MI");
    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Denis,

   This sample I made should get you going towards your goal. It queries on featurelayer based on the results of the search widget selected result geometry and then appends an attribute of the polygon that the search result is within and adds that to the search result popup:

<!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>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
  </style>
    <script src="https://js.arcgis.com/3.23/"></script>
  <script>


    require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer",
        "esri/InfoTemplate", "esri/tasks/query", "esri/symbols/SimpleFillSymbol",
        "dojo/domReady!"
      ], function (Map, Search, FeatureLayer,InfoTemplate, Query, SimpleFillSymbol) {
      var map = new Map("map", {
        basemap: "gray",
        center: [-82.93, 42.5], // lon, lat
        zoom: 10
      });

      var fl = new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
        outFields: ["*"],
        infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
      });
      //map.addLayer(fl);

      var search = new Search({
        map: map
      }, "search");

      search.on('select-result', function(evt){
        console.info(evt.result.feature.geometry);
        var query = new Query();
        query.geometry = evt.result.feature.geometry;
        query.spatialRelationship = Query.SPATIAL_REL_WITHIN;
        query.outFields = ['*'];
        query.returnGeometry = true;
        query.outSpatialReference = map.spatialReference;
        query.maxAllowableOffset = 0;
        fl.queryFeatures(query, function(result){
//Notice I am appending the Inside of portion based on the spatial query results.
          map.infoWindow.features[0].attributes.searchResult += " Inside of: " + result.features[0].attributes.PARCELID;
          map.infoWindow.setFeatures([map.infoWindow.features[0]]);
        });
      });

      search.startup();
      search.set("value", "1627 S Hill Blvd, bloomfield, MI");
    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>
DenisGlibanovic
New Contributor III

Hi Robert,

thanks for your help! your query is very usefull for me. however my goal is more complicated. I have two feature classes and try to get it work with either "if/else" statement or "where " clause.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Denis,

   That is why I mentioned that this sample should get you started.

0 Kudos