Clustering issue- use rest service points for flare points around cluster

MattTenold — Tue, 25 Mar 2014 17:16:34 GMT

Hi everyone,

I am working on a project to cluster points around a main cluster and have the points tied to the main event with a line. Also the points have to be arranged where they are in real life. Here is the code sample. I need to bypass the mathematically derived points function and have the flare points use the moused over feature in the json rest service instead. Just a note, sorry the code comes in soo funny, 10,000 character limit.

    //this function may not be needed exactly as is below.  somehow, the attributes need to be mapped to the points.
    setFeatures: function(features) {
        this._features = [];
        var wkid = features[0].geometry.spatialReference.wkid;
        if (wkid != 102100) {
            if (wkid == 4326 || wkid == 4269 || wkid == 4267) {
                dojo.forEach(features, function(feature) {
                    if (this._map.spatialReference.wkid == 102100) {
                        point = esri.geometry.geographicToWebMercator(feature.geometry);
                    } else {
                        point = feature.geometry;
                    }
                    point.attributes = feature.attributes;
                    this._features.push(point);
                }, this);
            } else {
                throw 'Input Spatial Reference Must Be in Either WKID: 102110 or WKID: 4326';
                return;
            }
        } else {
            dojo.forEach(features, function(feature) {
                point = feature.geometry;
                point.attributes = feature.attributes;
                this._features.push(point);
            }, this);
        }
    },

handleMouseOver: function(evt) {
        var graphic = evt.graphic;
        if (graphic.symbol.type == 'textsymbol' || graphic.symbol.type == 'simplelinesymbol') {
            if (graphic.attributes) {
                if (graphic.attributes.baseGraphic && graphic.attributes.baseGraphic.task) {
                    graphic.attributes.baseGraphic.task.cancel();
                }
            }
            return;
        }
        if (graphic.attributes.isCluster) { //cluster mouse over
            if (graphic.attributes.clustered) {
                if (graphic.task) {
                    graphic.task.cancel();
                }
                return;
            }
        } else { //single marker or cluster flare mouse over
            if (graphic.attributes.baseGraphic) { //cluster flare
                graphic.attributes.baseGraphic.task.cancel();
            }
            this.showInfoWindow(graphic);
            return;
        }

           graphic.clusterGraphics = [];

        //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 < numPoints; i++) {
                dblSinus = Math.sin((Math.PI * 2.0) * (i / numPoints));
                dblCosinus = Math.cos((Math.PI * 2.0) * (i / numPoints));

                x = centerPoint.x + bufferDistance * dblCosinus;
                y = centerPoint.y + bufferDistance * dblSinus;

                //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, { baseGraphic: graphic }), this._infoTemplate);

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

topic Clustering issue- use rest service points for flare points around cluster in ArcGIS JavaScript Maps SDK Questions

Clustering issue- use rest service points for flare points around cluster