I would approach this a little different. I would separate the line from the arrow head.
something Like this: (please forgive the hodgepodge of code)
var trackingLayer;
var trackingPath;
var trackingCurrentSymbol;
var trackingCurrentGraphic;
init {
var trackingLayer = new esriGraphicsLayer({ id: "trackingLayer" });
map.addLayer(trackingLayer);
// init line as usual
trackingCurrentSymbol = new SimpleMarkerSymbol(
{
"color": { r: 255, g: 99, b: 3, a: 1 },
"path": "M29.225,23.567l-3.778-6.542c-1.139-1.972-3.002-5.2-4.141-7.172l-3.778-6.542c-1.14-1.973-3.003-1.973-4.142,0L9.609,9.853c-1.139,1.972-3.003,5.201-4.142,7.172L1.69,23.567c-1.139,1.974-0.207,3.587,2.071,3.587h23.391C29.432,27.154,30.363,25.541,29.225,23.567zM16.536,24.58h-2.241v-2.151h2.241V24.58zM16.428,20.844h-2.023l-0.201-9.204h2.407L16.428,20.844z",
"size": 21,
"style": "esriSMSPath",
"type": "esriSMS",
"xoffset": 0,
"yoffset": 0
}
);
}
onUpdateCurrent {
// Get GPS
// Add vertices to path
// Update arrow.
lastPosition = me.currentPosition;
currentPosition = new Point(long, lat);
currentHeading = me.computeAngle(me.lastPosition, me.currentPosition);
trackingCurrentGraphic.setGeometry(currentPosition);
trackingCurrentSymbol.setAngle(currentHeading);
trackingCurrentGraphic.setSymbol(trackingCurrentSymbol);
}
computeAngle = function(pointA, pointB) {
var dLon = (pointB.x - pointA.x) * Math.PI / 180;
var lat1 = pointA.y * Math.PI / 180;
var lat2 = pointB.y * Math.PI / 180;
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
var bearing = (Math.atan2(y, x) * 180 / Math.PI) + 180;
bearing = ((bearing + 360) % 360).toFixed(1); //Converting -ve to +ve (0-360)
if (isNaN(bearing)) bearing = 0;
return bearing;
};
SVG Icons:
Icons