Show featureset when clicking on several custom graphics

JamesBurton

I have the following code that loops through some JSON and draws points as graphics with infotemplates. Right now the default behavior is in effect, and clicking on a point shows the infowindow. I want to set this up so that if someone clicks on more than one point I use a different template, showing the list of links to features clicked on. The samples contain examples of this behaviour when using querytasks, but I'm not sure how to adapt that to my situation. Thanks!

/* draw a set of sightings as points on the map */
    function drawSightings(data) {
 map.graphics.clear();
 var point, colour, sighting;
 //draw the points
 for (var i=0; i < data.length; i++) {
     sighting = data;
     point = {"geometry":{"x": sighting.x,
     "y": sighting.y,
     "spatialReference": map.spatialReference},
       "attributes":{
    "number_observed": sighting.number_observed
       },
       "symbol":{
    "color": [255, 0, 0, 128],
    "size":12,
    "angle":0,
    "xoffset":0,
    "yoffset":0,
    "type":"esriSMS",
    "style":"esriSMSCircle",
    "outline":{
        "color":[0,0,0,255],
        "width":1,
        "type":"esriSLS",
        "style":"esriSLSSolid"
    }
       },
       "infoTemplate":{
    "title": " ${common_name} [${scientific_name}]",
    "content": "Number seen: ${number_observed}"
       }
      };
     graphic = new esri.Graphic(point);
     map.graphics.add(graphic);        
 }
    }

HemingZhu

I have made some progress with this but I don't know how to diable the custom graphics onclick handlers. Here is the onClick handler I added to map:

function afterClick(evt) {
    console.log('afterclick');
    console.log(evt.mapPoint);
    var p = evt.mapPoint;
    var green = new esri.symbol.SimpleMarkerSymbol().setColor(
 new dojo.Color([0, 255, 0]));
    var red = new esri.symbol.SimpleMarkerSymbol().setColor(
 new dojo.Color([255, 0, 0]));
    //make a map extent around the mapclick point
    var dx, dy;
    dx = dy = 10;
    var extent = new esri.geometry.Extent(p.x - dx, p.y - dy, p.x + dx, p.y + dy, p.spatialReference);
    
    var graphics = map.graphics.graphics;
    var results = [];
    var graphic;
    for (var i=0, il=graphics.length; i<il; i++) {
        graphic = graphics;
 
        //if point is contained within extent, highlight it and add for display in results list
        if (extent.contains(graphic.geometry)) {
     graphic.setSymbol(red);
            results.push(graphic.attributes);
        }
        //else if point was previously highlighted, reset its symbology
        else if (graphic.symbol == red) {
            graphic.setSymbol(green);
        }
    }
    //if reults.length == 1, show the infoWindow for that graphic. If > 1, show an infoWindow offering a choice of the results.
    console.log(results);
}

When I click on the map avoiding the points, the afterClick function is called. If I click on a point, the infoWindow for that point is shown, and afterClick is never called. How do I remove the onclick handler for the graphics?

Thanks!

Since the map.graphics layer in always on top, the onclick event on graphics are fired first. to avoid that, you might have to use map.graphics.disableMouseEvents() to disable onclick for graphics, and after your afterClick is fired, enable onclick event on graphics using map.graphics.enableMouseEvents() to enable onclick.