empeypp

Related Records with selection symbol

Discussion created by empeypp on Aug 10, 2011
Hello,

Does anyone know how to add a selection symbol over the results of a relational query? I would like the user to click on a symbol on the map and also bring up new selection symbols for the events that are related to it.

Here is the code:
    <script type="text/javascript" language="Javascript"> 
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
      dojo.require("esri.toolbars.draw");
      dojo.require("dojox.color.Palette");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
 
      var map, wellFeatureLayer, toolbar, grid, store, resizeTimer;
 var selectionSymbol;
      
   function init() {
        var startExtent = new esri.geometry.Extent(-90.5328,40.4344,-87.2582,45.64041, new esri.SpatialReference({wkid:4326}) );
 
      
  //
   map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(startExtent)});
        dojo.connect(map, "onLoad", initTopQueryFunctionality);
        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(tiledLayer);
 
        //
  var imageParams = new esri.layers.ImageParameters();
        // 0 = Events Points 
  imageParams.layerIds = [0];
        imageParams.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        
  
     
  //content for the info-window
  var content =  "<b>Object ID:</b>  ${EventID}<br>" +
       "<b>Event ID:</b>   ${City}<br>"+
       "<b>Fee:</b>   $${EventName}<br>"+
       "${ObjectID}";
  
  
  //Adds the entire Map we've created and placed on the server
  var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://studentgisserver.uww.edu/ArcGIS/rest/services/Workforce/MapServer", {imageParameters:imageParams});
        map.addLayer(dynamicLayer);
 
  // Adds icon over the point after clicked
       // var selectionSymbol = new esri.symbol.SimpleMarkerSymbol().setColor("white");
        
  
  //Allows the Events point (layerIds = 0) to be used in query
  wellFeatureLayer = new esri.layers.FeatureLayer("http://studentgisserver.uww.edu/ArcGIS/rest/services/Workforce/MapServer/0", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   outFields: ["*"],
   //The info in the Event pop-up window
   infoTemplate: new esri.InfoTemplate("Event: ${EventName}", content)
        });
        
  selectionSymbol = new esri.symbol.SimpleMarkerSymbol();
                                               //STYLE_ can be : CROSS,SQUARE,X, OR DIAMOND
  selectionSymbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
  selectionSymbol.setSize(16);
  selectionSymbol.setColor(new dojo.Color([200,225,150,0.9]));
  
  //Adds the selectionSymbol to the Events layer 
  wellFeatureLayer.setSelectionSymbol(selectionSymbol);
      
  //findsRelatedRecords for the Events layer
  dojo.connect(wellFeatureLayer, "onSelectionComplete", findRelatedRecords);
 
        map.addLayer(wellFeatureLayer);
 
        dojo.connect(map, "onClick", findWells);
      }
 
      function initTopQueryFunctionality(map) {
        dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
          resizeMap();
        });
      }
 
    function findRelatedRecords(features) {
   console.log('finding related records', features, features.length);
   var relatedTopsQuery = new esri.tasks.RelationshipQuery();
   relatedTopsQuery.outFields = ["*"];
   relatedTopsQuery.relationshipId = 0;
   // Create array of objectIds
   var ids = dojo.map(features, function (f) {
   return f.attributes.ObjectID;
   });
  console.log('ids: ', ids);
  relatedTopsQuery.objectIds = ids;
  wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function (recs) {
  
  console.log('related: ', recs);
  // Build an array for the grid
  var items = [];
  // Recs is an object where each property is the objectid for a feautre
  // with related records
  for (id in recs) {
  // For each related record, create an item which will correspond to
  // a row in the data grid
  dojo.forEach(recs[id].features, function (feat) {

    var graphic = feat;
  
    graphic.setSymbol(selectionSymbol);
   
    map.graphics.add(graphic);
    alert('set symbol 4')
   
  
  items.push(feat.attributes);
    
  });
  }
    //Create data object to be used in store
    var data = {
      // Identifier and label are case-sensitive
      identifier: "OBJECTID",
      //This field needs to have unique values
      label: "ObjectID",
      items: items
    };

    //Create data store and bind to grid.
    store = new dojo.data.ItemFileReadStore({
      data: data
    });
    grid.setStore(store);
    grid.setQuery({
      OBJECTID: '*'
    });
  });
}

      function findWells(evt) {
        grid.setStore(null);
        var selectionQuery = new esri.tasks.Query();
        var tol = map.extent.getWidth()/map.width * 5;
        var x = evt.mapPoint.x;
        var y = evt.mapPoint.y;
        var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);
        selectionQuery.geometry = queryExtent;
        wellFeatureLayer.selectFeatures(selectionQuery,esri.layers.FeatureLayer.SELECTION_NEW);
  //wellFeatureLayer.setSelectionSymbol(selectionSymbol);
      }
 
      //Handle resize of browser
      function resizeMap(){
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
          map.resize();
          map.reposition();
        }, 500);
      }
 
      dojo.addOnLoad(init);
    </script> 



I cannot seem to figure this out. Please help!!

Thanks!
Patrick

Outcomes