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

Select with Multipoint

TimWitt2

Hey everybody,

tagging on to this discussion, I had another question. Robert Scheitlin, GISP was able to help me out per usual, but I ran into another problem. I want to use a Multipoint Geometry to select all features in a polygon that intersect with a point from the multipoint geometry.

Here is the code I have so far:

var myButton2 = new Button({
  label: "Analyze",
  onClick: function(){
  //var selectedCity = [];
  //var allPoints = [];
  var mp = new Multipoint();  
  arrayUtils.map(NewLayer.graphics, function(gra){  
  mp.addPoint(gra.geometry);  
  //allPoints.push(gra);
  });  
  console.log(mp);
  var query = new Query();
  //for (var i = 0; i < allPoints.length; i++) {
  //query.geometry = allPoints.geometry;
  //thisIsaTest = ft6select.selectFeatures(query,FeatureLayer.SELECTION_ADD, function(evt2){
  //if(evt2.length > 0){
  //var tutu = evt2[0].geometry;
  //selectedCity.push(tutu);
  //console.log(selectedCity);
  //}
  //});
  //}
  console.log(selectedCity);
  query.geometry = mp;
  ft6select.selectFeatures(query);
  }
}, "progButtonNode2").startup();


ft6select.on('selection-complete', function (evt){
  console.log(evt);
});

This code returns an empty array, meaning nothing has been selected. When I use the commented out method, using each point of the multipoint geometry, it does select features that intersect with each point.

I hope this makes any sense.

Tim

Find more posts tagged with

Accepted answers

rscheitlin

Tim,

You just need to set the new multiPoints spatialReference.

mp.spatialReference = evt.target.graphics[0].geometry.spatialReference;

Here is my test sample:

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.13/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
  </style>

  <script>
    var map;
    require([
      "esri/map",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "esri/geometry/Multipoint",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, on, Query, FeatureLayer, Multipoint, Memory, array, lang, esriRequest, json, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap: "topo",
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      var Points = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"]
      });

      var BlockGrp = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });
      BlockGrp.setMinScale(0);
      BlockGrp.setMaxScale(0);


      Points.setDefinitionExpression("STATE_FIPS = '01' AND CNTY_FIPS = '015' AND BLOCK = '3039'");
      Points.setMinScale(0);
      Points.setMaxScale(0);
      Points.on('update-end', function(evt){
        var mp = new Multipoint();
        array.map(evt.target.graphics, function(gra){
          mp.addPoint(gra.geometry);
        });
        mp.spatialReference = evt.target.graphics[0].geometry.spatialReference;
        console.info(mp);
        var query = new Query();
        query.geometry = mp;
        BlockGrp.selectFeatures(query);
      })
      map.addLayers([Points, BlockGrp]);

      BlockGrp.on('selection-complete', function (evt){
        console.log(evt);
      });

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
  </div>
</body>

</html>

All comments

rscheitlin

Tim,

Here it is added to your code:

      var myButton2 = new Button({
        label: "Analyze",
        onClick: function(){
        var selectedCity = [];
        var allPoints = [];
        var mp = new Multipoint();
        arrayUtils.map(NewLayer.graphics, function(gra){
          mp.addPoint(gra.geometry);
          allPoints.push(gra);
        });
        console.log(mp);
        var query = new Query();
        for (var i = 0; i < allPoints.length; i++) {
          query.geometry = allPoints.geometry;
          thisIsaTest = ft6select.selectFeatures(query,FeatureLayer.SELECTION_ADD, lang.hitch(this, function(evt2){
            if(evt2.length > 0){
              var tutu = evt2[0].geometry;
              selectedCity.push(tutu);
              console.log(selectedCity);
            }
          }));
        }
        console.log(selectedCity);
        query.geometry = mp;
        ft6select.selectFeatures(query);
        }
      }, "progButtonNode2").startup();  

      ft6select.on('selection-complete', function (evt){  
        console.log(evt);  
      });

TimWitt2

How would I use it in this particular case? I have a hard time understanding how it works and this example might clear it up.

rscheitlin

Tim,

It is a scope issue as your selection complete function is in a different scope then the rest of your function. This is where you would use lang.hitch.

TimWitt2

Thanks Robert and Thejus, this was exactly it!

When I use the commented out method, my selectedCity array is empty, even though I push each selection in it. While the for loop runs you can see the selectedCity filling up with each push, but once the for loop is done it is empty. Any idea why this happens?

thejuskambi

The multipoint geometry may be missing the Spatialreference information. try to initialize it like this

var multiPoint = new Multipoint(new SpatialReference({ wkid:4326 }));

with appropriate projection system value.

rscheitlin

Tim,

You just need to set the new multiPoints spatialReference.

mp.spatialReference = evt.target.graphics[0].geometry.spatialReference;

Here is my test sample:

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.13/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
  </style>

  <script>
    var map;
    require([
      "esri/map",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "esri/geometry/Multipoint",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, on, Query, FeatureLayer, Multipoint, Memory, array, lang, esriRequest, json, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap: "topo",
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      var Points = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"]
      });

      var BlockGrp = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });
      BlockGrp.setMinScale(0);
      BlockGrp.setMaxScale(0);


      Points.setDefinitionExpression("STATE_FIPS = '01' AND CNTY_FIPS = '015' AND BLOCK = '3039'");
      Points.setMinScale(0);
      Points.setMaxScale(0);
      Points.on('update-end', function(evt){
        var mp = new Multipoint();
        array.map(evt.target.graphics, function(gra){
          mp.addPoint(gra.geometry);
        });
        mp.spatialReference = evt.target.graphics[0].geometry.spatialReference;
        console.info(mp);
        var query = new Query();
        query.geometry = mp;
        BlockGrp.selectFeatures(query);
      })
      map.addLayers([Points, BlockGrp]);

      BlockGrp.on('selection-complete', function (evt){
        console.log(evt);
      });

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
  </div>
</body>

</html>

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.