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 geometryEngine . 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 use the Sketch widget to draw graphics on the view and the geometryEngine to calculate both geodesic and planar lengths and areas to see the difference between the two measurements.
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 use this pen . 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 api Key
to your key, so it can be used to access basemap layer and location services.
Use dark colors for code blocks
Change line
1
2
3
4
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" // Basemap layer service
});
Set HTML Create a measurements
div
to display the results of a calculation and add some CSS styling to set the font size and margins.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
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
#viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
#measurements {
padding : 4px 8px ;
font-size : 16px ;
bottom : 15px ;
left : 50% ;
margin-right : - 50% ;
transform : translate (- 50% ,- 50% );
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.26/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.26/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/widgets/ScaleBar" ,
"esri/widgets/Sketch" ,
"esri/Graphic" ,
"esri/layers/GraphicsLayer" ,
"esri/geometry/geometryEngine" ,
], (
esriConfig,
Map ,
MapView,
) => {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" , // Basemap layer service
});
const view = new MapView({
container : "viewDiv" ,
map : map,
});
</ script >
</ head >
< body >
< div id = "viewDiv" >
< div id = "measurements" class = "esri-widget" >
Add modules In the require
statement, add the modules.
More info 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/Map"
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map
) 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. For more information on the different types of modules, visit the Introduction to Tooling guide topic.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Change line Change line Change line Change line Change line
1
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
< link rel = "stylesheet" href = "https://js.arcgis.com/4.26/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.26/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/widgets/ScaleBar" ,
"esri/widgets/Sketch" ,
"esri/Graphic" ,
"esri/layers/GraphicsLayer" ,
"esri/geometry/geometryEngine" ,
], (
esriConfig,
Map ,
MapView,
ScaleBar,
Sketch,
Graphic,
GraphicsLayer,
geometryEngine,
) => {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" , // Basemap layer service
});
const view = new MapView({
container : "viewDiv" ,
map : map,
Recenter and add a scalebar The ScaleBar widget will display a scale bar on the map. You can choose either metric or non-metric values. For example, if you specify metric
, it will show either kilometers or meters depending on the scale.
Change the center
to and zoom
levels for the view
.
Expand
Use dark colors for code blocks
Change line Change line
1
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
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 10 , 30 ],
zoom : 3 ,
});
Create a scalebar
and set the view
parameter to the view
. Specify the unit
as metric
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line.
1
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
center : [- 10 , 30 ],
zoom : 3 ,
});
const scalebar = new ScaleBar({
view : view,
unit : "metric"
});
Add the scalebar
to the bottom-right
of the view
.
Expand
Use dark colors for code blocks
Add line.
1
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
center : [- 10 , 30 ],
zoom : 3 ,
});
const scalebar = new ScaleBar({
view : view,
unit : "metric"
});
view.ui.add(scalebar, "bottom-right" );
Run the app to verify the change in the center
and zoom
level. The scalebar
should appear at the bottom of the view.
The Sketch widget provides UI that allows you to create and update graphics in the MapView .
Create a graphics Layer
to add a Graphics Layer
to the map
.
Expand
Use dark colors for code blocks
Add line. Add line.
1
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
const scalebar = new ScaleBar({
view : view,
unit : "metric"
});
view.ui.add(scalebar, "bottom-right" );
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
Create a sketch
widget. Set the layer
parameter to the graphics Layer
. Any geometry drawn using the widget will be added to the graphics Layer
. Limit the features on the widget by setting the available Create Tools
to only show polyline
, polygon
, and rectangle
options and disabling other default settings found in the visible Elements
and selection Tools
properties.
Expand
Use dark colors for code blocks
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.
1
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
const scalebar = new ScaleBar({
view : view,
unit : "metric"
});
view.ui.add(scalebar, "bottom-right" );
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const sketch = new Sketch({
layer : graphicsLayer,
view : view,
availableCreateTools : [ "polyline" , "polygon" , "rectangle" ],
creationMode : "update" ,
updateOnGraphicClick : true ,
visibleElements : {
createTools : {
point : false ,
circle : false
},
selectionTools :{
"lasso-selection" : false ,
"rectangle-selection" : false ,
},
settingsMenu : false ,
undoRedoMenu : false
}
});
Add the sketch
widget to the top-right
of the view
.
Expand
Use dark colors for code blocks
Add line.
1
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
const sketch = new Sketch({
layer : graphicsLayer,
view : view,
availableCreateTools : [ "polyline" , "polygon" , "rectangle" ],
creationMode : "update" ,
updateOnGraphicClick : true ,
visibleElements : {
createTools : {
point : false ,
circle : false
},
selectionTools :{
"lasso-selection" : false ,
"rectangle-selection" : false ,
},
settingsMenu : false ,
undoRedoMenu : false
}
});
view.ui.add(sketch, "top-right" );
Add the measurements
element to the view
to display the measurements when you draw a geometry.
Expand
Use dark colors for code blocks
Add line. Add line.
1
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
view.ui.add(sketch, "top-right" );
const measurements = document .getElementById( "measurements" );
view.ui.add(measurements, "manual" );
Run the app to verify that the widget appears in the view and that you are able to draw geometries.
Calculate length and area The geometry Engine
allows you to calculate either the planar length/area or geodesic length/area of a geometry. Because the geometries in this application are projected in Web Mercator, it is best practice to use geodesic measurements. However, to visualize the difference between geodesic and planar calculations, measure both when a geometry is drawn.
Create a get Area
function that takes a polygon
as its parameter. Call the geodesic Area()
method and the planar Area()
methods to calculate the area of the polygon in square-kilometers
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
1
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
const measurements = document .getElementById( "measurements" );
view.ui.add(measurements, "manual" );
function getArea ( polygon ) {
const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers" );
const planarArea = geometryEngine.planarArea(polygon, "square-kilometers" );
}
Append the results of the calculation to the inner HTML
of measurements
.
Expand
Use dark colors for code blocks
Add line. Add line.
1
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
function getArea ( polygon ) {
const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers" );
const planarArea = geometryEngine.planarArea(polygon, "square-kilometers" );
measurements.innerHTML =
"<b>Geodesic area</b>: " + geodesicArea.toFixed( 2 ) + " km\xB2" + " | <b>Planar area</b>: " + planarArea.toFixed( 2 ) + " km\xB2" ;
}
Create a get Length
function that takes a line
parameter. Call the geodesic Length
and planar Length
methods to calculate the length of the line
in kilometers.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
1
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
measurements.innerHTML =
"<b>Geodesic area</b>: " + geodesicArea.toFixed( 2 ) + " km\xB2" + " | <b>Planar area</b>: " + planarArea.toFixed( 2 ) + " km\xB2" ;
}
function getLength ( line ) {
const geodesicLength = geometryEngine.geodesicLength(line, "kilometers" );
const planarLength = geometryEngine.planarLength(line, "kilometers" );
}
Append the results of the geodesic length calculation to the inner HTML
of measurements
.
Expand
Use dark colors for code blocks
Add line. Add line.
1
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
function getLength ( line ) {
const geodesicLength = geometryEngine.geodesicLength(line, "kilometers" );
const planarLength = geometryEngine.planarLength(line, "kilometers" );
measurements.innerHTML =
"<b>Geodesic length</b>: " + geodesicLength.toFixed( 2 ) + " km" + " | <b>Planar length</b>: " + planarLength.toFixed( 2 ) + " km" ;
}
Create a switch
statement that will either call the get Area
function or the get Length
function depending on whether the geometry is a polygon
or a polyline
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
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
function getLength ( line ) {
const geodesicLength = geometryEngine.geodesicLength(line, "kilometers" );
const planarLength = geometryEngine.planarLength(line, "kilometers" );
measurements.innerHTML =
"<b>Geodesic length</b>: " + geodesicLength.toFixed( 2 ) + " km" + " | <b>Planar length</b>: " + planarLength.toFixed( 2 ) + " km" ;
}
function switchType ( geom ) {
switch (geom.type) {
case "polygon" :
getArea(geom);
break ;
case "polyline" :
getLength(geom);
break ;
default :
console .log( "No value found" );
}
}
Create a default graphic to measure To show the user the way in which to interact with the application, create a default polygon and display its area when the app starts.
Create a polygon
. Set the type
to polygon
and the wkid
in the spatial Reference
property to 3857
(Web Mercator). Create a simple Polygon Symbol
to style the graphic.
Expand
Use dark colors for code blocks
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. Add line. Add line. Add line.
1
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
const measurements = document .getElementById( "measurements" );
view.ui.add(measurements, "manual" );
const polygon = {
type : "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 ],
],
],
};
const simplePolygonSymbol = {
type : "simple-fill" ,
outline : {
color : [ 200 , 0 , 0 ],
width : 2 ,
},
};
Create an instance of the Graphic class. Set the geometry
and symbol
properties to the polygon
and simple Polygon Symbol
. Add the graphic to the graphics Layer
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
1
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
const measurements = document .getElementById( "measurements" );
view.ui.add(measurements, "manual" );
const polygon = {
type : "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 ],
],
],
};
const simplePolygonSymbol = {
type : "simple-fill" ,
outline : {
color : [ 200 , 0 , 0 ],
width : 2 ,
},
};
const polygonGraphic = new Graphic({
geometry : polygon,
symbol : simplePolygonSymbol
});
graphicsLayer.add(polygonGraphic);
when
the view
loads, call the update
method on the polygon Graphic
and call the get Area
function based on the geometry
of the polygon Graphic
.
Expand
Use dark colors for code blocks