Selecting graphics programmatically

Question

I understand this isn't exactly a rare question here, but I still haven't found an ideal solution.  What I want to do is have exactly the same behavior when I select a graphic on the map as when I select it from a list outside the map, ie the InfoWindow pops up using the InfoTemplate/attributes of the graphic I've specified and the graphic gets the "selected" icon (the blue square).

It isn't too difficult to hack around this:
//gfx is a graphic that comes from elsewhere...
map.infoWindow.setTitle(gfx.getTitle());
map.infoWindow.setContent(gfx.getContent());
map.infoWindow.show(gfx.geometry);

However, this doesn't produce the same behavior as a click.  The map's InfoWindow "onShow" event fires but the event has no graphic attached, and if you had a graphic selected already, the blue selected icon on the map stays where it is and doesn't attach to the new graphic.

Is there something I missing, or is the best way to simply stop using InfoTemplates entirely and rely on infoWindow.show?

TracySchloss · Answer

I don't think there's a really elegant way to do it, but you should be able to at least have the graphic appear highlighted on the right feature.  There are multiple ways to define infoTemplates, popups etc, so I don't know if the way I go about it fits into what you have done or not.  You may have all this established in your code already, but here's how I go about it:

I like a large yellow circle with a transparency on it so it stands out.  I define my symbol at beginning, along with my popup, which I use in my map definition.
 highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255,255,0]), 2),
        new Color([255,255,0,0.5]));
        var popup = new Popup({ 
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,200,0]), 2), new Color([255,255,0,0.30])) ,
        markerSymbol:  highlightMarkerSymbol
        }, dojo.create("div")); 
       
map = new Map("mapDiv", {
          basemap: "topo",
          center: [-92.593, 38.5],
          infoWindow:popup,
          sliderPosition: "top-left",
          sliderStyle: "large",
          zoom: 7
        });

I'm not using a featurelayer, I'm just defining the infoTemplate in the results handler of my Identify Task.  Since I'm clicking on the map, and I have my infoWindow defined as popup in my map constructor, this is giving me my highlight symbol automatically without explicitly telling it to 'draw a graphic'.  This example looks a little different because I have my Identify set as deferred with 'promise/all' so I had to also manage which layer my identify was coming from
    var formatResults = arrayUtils.map(results, function(result){        
        var feature = result.feature;
        var layerName = result.layerName;           
        feature.attributes.layerName = result.layerName;
        feature.setInfoTemplate(generateInfoTemplate);
        generateInfoTemplate.setTitle("Layer Information");//don't need a graphic, it's drawing from the infoWindow:popup in the map constructor
        return feature;            
     });
         
    if (formatResults.length === 0) {
        map.infoWindow.clearFeatures();
    } else {
        map.infoWindow.setFeatures(formatResults);
        map.infoWindow.show(idPoint);
    }  
{/CODE]

When I'm outside the map, in my grid, the items in that list aren't aware they are associated with a graphic, they're just data.   But the data includes the objectID, so I'm running a query to get back to what the corresponding graphic is.  This is a function that needs to work from one of two grids I have, so there's extra lines and incoming parameters here:

//highlights the feature when the user selects from the grid
 function highlightFeatureFromGrid(event, dGrid, qTask) {
   app.map.graphics.clear();
   app.map.infoWindow.hide();
   var row = dGrid.row(event);
   var query = new Query();
   var objid = [row.data.objectid];
   query.where = "OBJECTID = " + objid; 
   query.returnGeometry = true;
   query.outFields = ["*"];
   query.outSpatialReference = spatialReference;
   qTask.execute(query, function (results) {
        var feature = results.features[0];//should only be on feature by that id in that layer
        var graphic;  
        if (results.displayFieldName == 'VENDORID'){
            feature.setInfoTemplate(venInfoTemplate);
        }else {
            feature.setInfoTemplate(offSatInfoTemplate);
        }

app.map.centerAndZoom(feature.geometry, 12);
         graphic = new Graphic(feature.geometry, highlightMarkerSymbol,feature.attributes, feature.infoTemplate);

app.map.graphics.add(graphic);  
        app.map.infoWindow.setContent(feature.getContent());
        app.map.infoWindow.setTitle(feature.getTitle());
        app.map.infoWindow.show(feature.geometry);                   
    });
}

Assuming that gfx in your example is an esri Graphic and not something else, you ought to be able to just construct and draw a new Graphic over the top using the parameters of the existing one.

It ain't elegant, but it works.

AdamReiter · Answer

Maybe there's a better way to accomplish what I'm trying to do then.  Here's the basic workflow:

1.) User uses the DrawTool to query a location on the map.
2.) Service returns a result list.
3.) Graphics are placed on the map in the drawn query area AND items are placed in an HTML list corresponding to the graphics.

The user then needs to be able to either select the graphic on the map OR the the item in the list, with the same result: the InfoWindow being opened and the graphic being highlighted.  I'm keeping a map of the graphics with keys corresponding to the list items for easy recovery.

Here's #3 if it helps:
//results returned
for (var index in results) {
  result = results[index];

attr = {
    "name": result.name,
    "lon": result.longitude,
    "lat": result.latitude
  };

template = {
     title: "${name}",
     body: infoWindowMinimizedFragment //HTML fragment
  };
   
  pt = new Point(attr.lon, attr.lat);
  gfx = new Graphic(pt, symbols.resultSy, attr, new InfoTemplate(template.title, template.body));
    
  resultsLayer.add(gfx);
  graphicsIndex[result.name] = gfx;

Then, when the use clicks an item in the list:
var gfx = graphicsIndex[event.target.innerHTML];

//map.selectGraphic(gfx);  wishful thinking

map.infoWindow.setTitle(gfx.getTitle());
map.infoWindow.setContent(gfx.getContent());
map.infoWindow.show(gfx.geometry);

With this setup I get the problems stated in the original post: no graphic in the InfoWindow show event and the built-in blue graphic highlight doesn't update (which means I either have to disable it or scrap InfoTemplates entirely).

If there's a better, more robust way to do this I'd love to find it.  I've run into this problem several times in several different ESRI applications.

TracySchloss · Answer

That sounds like wishful thinking.  To me, graphics are all just something short lived, so I'm not surprised to have to continually recreate and clear them as I go.