Polyline insertPoint issue using ArcGIS API for JavaScript?

Question

Using ArcGIS API for JavaScript 2.5 I am trying to draw a path on an esri map. with circles like so, but when I call Polyline.insertPoint it doesn't show the new segment:

I keep adding points as time progresses. My implementation is to have a Graphic object with a Polyline geometry and a SimpleLineSymbol. I call the Polyline's insertPoint method when I need to add a segment. The problem I'm coming across is that when I call insertPoint, the point point is added to the array, BUT doesn't color in the line. The interesting thing is that if I remove the graphic from the graphics layer and then add it back on, then the new line segment shows up. This would be sufficient, except I need to have circles drawn on top of the line, so when I remove+add the Polyline it is drawn on top of the circles.

So in my current implementation every time I add a line point, I have to:

1. Call Polyline.insertPoint
2. Remove then add the graphic from the graphics layer
3. Remove + add all the circles on the path (because they just got hidden from the above action)

The problem with the above steps is that the line and circles flash on and off during this process which is very undesirable.

I feel like I am using the graphic objects provided by esri incorrectly because it's so hard to accomplish a seemingly easy task. Do you have any suggestions on an alternative implementation that has a good probability of not having these same graphical artifacts that I'm experiencing?

Answer 1

The best way to make this work is to update your geometry and then set the geometry for your graphic. After a graphic's setGeometry method is called, the graphic will update.

If everything worked as it should, you would call insertPoint on your polyline and then pass your polyline to your graphic's setGeometry method. That being said, your use case uncovered a bug in insertPoint. The current implementation(version 2.6 of the API) won't let you insert a point on the end of a path. The best workaround is to use addPath. The code would look like this:

// add a polyline, line and lineGraphic are global
var p1 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-100, 40, map.spatialReference));
var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-90, 40, map.spatialReference));
line = new esri.geometry.Polyline();
line.addPath([p1, p2]);
lineGraphic = map.graphics.add(new esri.Graphic(
  line,
  new esri.symbol.SimpleLineSymbol()
));
dojo.connect(map, "onClick", addPt);

And the body of the addPt function:

line.addPath([
  line.paths[pathCount-1][line.paths[pathCount-1].length-1], 
  [e.mapPoint.x, e.mapPoint.y]
]);
lineGraphic.setGeometry(line);

Here's a working example: http://jsfiddle.net/swingley/SntsN/ Click the map to extend the line. We will (hopefully) fix this bug in the next release of the API, which is 2.7.