matthew.f.tenold

Issue setting x and y for graphics that are clustered

Discussion created by matthew.f.tenold on Mar 26, 2014
I got past my original issue getting lat long's to be set however in the final part of my function I am in a chicken vs egg sort of situation.   I need to create base graphics to get the attributes for the grouped graphics geometries to show up but then I need to get the lat longs out of the base graphics to be set as variables in a for each loop.   I have underlined and bolded the problem area.

   //fires when any graphic (clustered or single) is moused over
    handleMouseOver: function(evt) {
     var graphic = evt.graphic;
  var latlon = evt.graphic.geometry;
  
  
  
  
        graphic.clusterGraphics = [];
  //alert('x =' + latlon.x + 'y =' + latlon.y);
        var cSize = graphic.attributes.clusterSize;
        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 1]), 1);

        //polyline used to "tie" flare to cluster
        //set up initially with the center pt of the cluster as the first point and a dummy point @ 0,0 for a placeholder
        var line = new esri.geometry.Polyline(map.spatialReference);
        line.addPath([graphic.geometry, new esri.geometry.Point(0, 0)]);

        //polyline graphic
        var lineGraphic = new esri.Graphic(line, lineSymbol);

        //creating a circle to evenly distribute our flare graphics around
        if (cSize > 1 && cSize <= this._flareLimit) {  //cSize > 1 may not be needed
            //takes the number of points (flares) for the cluster
            var numPoints = graphic.attributes.clusterSize;

            //takes the pixel distance from the center of the graphic to flare out the graphics
            var bufferDistance = this.getPixelDistanceFromCenter(graphic.geometry);

            //center of cluster graphic
            var centerPoint = graphic.geometry;
   
            
            //variables used to plot points evenly around the cluster
            var dblSinus, dblCosinus, x, y, pt, ptGraphic, p, l;

 for (var i = 0; i < graphic.attributes.clusterSize; i++)  {
     //constructing the flare graphic point
 pt = new esri.geometry.Point(x, y, this._map.spatialReference)

 ptGraphic = new esri.Graphic(pt, this.symbolBank.single, dojo.mixin(graphic.attributes[i], { baseGraphic: graphic }),      this._infoTemplate);
 
x = graphic.attributes[i].baseGraphic.geometry.x;
    
 y = graphic.attributes[i].baseGraphic.geometry.y;    
                //constructing the flare graphic point
                //pt = new esri.geometry.Point(x, y, this._map.spatialReference)
                //ptGraphic = new esri.Graphic(pt, this.symbolBank.single, dojo.mixin(graphic.attributes[i], { baseGraphic: graphic }), this._infoTemplate);
    //alert('pt.x=' + pt.x + 'pt.y=' + pt.y )
                //try to always bring flare graphic to front of everything else
                p = this.add(ptGraphic);
                //p.getDojoShape().moveToFront();

                //reset our 0,0 placeholder point in line to the actual point of the recently created flare graphic
                line.setPoint(0, 1, pt);
                lineGraphic = new esri.Graphic(line, lineSymbol, { baseGraphic: graphic });
                
                //try to always have connector line behind everything else
                l = this.add(lineGraphic);
                //l.getDojoShape().moveToBack();

                //store flare graphic and connector graphic
                graphic.clusterGraphics.push(p);
                graphic.clusterGraphics.push(l);
            }
            
            //set "clustered" flag
            graphic.attributes.clustered = true;
        }
    },

Outcomes