2

With the code below I was hoping to flash the selected polyline, however no success.

function flashResults(featureSet) {
alert("flash");
//remove all graphics on the maps graphics layer
map.graphics.clear();

//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 graphicFlash = 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([0, 255, 255]), 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 (graphicFlash.geometry.type === "point" || graphicFlash.geometry.type === "multipoint") {
        symbol = markerSymbol;
    } else if (graphicFlash.geometry.type === "line" || graphicFlash.geometry.type === "polyline") {
        symbol = lineSymbol;
    } else {
        symbol = fillSymbol;
    }

    graphicFlash.setSymbol(symbol);

    //Add graphic to the map graphics layer.
    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);
    });
}

}

  • Have your tried creating a single graphic from all the graphics and flashing that instead? Try using the Polyline addPath method. – kenbuja Nov 4 '13 at 21:36
  • Not yet. It's breaking at var shape = graphicFlash.getDojoShape(); so I'm guessing .getDojoShape() may be outdated with the new version (I'll check it out API link.) Crunched for time, do you have an example with the addPath() method I could refer to besides the API? Thanks! – ripsin Nov 4 '13 at 23:12
4

You're on the right track using dojox/gfx/fx.animatedStroke. Here's a simplified working example showing how you can animate stroke: http://jsbin.com/ujoWejo/1/

Relevant JS:

var map;
require([
  "esri/map",
  "esri/layers/GraphicsLayer",
  "esri/geometry/Polyline", 
  "esri/symbols/SimpleLineSymbol",
  "esri/graphic",
  "dojo/_base/lang",
  "dojox/gfx/fx",
  "dojo/domReady!"
], function(
  Map, GraphicsLayer, Polyline, SimpleLineSymbol, Graphic, lang, fx
) {
  map = new Map("map", { 
    basemap: "oceans",
    center: [-84.977, 59.919],
    zoom: 4,
    slider: false,
    showAttribution: false
  });

  map.addLayer(new GraphicsLayer({ "id": "look" }));
  map.on("click", function (e) {
    var l = map.getLayer("look");
    var distance = (map.extent.getWidth() / map.width) * 50;
    var line = new Polyline(map.spatialReference);
    line.addPath([
      [e.mapPoint.x - distance, e.mapPoint.y],
      [e.mapPoint.x + distance, e.mapPoint.y]
    ]);
    var g = new Graphic(line, new SimpleLineSymbol());
    l.add(g);
    // if you've never used partial, read this:
    // http://dojotoolkit.org/reference-guide/1.9/dojo/_base/lang.html#dojo-base-lang-partial
    setTimeout(lang.partial(function(animateMe) {
      var shape = animateMe.getDojoShape();
      fx.animateStroke({
        shape: shape,
        duration: 1000,
        color: { start: "red", end: shape.strokeStyle.color },
        width: { start: 20, end: shape.strokeStyle.width }
      }).play();
    }, g), 500);
  });
});

You also mentioned AMD in your question title. Whenever you find yourself typing or referencing dojo.something or esri.anything, you're not using AMD. AMD means loading modules using require() and locally scoped references to those modules. If you're referencing things from globals you're still doing things in the older non-AMD legacy style.

|improve this answer|||||
  • I tried, but I'm not getting it to run through the partial. I created a JSFiddle with the important parts that show what I've done, trying to adopt your direction. Hoping a second set of rested eyes can pick out where I'm flailing. Thanks in advance! link to code Also thanks for clearing up the lingo :) – ripsin Nov 6 '13 at 8:28
  • That fiddle doesn't have any HTML or resources, of course it's not going to work! – blah238 Nov 6 '13 at 8:41
  • You also don't seem to be using AMD correctly, mixing in legacy globals when you should only be referencing arguments to the require function. – blah238 Nov 6 '13 at 8:45
  • The JSFiddle does not work it was just a way to present code. Can you give me an example of where I'm jumping back and forth with legacy globals. I didn't think that was a problem. Thanks. – ripsin Nov 6 '13 at 17:36
  • Probably better to use a gist if you only need to share code: gist.github.com/swingley/f4d98920bcc221b929b0 You're loading Esri and Dojo modules using require (lines 6-31) but you use globals throughout your code, see lines 54-63 where you use esri.* and dojo.*. You can technically mix AMD and legacy but it's bad form and adds unneeded complexity. Plus your code will break when the legacy stuff goes away and AMD is the only option. Are you able to post a full example rather than just your JS? A full page is much easier to debug than just JS. – Derek Swingley Nov 6 '13 at 20:24

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.