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

Den-GIS · ‎03-19-2018

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!

RobertScheitlin__GISP · ‎03-19-2018

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

RobertScheitlin__GISP · ‎03-19-2018

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

Den-GIS · ‎03-19-2018

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.

RobertScheitlin__GISP · ‎03-19-2018

Denis,

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