Putting ArcGIS Server JavaScript API Graphics to work

[Anonymous User]

 
HI, this is Jamie P. bringing you another post geared towards our developer community.

 
ArcGIS Server's JavaScript API provides a Graphic object that takes multiple Geometry types for overlaying custom graphics on the Map. Three basic types of Geometry are provided: Point, Polyline, and Polygon. How the graphics are drawn is dependant on the symbol assigned to the Graphic. Graphics don't always need to be static.

 
Making the Graphics work can easily be accomplished by adding or removing geometries from the Graphics object. Geometry manipulation of the Graphic object provides an appearance of graphical animation.

 
Below is a JavaScript example of creating a line that has the appearance of a tracking layer. The setInterval function call sets a timer to call the buildLine function based on the duration specified in the second parameter passed. The addGraphic function creates the initial point Graphic. The buildLine function adds additional point Graphics to keep extending the line Graphic.

 setInterval(buildLine, 1000);

 function init() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", addGraphic);
var tiledMapServiceLayer =
new esri.layers.ArcGISTiledMapServiceLayer(
"http://brownduck/arcgis/rest/services/UtahEnergyTiled/MapServer");
map.addLayer(tiledMapServiceLayer);
}

 function addGraphic() {
xcoord = 324299.8395;
ycoord = 4460178.869;
startPoint = new esri.geometry.Point(xcoord, ycoord, map.spatialReference);
var symbol =
new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
5, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([255,0,0]), 5), new dojo.Color([255,0,0,0.25]));
map.graphics.add(new esri.Graphic(startPoint, symbol));
}

 function buildLine(){
var i = 1;
var polyLine;
var symbol;
if(i < 2){
var points = new Array();
points[0] = startPoint;
polyLine = new esri.geometry.Polyline(map.spatialReference);
symbol =
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 5)
}xcoord = xcoord + 1000.0000;
ycoord = ycoord + 0.0000;
var addPoint = new esri.geometry.Point(xcoord, ycoord, map.spatialReference);
points = addPoint;
polyLine.addPath(points);
map.graphics.add(new esri.Graphic(polyLine, symbol));
i = i + 1;
}

 

The image below shows the outcome of the code above. Notice the start point to the far left of the drawn line. The start point Graphic may be enhanced by applying a different symbol to the Graphic.

-Jamie P., Support Analyst, SDK Group, ESRI Support Services

---