1

This should be simple, but not sure why I'm not getting it. Does anyone have a stub for showing how to flash a graphic? I want to be able to call it from a button in the JSAPI UI. I am using the AMD, hopefully this isn't steering away from it.

function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();

//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;

//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
    //Get the current feature from the featureSet.
    //Feature is a graphic
    var graphic = resultFeatures[i];

    // allow different symbols
    markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 255, 255]), 2),
    new dojo.Color([255, 0, 0, 0.85]));
    lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 0, 0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,
    esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);
    fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.85]));

    // figure out which symbol to use                                                                                      
    if (graphic.geometry.type === "point" || graphic.geometry.type === "multipoint") {
        symbol = markerSymbol;
    } else if (graphic.geometry.type === "line" || graphic.geometry.type === "polyline") {
        symbol = lineSymbol;
    } else {
        symbol = fillSymbol;
    }
    //g = new esri.Graphic(evt, symbol, null, null);
    //selGraphicsLayer.add(g);

    graphic.setSymbol(symbol);

    //Set the infoTemplate.
    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.
    map.graphics.add(graphic);

    //zoom to graphics 
    var graphicsExtent = esri.graphicsExtent(map.graphics.graphics)
    if (graphicsExtent !== null) {
        map.setExtent(graphicsExtent.expand(5));

        //flashFeature(graphic, 8, symbol);                                               
        }
    }
}
1

This is how I'm doing it in my application. I'm flashing the row that is clicked in a dGrid. I've added "dojox/gfx/fx" to the require statement

    require(["dojox/gfx/fx", ... ], function(fx, ... ){ ... });

    var graphicFlash;
    var graphicHighlight = findGraphicByAttribute(row.data);

    if (graphicHighlight !== null) {
        switch (graphicHighlight.geometry.type) {
            case "point": case "multipoint":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                break;
            case "polyline":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                break;
            case "polygon": case "extent":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                break;
        }
        map.graphics.add(graphicFlash);
    }

    var shape = graphicFlash.getDojoShape();
    var animStroke = fx.animateStroke({
        shape: shape,
        duration: 500,
        color: { end: new dojo.Color([0, 0, 0, 0]) }
    });
    var animFill = fx.animateFill({
        shape: shape,
        duration: 500,
        color: { end: new dojo.Color([0, 0, 0, 0]) }
    });
    var anim = dojo.fx.combine([animStroke, animFill]).play();
    var animConnect = dojo.connect(anim, "onEnd", function () {
        map.graphics.remove(graphicFlash);
    });
  • Thanks, and nice app! I'm trying get this working on screen by wrapping it in a function and passing it an existing featureSet. Not sure if I have my requires incorrect or not but I'll keep working on it. is the fx.animateStroke the new way of doing this? Missed this, or maybe too long disconnected from JSAPI dev. – ripsin Oct 30 '13 at 2:07
  • Here is the current tutorial on animation in Dojo: dojotoolkit.org/documentation/tutorials/1.9/animation – kenbuja Oct 30 '13 at 15:40
  • Thanks @kenbuja. I followed your example and can show you how I'm creating the graphic then attempting to call the flashFeature, passing in the graphic with geometry JSFiddle link. – ripsin Oct 30 '13 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.