Add a point, line, and polygon
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. For example, a GPS location.
In this tutorial, you display points, lines, and polygons on a map as graphics.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKey
to your key, so it can be used to access basemap layer and location services.Change line esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service });
Add modules
In the
require
statement, add theGraphic
andGraphicsLayer
modules.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Add line. Add line. Change line <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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 view. Graphics layers are displayed on top of all other layers.
Create and add a
GraphicsLayer
to store graphics.Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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 SimpleMarkerSymbol
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
andsimpleMarkerSymbol
that will be used to create aGraphic
.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocastpoint
andsimpleMarkerSymbol
when it is constructed.Point graphics support a number of symbol types such as
SimpleMarkerSymbol
,PictureMarkerSymbol
andTextSymbol
. Learn more about symbols in the API documentation.Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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 SimpleLineSymbol
classes are used to create a line graphic.
Define the
polyline
andsimpleLineSymbol
that will be used to create aGraphic
.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocast thepolyline
andsimpleLineSymbol
when it is created.Polyline graphics support a number of symbol types such as
SimpleLineSymbol
andTextSymbol
. Learn more about symbols in the API documentation.Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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 SimpleFillSymbol
classes are used to create and display a polygon graphic.
Define the
polygon
andsimpleFillSymbol
that will be used to create aGraphic
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
Graphic
and set thegeometry
andsymbol
properties. TheGraphic
class will autocast thepolygon
andsimpleFillSymbol
when it is created.Polygon graphics support a number of
Symbol
types, such asSimpleFillSymbol
,PictureFillSymbol
,SimpleMarkerSymbol
, andTextSymbol
. 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.Add line. Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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 popupTemplate
properties.
In the main function, define the
popupTemplate
andattributes
.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the
polygonGraphic
to include thepopupTemplate
andattribute
properties.Add line. Add line. <html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service }); const view = new MapView({ map: map, center: [-118.80500,34.02700], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); 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); // 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); // 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 popupTemplate = { title: "{Name}", content: "{Description}" } const attributes = { Name: "Graphic", Description: "I am a polygon" } const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol, attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(polygonGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
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: