Select features from multiple layer by drawing a polygon

HabG_ · ‎09-17-2014

Hi All,

I have a web map with three feature layers (1 point and 2 polygon layers), I managed to drag a rectangle and select features from one of the polygon layers inside the rectangle and clear the selected feature. Plus I have a drawing toolbar where I can draw point, line and polygon features. What I need to do now is that if I draw a polygon graphic, the features from the three feature layers inside the graphic polygon to be selected and the graphic polygon shown.

RobertScheitlin__GISP · ‎09-17-2014

Hab,

Here is a sample that use promise all to query two polygon and one point from the sample census map service based on the graphic that is drawn.

<!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>Shapes and Symbols</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

    <style>
      #info {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw", "dojo/promise/all",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer", 
        "esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate",
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw, All,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        PictureFillSymbol, CartographicLineSymbol, FeatureLayer,
        Graphic, Query, QueryTask, InfoTemplate,
        Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-85.82966, 33.666494],
          zoom: 13
        });
        map.on("load", initToolbar);
        
        var featureLayer1 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });
        
        var featureLayer2 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Block Group: ${BLKGRP}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"]
        });
        
        var featureLayer3 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("County Name: ${NAME}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS","NAME"]
        });
        
        map.addLayers([featureLayer1, featureLayer2, featureLayer3]);

        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon
        var fillSymbol = new SimpleFillSymbol();

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
          queryMapService(evt.geometry);
        }
        
        function queryMapService(Geom){
          var promises = [];
          
          var query = new Query();
          query.returnGeometry = false;   
          query.outFields = ["*"];   
          query.geometry = Geom;
          promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          var allPromises = new All(promises);
          allPromises.then(function (r) { showResults(r); });
        }
        
        function showResults(results) {
          var resultCount = results.length;
          console.log(resultCount);
        }
      });
    </script>
  </head>
  
  <body>
    
    <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
    </div>

    <div id="mapDiv"></div>

  </body>
</html>

View solution in original post

RobertScheitlin__GISP · ‎09-17-2014

Hab,

Here is a sample that use promise all to query two polygon and one point from the sample census map service based on the graphic that is drawn.

<!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>Shapes and Symbols</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

    <style>
      #info {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw", "dojo/promise/all",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer", 
        "esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate",
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw, All,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        PictureFillSymbol, CartographicLineSymbol, FeatureLayer,
        Graphic, Query, QueryTask, InfoTemplate,
        Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-85.82966, 33.666494],
          zoom: 13
        });
        map.on("load", initToolbar);
        
        var featureLayer1 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });
        
        var featureLayer2 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Block Group: ${BLKGRP}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"]
        });
        
        var featureLayer3 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("County Name: ${NAME}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS","NAME"]
        });
        
        map.addLayers([featureLayer1, featureLayer2, featureLayer3]);

        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon
        var fillSymbol = new SimpleFillSymbol();

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
          queryMapService(evt.geometry);
        }
        
        function queryMapService(Geom){
          var promises = [];
          
          var query = new Query();
          query.returnGeometry = false;   
          query.outFields = ["*"];   
          query.geometry = Geom;
          promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW));
          var allPromises = new All(promises);
          allPromises.then(function (r) { showResults(r); });
        }
        
        function showResults(results) {
          var resultCount = results.length;
          console.log(resultCount);
        }
      });
    </script>
  </head>
  
  <body>
    
    <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
    </div>

    <div id="mapDiv"></div>

  </body>
</html>

HabG_ · ‎09-18-2014

Thanks Robert, this is very helpful.