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 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);        
 }
    }

Here is an idea: add a onclick event on map after you add custom graphics like: dojo.connect (map, "onclick", afterClick). In afterClick(evt) handler, buffer click point to a offset distance you defined (in order to creat a polyon instead of clickpoint itself). using this buffered clickpoint(thePolygon) to do a intersection analysis against the custom graphics like gsvc.intersect(esri.getGeometries(map.graphics.graphics), thePolygon.geometry, identifyCustomGraphics). In identifyCustomGraphics(geometries) handler, get the count of the geometries, if is more than one (meaning that your clicked and buffered point intersected with more than one custom graphics), then add the click point to the graphic layer with a template you specified. This could be a workaround for your situation. However it is little complicated and you have to consider the custom graphics info template's own click event are on etc...

[JamesBurton]

Thank you hzhu, I will have a go at this. It's the sort of thing I was thinking of trying following the lead of this sample which selects multiple objects in the graphics layer: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/graphics/graphics_extent_query.html

Cheers,

Jim

[JamesBurton]

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!

[JamesBurton]

Sorry, I RTFM'd and its map.graphics.disableMouseEvents(). Thanks, nearly there 🙂

[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.