Learn how to display point, line, and polygon graphics in a map.
Graphics are visual elements used to display points, lines, polygons, and text in a map or scene. Graphics are composed of a geometry, symbol, and attributes, and can display a pop-up when clicked. You typically use graphics to display geographic data that is not connected to a database (i.e. a GPS location).
In this tutorial, you will learn how to display points, lines, and polygons on a map as graphics.
Prerequisites
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Get an access token
You need an access token with the correct privileges to access the location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Privileges
- In CodePen, set
esri
to your access token.Config.api Key Use dark colors for code blocks var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
To learn about other ways to get an access token, go to Types of authentication.
Add modules
-
In a new
<script
at the bottom of the> <body
use a> require
statement, to add theGraphic
andGraphics
modules.Layer The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD
require
function uses references to determine which modules will be loaded – for example, you can specify"esri/layers/
for loading the FeatureLayer module. After the modules are loaded, they are passed as parameters (e.g.Feature Layer" Feature
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. To learn more about the API's different modules visit the Overview Guide page.Layer Use dark colors for code blocks <script> require(["esri/Graphic", "esri/layers/GraphicsLayer"], (Graphic, GraphicsLayer) => { }); </script>
Add a graphics layer
A graphics layer is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics layer to a map. Graphics layers are displayed on top of all other layers.
-
Create and add a
Graphics
for displaying graphics on a map. When using the arcgis-map component, you need to add an event listener forLayer arcgis
to wait until the component is ready.View Ready Change Use dark colors for code blocks <script> require(["esri/Graphic", "esri/layers/GraphicsLayer"], (Graphic, GraphicsLayer) => { const arcgisMap = document.querySelector("arcgis-map"); arcgisMap.addEventListener("arcgisViewReadyChange", () => { const graphicsLayer = new GraphicsLayer(); arcgisMap.addLayer(graphicsLayer); }); }); </script>
Add a point graphic
A point graphic is created using a point and a marker symbol. A point is defined with longitude (x) and latitude (y) coordinates, and a simple symbol is defined with a color and outline. The Point
and Simple
classes are used to create the point graphic.
If you would like to display graphics in a map with a spatial reference other than WKID 102100, 3857, or 4326, you must specify the spatial reference when creating a point, line, or polygon geometry. Otherwise, it can be omitted, and the map view's spatial reference will be applied. Learn more about spatial references and coordinate systems in Spatial reference.
-
Create a
point
andsimple
that will be used to create aMarker Symbol Graphic
.Use dark colors for code blocks const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889 }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } };
-
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocastpoint
andsimple
when it is constructed.Marker Symbol Point graphics support a number of symbol types such as
Simple
,Marker Symbol Picture
andMarker Symbol Text
. Learn more about symbols in the API documentation.Symbol Use dark colors for code blocks const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889 }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic);
-
Verify that the point graphic positioned at Point Dume Beach.
Add a line graphic
A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points and a spatial reference. The Polyline
and Simple
classes are used to create a line graphic.
-
Define the
polyline
andsimple
that will be used to create aLine Symbol Graphic
.Use dark colors for code blocks const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [-118.821527826096, 34.0139576938577], //Longitude, latitude [-118.814893761649, 34.0080602407843], //Longitude, latitude [-118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 };
-
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocast thepolyline
andsimple
when it is created.Line Symbol Polyline graphics support a number of symbol types such as
Simple
andLine Symbol Text
. Learn more about symbols in the API documentation.Symbol Use dark colors for code blocks // Create a line geometry const polyline = { type: "polyline", paths: [ [-118.821527826096, 34.0139576938577], //Longitude, latitude [-118.814893761649, 34.0080602407843], //Longitude, latitude [-118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic);
-
Verify that the line graphic positioned along Westward Beach.
Add a polygon graphic
A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points (ring) that describe a closed boundary and a spatial reference. The Polygon
and Simple
classes are used to create and display a polygon graphic.
-
Define the
polygon
andsimple
that will be used to create aFill Symbol Graphic
Use dark colors for code blocks const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [-118.818984489994, 34.0137559967283], //Longitude, latitude [-118.806796597377, 34.0215816298725], //Longitude, latitude [-118.791432890735, 34.0163883241613], //Longitude, latitude [-118.79596686535, 34.008564864635], //Longitude, latitude [-118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } };
-
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocast thepolygon
andsimple
when it is created.Fill Symbol Polygon graphics support a number of
Symbol
types, such asSimple
,Fill Symbol Picture
,Fill Symbol Simple
, andMarker Symbol Text
. It is also important to note that outer polygon ring coordinates should be added in clock-wise order, while inner ring coordinates (islands) should be added in counter-clockwise order.Symbol Use dark colors for code blocks // Create a polygon geometry const polygon = { type: "polygon", rings: [ [-118.818984489994, 34.0137559967283], //Longitude, latitude [-118.806796597377, 34.0215816298725], //Longitude, latitude [-118.791432890735, 34.0163883241613], //Longitude, latitude [-118.79596686535, 34.008564864635], //Longitude, latitude [-118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, }); graphicsLayer.add(polygonGraphic);
-
Verify that the polygon graphic positioned on Mahou Riviera.
Create a pop-up
You can display a pop-up for a graphic when it is clicked. The code that creates the polygon graphic to show a pop-up containing the name and description of the graphic uses the attribute
and popup
properties.
-
In the
arcgis
event listener, define theView Ready Change popup
andTemplate attributes
before defining thepolygon
.Graphic Use dark colors for code blocks const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const popupTemplate = { title: "{Name}", content: "{Description}" }; const attributes = { Name: "Graphic", Description: "I am a polygon" };
-
Update the
polygon
to include theGraphic popup
andTemplate attribute
properties.Use dark colors for code blocks const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic);
Run the app
In CodePen, run your code to display the map.
The map should display all three graphics. When you click on the polygon, it should show a pop-up.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: