Select with Multipoint

3340
7
Jump to solution
07-20-2015 06:59 AM
TimWitt2
MVP Regular Contributor

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
thejuskambi
Regular Contributor

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.

TimWitt2
MVP Regular Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
MVP Regular Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
MVP Regular Contributor

Thanks again Robert!

0 Kudos