Select by location

RoxanneWilson · ‎06-15-2016

I have an app that allows a user to search for an address which then shows it selected in the map.

Now what I'd like to do is take the highlighted point and intersect it with a polygon layer so the popup displays attributes from the polygon that the point resides in.

Looking for suggestions on how to accomplish this. This is my 3rd app, but my first two have been fairly standard with relatively easy customization from templates.

Any help is appreciated!

RobertScheitlin__GISP · ‎06-20-2016

Roxanne,

Here is a sample I created based on your question that should help get you going:

<!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>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }

      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
    </style>
    <script src="http://js.arcgis.com/3.16/"></script>
    <script>
      var map, userMP;
      require([
        "esri/map", "esri/layers/FeatureLayer", "dojo/_base/lang", "esri/dijit/Search", "dojo/on",
        "esri/tasks/query", "esri/layers/GraphicsLayer",
        "esri/graphic", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, lang, Search, on,
        Query, GraphicsLayer,
        Graphic, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        Color, dom
      ) {

        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 10,
          slider: false
        });

        var search = new Search({
            enableButtonMode: false, //this enables the search widget to display as a single button
            enableLabel: false,
            enableInfoWindow: true,
            showInfoWindowOnSelect: false,
            map: map
         }, "search");

         var sources = [];

         sources.push({
            featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),
            searchFields: ["Name"],
            displayField: "Name",
            exactMatch: false,
            name: "Senator",
            outFields: ["*"],
            placeholder: "Senator name",
            maxResults: 6,
            maxSuggestions: 6,
            zoomScale: 300000,

            //Create an InfoTemplate
            infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"),

            enableSuggestions: true,
            minCharacters: 0
         });

         //Set the sources above to the search widget
         search.set("sources", sources);
         search.startup();
         search.set('value', 'Moran, Jerry');

         var fillSymb = new SimpleFillSymbol(
           SimpleFillSymbol.STYLE_NULL,
           new SimpleLineSymbol(
             SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
             new Color([255, 0, 0]),
             4
           ), new Color([255, 0, 0, 0])
         );

         on(search, "select-result", lang.hitch(this, function(rslt){
           var query = new Query();
           query.geometry = rslt.result.feature.geometry;

           featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
             var rstr = "";
             rstr += "Households: " + results[0].attributes.HOUSEHOLDS + "<br>";
             rstr += "Household Units: " + results[0].attributes.HSE_UNITS + "<br>";
             rstr += "2000 Population: " + results[0].attributes.POP2000;
             dom.byId("messages").innerHTML = rstr;
           });
         }));

        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
          infoTemplate: new InfoTemplate("Block: ${BLKGRP}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"]
        });
        featureLayer.setSelectionSymbol(fillSymb);

        //make unselected features invisible
        var nullSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([255, 255, 0, 0]),
            0
          ),
          new Color([255, 255, 0, 0])
        );
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);
      });
    </script>
  </head>

  <body>
    <div id="search"></div>
    <span id="messages">Search by your Sentors name to find the Census block they are located in.</span>
    <div id="mapDiv"></div>
  </body>
</html>

View solution in original post

RobertScheitlin__GISP · ‎06-15-2016

Roxanne,

You would get the geometry from the highlighted point and use that to build your QueryTask which you will point to your other layers URL. There are many samples for using QueryTask in the samples

QueryTask | API Reference | ArcGIS API for JavaScript

You then execute the QueryTask using the Query class

Query | API Reference | ArcGIS API for JavaScript

having set the Query class geometry property to the selected points geometry.

Then you need to decide how you will display the attributes of the polygon that the point resides in (i.e. some html text in a div, a popup, etc).

RoxanneWilson · ‎06-20-2016

Does getting the geometry of the selected feature have something to do with the get(name) method on the Search widget?

RobertScheitlin__GISP · ‎06-20-2016

Roxanne,

Here is a sample I created based on your question that should help get you going:

<!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>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }

      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
    </style>
    <script src="http://js.arcgis.com/3.16/"></script>
    <script>
      var map, userMP;
      require([
        "esri/map", "esri/layers/FeatureLayer", "dojo/_base/lang", "esri/dijit/Search", "dojo/on",
        "esri/tasks/query", "esri/layers/GraphicsLayer",
        "esri/graphic", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, lang, Search, on,
        Query, GraphicsLayer,
        Graphic, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        Color, dom
      ) {

        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 10,
          slider: false
        });

        var search = new Search({
            enableButtonMode: false, //this enables the search widget to display as a single button
            enableLabel: false,
            enableInfoWindow: true,
            showInfoWindowOnSelect: false,
            map: map
         }, "search");

         var sources = [];

         sources.push({
            featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),
            searchFields: ["Name"],
            displayField: "Name",
            exactMatch: false,
            name: "Senator",
            outFields: ["*"],
            placeholder: "Senator name",
            maxResults: 6,
            maxSuggestions: 6,
            zoomScale: 300000,

            //Create an InfoTemplate
            infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"),

            enableSuggestions: true,
            minCharacters: 0
         });

         //Set the sources above to the search widget
         search.set("sources", sources);
         search.startup();
         search.set('value', 'Moran, Jerry');

         var fillSymb = new SimpleFillSymbol(
           SimpleFillSymbol.STYLE_NULL,
           new SimpleLineSymbol(
             SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
             new Color([255, 0, 0]),
             4
           ), new Color([255, 0, 0, 0])
         );

         on(search, "select-result", lang.hitch(this, function(rslt){
           var query = new Query();
           query.geometry = rslt.result.feature.geometry;

           featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
             var rstr = "";
             rstr += "Households: " + results[0].attributes.HOUSEHOLDS + "<br>";
             rstr += "Household Units: " + results[0].attributes.HSE_UNITS + "<br>";
             rstr += "2000 Population: " + results[0].attributes.POP2000;
             dom.byId("messages").innerHTML = rstr;
           });
         }));

        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
          infoTemplate: new InfoTemplate("Block: ${BLKGRP}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"]
        });
        featureLayer.setSelectionSymbol(fillSymb);

        //make unselected features invisible
        var nullSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([255, 255, 0, 0]),
            0
          ),
          new Color([255, 255, 0, 0])
        );
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);
      });
    </script>
  </head>

  <body>
    <div id="search"></div>
    <span id="messages">Search by your Sentors name to find the Census block they are located in.</span>
    <div id="mapDiv"></div>
  </body>
</html>