Intro to graphics

Graphics are an essential component of the ArcGIS API for JavaScript. You can use them to display locations on a map with simple symbols or for displaying the results of a Query or other task. The more comfortable you are with working with graphics, the more fluent you will become in working with geometries, layers, tasks, and Popups.

This tutorial will show you how to add simple graphics to a map, style them with a custom symbol, and add attributes to them.

Prior to completing the following steps, you should be familiar with views and Map. If necessary, complete the following tutorials first:

The remaining steps will walk you through how to work with each one of these properties.

3. Create a line geometry

We want to add a line graphic to our map showing a generalized version of the proposed location of the Keystone Pipeline.

Require the Polyline module and create a new polyline geometry representing this location. You will use the paths property to add vertices to the line.

require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//// This is where you created a Map and MapView in the previous steps//// Create a line geometry with the coordinates of the linevar polyline = {
type: "polyline", // autocasts as new Polyline()
paths: [
[-111.30, 52.68],
[-98, 49.5],
[-93.94, 29.89]
]
};
});

4. Create a line symbol

Now that you have a geometry for the location of the pipeline, you need a symbol to render the line in the view. Create a line symbol for the pipeline with a SimpleLineSymbol.

require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//// This is where you created a Map, MapView,// and geometry in the previous steps//// Create a simple line symbol for rendering the line in the viewvar lineSymbol = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: [226, 119, 40], // RGB color values as an array
width: 4
};
});

5. Create attributes to store in the graphic

Attributes can provide key information about the graphic that can enhance the usefulness of your application. In this step, we'll add three basic attributes to the line graphic: name, owner, length.

require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//// This is where you created a Map, MapView,// geometry, and symbol in the previous steps//// Create a simple object containing useful information relating to the featurevar lineAtt = {
Name: "Keystone Pipeline", // The name of the pipeline
Owner: "TransCanada", // The owner of the pipeline
Length: "3,456 km"// The length of the pipeline
};
});

6. Create a graphic and assign its geometry, symbol and attributes

require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(
Map,
MapView,
Graphic
) {
//// This is where you created a Map, MapView,// geometry, symbol, and attributes in the previous steps//// Create the graphicvar polylineGraphic = new Graphic({
geometry: polyline, // Add the geometry created in step 4
symbol: lineSymbol, // Add the symbol created in step 5
attributes: lineAtt // Add the attributes created in step 6
});
// Add the graphic to the view's default graphics view// If adding multiple graphics, use addMany and pass in the array of graphics.
view.graphics.add(polylineGraphic);
});

7. Add a PopupTemplate to the graphic

Popups can give users access to all the attributes in a graphic. Setting a simple PopupTemplate will allow users to view the attributes of the feature when it is clicked in the view. For more information about how to work with Popups and PopupTemplate, see the Intro to popups tutorial and other Popup samples.

Add a new PopupTemplate to the graphic. This step must either be done in the constructor for the graphic or prior to adding the graphic to the GraphicsLayer.