AnsweredAssumed Answered

Select graphics within a graphics layer

Question asked by bives on Feb 6, 2014
Latest reply on Feb 7, 2014 by bives
I am trying to select specific graphics point features that I am adding through code. I can't seem to figure out how to grab the individual graphics withing the graphics layer. Any help is appreciated.

/// <reference path="index.html" />
var mapMain, selectionLayer, graphicsLayer, selectionToolbar, graphic, defaultSymbol, highlightSymbol, simpleMarkerSymbol, resultTemplate;

require([
  "esri/map",
  "esri/geometry/Extent",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "esri/layers/FeatureLayer",
  "esri/tasks/GeometryService",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "esri/tasks/FeatureSet",
  "esri/graphic",
  "esri/toolbars/draw",
  "esri/config",

  "dojo/ready",
  "dojo/parser",
  "dojo/on",
  "dojo/_base/array",

  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane"],
  function (
    Map, Extent, ArcGISTiledMapServiceLayer, FeatureLayer,
    GeometryService, Query, QueryTask, FeatureSet, graphic, draw, config,
    ready, parser, on, array, BorderContainer, ContentPane
    ) {

      ready(function () {

          // Create the map
          mapMain = new Map("cpCenter")
          var layerURL = "http://gisaprd/ArcGIS/rest/services/BaseMap_ArcReader_Cached/MapServer";
          myLayer = new esri.layers.ArcGISTiledMapServiceLayer(layerURL, { "opacity": 0.5 });
          mapMain.addLayer(myLayer);

          dojo.connect(mapMain, "onLoad", initSelectToolbar);
          //dojo.connect(mapMain, "onLoad", function () {
          //    selectionLayer = new esri.layers.GraphicsLayer();
          //    mapMain.addLayer(selectionLayer);
          //});

          var queryTask = new QueryTask("http://gisaprd/ArcGIS/rest/services/SRSOutageTest/MapServer/3");

          var query = new Query();
          query.returnGeometry = false;
          query.outFields = ["*"];
          query.where = "GIS_X IS NOT NULL";
          queryTask.execute(query, showResults, errBack);

         

          simpleMarkerSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,255]));
          defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255]));
          highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));
      });
      //initialize drawing toolbar
      function initSelectToolbar(mapMain) {
          selectionToolbar = new esri.toolbars.Draw(mapMain);

          //find points in Extent when user completes drawing extent
          dojo.connect(selectionToolbar, "onDrawEnd", findPointsInExtent);

      }

      function showResults(results) {

          var len = results.features.length;
          var featureSet = new FeatureSet();
          featureSet = results;

         graphicsLayer = new esri.layers.GraphicsLayer();
          //graphicsLayer.setInfoTemplate(new esri.InfoTemplate("Attributes", "${*}"));
           
          dojo.forEach(featureSet.features, function (feature,index) {
             
              var spID = featureSet.features[index].attributes.SP_ID;
              var address = featureSet.features[index].attributes.ADDRESS;
              var callbackstatus = featureSet.features[index].attributes.CALLBACKSTATUS;
              var meterNumber = featureSet.features[index].attributes.METERNUMBER;

              feature.geometry = new esri.geometry.Point(featureSet.features[index].attributes.GIS_X, featureSet.features[index].attributes.GIS_Y, new esri.SpatialReference({ wkid: 4326 }));
              //graphic = new esri.Graphic(feature, simpleMarkerSymbol);
              feature.symbol = simpleMarkerSymbol;
             graphicsLayer.add(feature);

          });
          mapMain.addLayer(graphicsLayer);      
      }

      function findPointsInExtent(extent) {

         var graphics = mapMain.graphics.graphics;
          var results = [];
          //dojo.forEach(mapMain.graphics.graphics, function (graphic) {
          for (var i = 0, il = graphics.length; i < il; i++) {
              graphic = graphics[i];
              if (extent.contains(graphic.geometry)) {
                  graphic.setSymbol(highlightSymbol);
                  //selectionLayer.add(graphic);
                  results.push(graphic.getContent());
                  //Grab Results here and push to slide out or form - look at Washington State city selection example
                  //results.push(graphic.getContent());
              }
                  //else if point was previously highlighted, reset its symbology
              else if (graphic.symbol == highlightSymbol) {
                  graphic.setSymbol(simpleMarkerSymbol);
              }

          };
          selectionToolbar.deactivate();
      }

      function errBack(results) {
          alert(results);

      }

  });




---------------------------------------------------
HTML PAGE
---------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CP-Isolated Steel Services</title>

    <!-- Configure dojo for asynchronous module loading -->
    <script>
        var dojoConfig = {
            async: true
        };
    </script>

    <!-- Reference libraries. The first CSS is a Dojo theme that gives dijits a consistent style. -->
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <link rel="stylesheet" href="css/workwiththemap.css"/>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script src="JavaScript/CP_IsolatedSteelServices.js"></script>
  </head>
  <body class="nihilo">
     <button data-dojo-type="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select</button>
     <button data-dojo-type="dijit.form.Button" onClick="graphic.setSymbol(highlightSymbol);">Clear Selection</button><br>
     
      <div id="cpCenter" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', liveSplitters:'true'" >
    </div>
  </body>
</html>

Outcomes