Learn how to calculate the length and area of geometries.
You can calculate the length of a line and determine the area of a polygon using the geometry operators. The measurement depends on the coordinate system (or spatial reference) defined for the geometry. If the geometry's spatial reference is Web Mercator (3857) or WGS84 (4326), you would use geodesic calculations to take into account the curvature of the Earth. If the spatial reference is something different from Web Mercator (3857) or WGS84 (4326), you would use planar measurements based on Euclidean distances.
In this tutorial, you will use the Sketch component to draw graphics on the view and geometry operators to calculate both geodesic and planar lengths and areas to see the difference between the two measurements.
NoteTo learn more about how measurements can be performed without using the geometry engine refer to the Distance Measurement 2D and Direct Line Measurement 3D documentation.
Prerequisites ArcGIS Accounts:You need an ArcGIS Location Platform or ArcGIS Online account.
Steps Create a new penYou need an access token with the correct privileges to access the location services used in this tutorial.
esriConfig.apiKey to your access token.
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
var esriConfig = {
apiKey: "YOUR_ACCESS_TOKEN",
};
To learn about other ways to get an access token, go to Types of authentication.
Recenter the map and add a scalebarThe ScaleBar component will display a scale bar on the map. You can choose either metric or imperial values. For example, if you set the unit attribute to metric, it will show kilometers or meters, depending on the scale.
Change the center and zoom attributes on the arcgis-map.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<arcgis-map basemap="arcgis/topographic" center="-10, 30" zoom="3">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>
Add an arcgis-scalebar component to the bottom left of the map and set its unit attribute to be "metric".
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<arcgis-map basemap="arcgis/topographic" center="-10, 30" zoom="3">
<arcgis-zoom position="top-left"></arcgis-zoom>
<!-- Scale bar component -->
<arcgis-scale-bar position="bottom-left" unit="metric"></arcgis-scale-bar>
</arcgis-map>
Run the app to verify the change in the center and zoom level. The scalebar should appear at the bottom left of the map.
The Sketch component provides UI that allows you to create and update graphics.
Add an arcgis-sketch component to the top-right corner of the map. Any geometry drawn using the component will be added to a GraphicsLayer that the component will create for us as its layer property. To simplify the user interface, limit the tools available on the component by setting the appropriate attributes.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<arcgis-map basemap="arcgis/topographic" center="-10, 30" zoom="3">
<arcgis-zoom position="top-left"></arcgis-zoom>
<!-- Scale bar component -->
<arcgis-scale-bar position="bottom-left" unit="metric"></arcgis-scale-bar>
<!-- Sketch component -->
<arcgis-sketch
creation-mode="update"
hide-selection-tools-lasso-selection
hide-selection-tools-rectangle-selection
hidesnappingcontrols
hide-undo-redo-menu
hide-settings-menu
position="top-right"></arcgis-sketch>
</arcgis-map>
Run the app to verify that the component appears in the view and that you can draw graphics.
Add an arcgis-placement component and inside of the element tags place a div to display the results of a calculation in the bottom-right corner of the map.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!-- Sketch component -->
<arcgis-sketch
creation-mode="update"
hide-selection-tools-lasso-selection
hide-selection-tools-rectangle-selection
hidesnappingcontrols
hide-undo-redo-menu
hide-settings-menu
position="top-right"></arcgis-sketch>
<!-- Placement component -->
<arcgis-placement position="bottom-right">
<div id="measurementsDiv"></div>
</arcgis-placement>
Add some CSS styling to set the background-color, border-radius and padding.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<style>
html,
body {
height: 100%;
margin: 0;
}
#measurementsDiv {
background-color: white;
border-radius: 6px;
padding: 6px;
}
</style>
Use $arcgis.import to add the necessary modules in a new <script> at the bottom of the <body>.
The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<script type="module">
const [
Graphic,
areaOperator,
geodeticAreaOperator,
geodeticLengthOperator,
lengthOperator,
Polygon,
Polyline,
SimpleFillSymbol,
] = await $arcgis.import([
"@arcgis/core/Graphic.js",
"@arcgis/core/geometry/operators/areaOperator.js",
"@arcgis/core/geometry/operators/geodeticAreaOperator.js",
"@arcgis/core/geometry/operators/geodeticLengthOperator.js",
"@arcgis/core/geometry/operators/lengthOperator.js",
"@arcgis/core/geometry/Polygon.js",
"@arcgis/core/geometry/Polyline.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
</script>
Use the document.querySelector method to get a reference to the arcgis-sketch component and the #measurementsDiv.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<script type="module">
const [
Graphic,
areaOperator,
geodeticAreaOperator,
geodeticLengthOperator,
lengthOperator,
Polygon,
Polyline,
SimpleFillSymbol,
] = await $arcgis.import([
"@arcgis/core/Graphic.js",
"@arcgis/core/geometry/operators/areaOperator.js",
"@arcgis/core/geometry/operators/geodeticAreaOperator.js",
"@arcgis/core/geometry/operators/geodeticLengthOperator.js",
"@arcgis/core/geometry/operators/lengthOperator.js",
"@arcgis/core/geometry/Polygon.js",
"@arcgis/core/geometry/Polyline.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
// Get references to the arcgis-sketch component and measurementsDiv elements
const arcgisSketch = document.querySelector("arcgis-sketch");
const measurementsDiv = document.querySelector("#measurementsDiv");
</script>
Set the availableCreateTools property on the sketch component to further refine the available tools.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<script type="module">
const [
Graphic,
areaOperator,
geodeticAreaOperator,
geodeticLengthOperator,
lengthOperator,
Polygon,
Polyline,
SimpleFillSymbol,
] = await $arcgis.import([
"@arcgis/core/Graphic.js",
"@arcgis/core/geometry/operators/areaOperator.js",
"@arcgis/core/geometry/operators/geodeticAreaOperator.js",
"@arcgis/core/geometry/operators/geodeticLengthOperator.js",
"@arcgis/core/geometry/operators/lengthOperator.js",
"@arcgis/core/geometry/Polygon.js",
"@arcgis/core/geometry/Polyline.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
// Get references to the arcgis-sketch component and measurementsDiv elements
const arcgisSketch = document.querySelector("arcgis-sketch");
const measurementsDiv = document.querySelector("#measurementsDiv");
// Set the available create tools for the arcgis-sketch component
arcgisSketch.availableCreateTools = ["polyline", "polygon", "rectangle"];
</script>
The geometry operators allow you to calculate a geometry's planar length/area or geodesic length/area. Because the geometries in this application are projected in Web Mercator, it is best practice to use geodesic measurements. In this tutorial, we calculate both when a graphic is drawn to visualize the difference between geodesic and planar calculations.
Create a getArea function that takes a polygon as its parameter. Use the geodeticAreaOperator and the areaOperator geometry operators to calculate the area of the polygon in square-kilometers. Append the calculation results to the innerHTML of measurementsDiv.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// A function to get the area of a polygon
async function getArea(polygon) {
if (!geodeticAreaOperator.isLoaded()) {
await geodeticAreaOperator.load();
}
const geodesicArea = geodeticAreaOperator.execute(polygon, { units: "square-kilometers" });
const planarArea = areaOperator.execute(polygon, { units: "square-kilometers" });
measurementsDiv.innerHTML =
"<b>Geodesic area</b>: " +
geodesicArea.toFixed(2) +
" km\xB2" +
" | <b>Planar area</b>: " +
planarArea.toFixed(2) +
" km\xB2";
}
Create a getLength function that takes a line parameter. Use the geodeticLengthOperator and lengthOperator geometry operators to calculate the length of the line in kilometers. Append the results of the geodesic length calculation to the innerHTML of the measurementsDiv.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// A function to get the area of a polygon
async function getArea(polygon) {
if (!geodeticAreaOperator.isLoaded()) {
await geodeticAreaOperator.load();
}
const geodesicArea = geodeticAreaOperator.execute(polygon, { units: "square-kilometers" });
const planarArea = areaOperator.execute(polygon, { units: "square-kilometers" });
measurementsDiv.innerHTML =
"<b>Geodesic area</b>: " +
geodesicArea.toFixed(2) +
" km\xB2" +
" | <b>Planar area</b>: " +
planarArea.toFixed(2) +
" km\xB2";
}
// A function to get the length of a polyline
async function getLength(line) {
if (!geodeticLengthOperator.isLoaded()) {
await geodeticLengthOperator.load();
}
const geodesicLength = geodeticLengthOperator.execute(line, { units: "kilometers" });
const planarLength = lengthOperator.execute(line, { units: "kilometers" });
measurementsDiv.innerHTML =
"<b>Geodesic length</b>: " +
geodesicLength.toFixed(2) +
" km" +
" | <b>Planar length</b>: " +
planarLength.toFixed(2) +
" km";
}
Create a getMeasurements function that will either call the getArea function or the getLength function depending on whether the geometry is a polygon or a polyline.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// A function to get the length of a polyline
async function getLength(line) {
if (!geodeticLengthOperator.isLoaded()) {
await geodeticLengthOperator.load();
}
const geodesicLength = geodeticLengthOperator.execute(line, { units: "kilometers" });
const planarLength = lengthOperator.execute(line, { units: "kilometers" });
measurementsDiv.innerHTML =
"<b>Geodesic length</b>: " +
geodesicLength.toFixed(2) +
" km" +
" | <b>Planar length</b>: " +
planarLength.toFixed(2) +
" km";
}
// A function to get the measurements of a geometry
function getMeasurements(geometry) {
switch (geometry.type) {
case "polygon":
getArea(geometry);
break;
case "polyline":
getLength(geometry);
break;
default:
console.log("No value found");
}
}
To show the user how to interact with the application, create a polygon and display its area when the app starts.
Create a new Polygon. Set the the wkid in the spatialReference property to 3857 (Web Mercator). To style the graphic, create a SimpleFillSymbol.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// Create a polygon geometry
const polygon = new Polygon({
spatialReference: {
wkid: 3857,
},
rings: [
[
[-4508069.082189632, 3599936.936171892],
[-4508069.082189632, 5478453.343307884],
[-2629552.6750536393, 5478453.343307884],
[-2629552.6750536393, 3599936.936171892],
[-4508069.082189632, 3599936.936171892],
],
],
});
// Create a simple fill symbol
const simpleFillSymbol = new SimpleFillSymbol({
outline: {
color: [200, 0, 0],
width: 2,
},
});
Create an instance of the Graphic class. Set the geometry and symbol property values to the polygon and simpleFillSymbol.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// Create a polygon geometry
const polygon = new Polygon({
spatialReference: {
wkid: 3857,
},
rings: [
[
[-4508069.082189632, 3599936.936171892],
[-4508069.082189632, 5478453.343307884],
[-2629552.6750536393, 5478453.343307884],
[-2629552.6750536393, 3599936.936171892],
[-4508069.082189632, 3599936.936171892],
],
],
});
// Create a simple fill symbol
const simpleFillSymbol = new SimpleFillSymbol({
outline: {
color: [200, 0, 0],
width: 2,
},
});
// Create a polygon graphic
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
Add event listeners to the Sketch component to listen for when the user adds a polygon graphic to the map. Create another event listener to calculate the length and area of the graphic when it's updated.
Add an event listener to the sketch component to wait for it to be ready, then add the polygon graphic to the component's graphics layer. Call the component's triggerUpdate method on the polygonGraphic and call the getArea function based on the geometry of the polygonGraphic.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// Add the polygon graphic to the arcgis-sketch layer when the arcgis-sketch is ready
// and update the the measurementsDiv with the area of the polygon
arcgisSketch?.addEventListener("arcgisReady", () => {
arcgisSketch?.layer.add(polygonGraphic);
arcgisSketch.triggerUpdate(polygonGraphic);
getArea(polygonGraphic.geometry);
});
Create an event listener on the sketch component that listens to the arcgisUpdate event. This event is emitted when you create, resize, or move a graphic. Save the geometry of the first graphic from the event.detail.graphics collection as a constant.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// Add the polygon graphic to the arcgis-sketch layer when the arcgis-sketch is ready
// and update the the measurementsDiv with the area of the polygon
arcgisSketch?.addEventListener("arcgisReady", () => {
arcgisSketch?.layer.add(polygonGraphic);
arcgisSketch.triggerUpdate(polygonGraphic);
getArea(polygonGraphic.geometry);
});
// Listen for the arcgisUpdate event and update the measurementsDiv
// based on the new geometry
arcgisSketch?.addEventListener("arcgisUpdate", (event) => {
const geometry = event.detail.graphics[0].geometry;
});
Create conditional statements based on whether the sketch event's state is: start, complete, or in a state of change. Except for complete, each state calls the getMeasurements function with the geometry as its parameter. When the event is complete, remove the graphic from the sketch component's layer and clear the innerHTML.
Expand
Use dark colors for code blocks1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// Listen for the arcgisUpdate event and update the measurementsDiv
// based on the new geometry
arcgisSketch?.addEventListener("arcgisUpdate", (event) => {
const geometry = event.detail.graphics[0].geometry;
if (event.detail.state === "start") {
getMeasurements(geometry);
}
if (event.detail.state === "complete") {
arcgisSketch.layer.remove(arcgisSketch.layer.graphics.getItemAt(0));
measurementsDiv.innerHTML = "";
}
if (
event.detail.toolEventInfo &&
(event.detail.toolEventInfo.type === "scale-stop" ||
event.detail.toolEventInfo.type === "reshape-stop" ||
event.detail.toolEventInfo.type === "move-stop")
) {
getMeasurements(geometry);
}
});
In CodePen, run your code to display the map.
When you run the app, you will see a polygon with its calculated geodesic and planar area. You can use the sketch component to draw other geometries and display their measurements. If you move the geometry, the geodesic measurements will change but the planar measurements will not.
What's next?Learn how to use additional API features and ArcGIS services in these tutorials:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4