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:
path image

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?

  • Have you tried forcing the graphics layer to refresh? Does hiding/showing map.graphics work the same as the three steps above? Maybe re-setting one of the layers properties (e.g. opacity) might do it as well. Commented Dec 29, 2011 at 14:52
  • A GraphicsLayer object doesn't have show/hide functions, it does have 'setOpacity', I will try and change that and see if it does
    – Jose
    Commented Dec 29, 2011 at 16:28
  • Looking at the API, GraphicsLayer extends Layer, which has show/hide. (I haven't tried it, but it should work.) There is also setVisibility which might solve the problem, too. Commented Dec 29, 2011 at 20:16

1 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(
  new esri.symbol.SimpleLineSymbol()
dojo.connect(map, "onClick", addPt);

And the body of the addPt function:

  [e.mapPoint.x, e.mapPoint.y]

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.

  • awesome, that is not too bad a work-around. Thank you! I thought I was going to have to resort to voodoo.
    – Jose
    Commented Jan 13, 2012 at 22:43
  • no voodoo required! Commented Jan 14, 2012 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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