topic Re: select by layer in ArcGIS JavaScript Maps SDK Questions

select by layer

jaykapalczynski — Sat, 11 Dec 2021 17:59:31 GMT

I am trying the below. The example works fine....

I put in my Map Service and it does not work???? I stripped the return results and calculation to the html out of the example link above...but the below code works with the ESRI map service but not mine.

The only difference I see is that my Map Service is a polygon...does that matter. Why is my Polygon map service not showing the results in the buffer....

Any thoughts?

<!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>Select with feature layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/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;
      }
    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom
      ) {
        // Use a proxy page if a URL generated by this page is greater than 2000 characters
        //
        // This should not be needed as nearly all query & select functions are performed on the client
        //esriConfig.defaults.io.proxyUrl = "/proxy/";
  
        map = new Map("mapDiv", { 
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });
    
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.
        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{     
             outFields: ["*"]
        });

        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          12, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL, 
            new Color([247, 34, 101, 0.9]), 
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
     
          
        featureLayer.setSelectionSymbol(symbol); 
        
        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
        
        map.addLayer(featureLayer);
        
        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;

        // When the map is clicked create a buffer around the click point of the specified distance
        map.on("click", function(evt){
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 1,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);

          var query = new Query();
          query.geometry = circle.getExtent();
          // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
          featureLayer.queryFeatures(query, selectInBuffer);
        });

        function selectInBuffer(response){
          var feature;
          var features = response.features;
          var inBuffer = [];
          // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
          for (var i = 0; i < features.length; i++) {
            feature = features[i];
            if(circle.contains(feature.geometry)){
              inBuffer.push(feature.attributes[featureLayer.objectIdField]);
            }
          }
           
          var query = new Query();
          query.objectIds = inBuffer;
           
          // Use an objectIds selection query (should not need to go to the server)
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
          });
      
        }
     
      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to select census block points within 1 mile.</span>
    <div id="mapDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: select by layer

TinaMorgan1 — Fri, 09 Mar 2018 18:19:17 GMT

Is your buffer area large enough to include the entire area of your polygons? I wonder if any portion of the polygon lies outside of the buffer if it is being discluded.

The script filters out features not completely within.

Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

Re: select by layer

jaykapalczynski — Fri, 09 Mar 2018 18:52:23 GMT

Yea the polygons are really small...I set the buffer geometry to 10 miles and still not selecting the Polygons....well it might be but they are not showing up selected in the map. Thats why I was thinking it might be the items selected graphic???? Where the example is querying Points and displaying point graphics. I am querying polygons and showing polygons...Just not sure how to adapt the code for this.

Re: select by layer

RobertScheitlin__GISP — Fri, 09 Mar 2018 22:12:51 GMT

Jay,

Did you change your selection symbol in your code to be a SimpleFileSymbol instaed of a SimpleMarkerSymbol (which is for points)?

Re: select by layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:59:33 GMT

Jay,

Here is the updated code to work with a Polygon Layer.

<!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>Select with feature layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/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;
      }
    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom
      ) {
        // Use a proxy page if a URL generated by this page is greater than 2000 characters
        //
        // This should not be needed as nearly all query & select functions are performed on the client
        //esriConfig.defaults.io.proxyUrl = "/proxy/";

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

        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.
        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
             outFields: ["*"]
        });

        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );


        featureLayer.setSelectionSymbol(symbol);

        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;

        // When the map is clicked create a buffer around the click point of the specified distance
        map.on("click", function(evt){
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 10,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);

          var query = new Query();
          query.geometry = circle;
          query.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
          });
        });
      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to select census block points within 10 mile.</span>
    <div id="mapDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: select by layer

jaykapalczynski — Tue, 13 Mar 2018 12:48:11 GMT

Thanks Robert ...I knew I was on the correct path regarding the symbology for the returned geometry....