Create and edit geometries

View inMAUIUWPWPFWinUIView on GitHub

Use the Geometry Editor to create new point, multipoint, polyline, or polygon geometries or to edit existing geometries by interacting with a map view.

CreateAndEditGeometries

Use case

A field worker can mark features of interest on a map using an appropriate geometry. Features such as sample or observation locations, fences or pipelines, and building footprints can be digitized using point, multipoint, polyline, and polygon geometry types. Polyline and polygon geometries can be created and edited using a vertex-based creation and editing tool (i.e. vertex locations specified explicitly via tapping), or using a freehand tool.

How to use the sample

To create a new geometry, press the button appropriate for the geometry type you want to create (i.e. points, multipoints, polyline, or polygon) and interactively tap and drag on the map view to create the geometry. To edit an existing geometry, tap the geometry to be edited in the map to select it and then edit the geometry by tapping and dragging elements of the geometry. If creating or editing polyline or polygon geometries, choose the desired creation/editing tool (i.e. VertexTool or FreehandTool).

Use the control panel to undo or redo changes made to the geometry, delete a selected element, save the geometry, stop the editing session and discard any edits, and remove all geometries from the map.

How it works

  1. Create a GeometryEditor and set it to the MapView using MyMapView.GeometryEditor.
  2. Start the GeometryEditor using GeometryEditor.Start(GeometryType) to create a new geometry or GeometryEditor.Start(Geometry) to edit an existing geometry.
    • If using the Geometry Editor to edit an existing geometry, the geometry must be retrieved from the graphics overlay being used to visualize the geometry prior to calling the start method. To do this:
      • Use MapView.IdentifyGraphicsOverlayAsync(...) to identify graphics at the location of a tap.
      • Access the MapView.IdentifyGraphicsOverlayAsync(...).
      • Find the desired graphic in the results.FirstOrDefault() list.
      • Access the geometry associated with the Graphic using Graphic.Geometry - this will be used in the GeometryEditor.Start(Geometry) method.
  3. Create VertexTool, FreehandTool, or ShapeTool objects which define how the user interacts with the view to create or edit geometries, setting GeometryEditor.Tool.
  4. Edit a tool's InteractionConfiguration to set the GeometryEditorScaleMode to allow either uniform or stretch scale mode.
  5. Check to see if undo and redo are possible during an editing session using GeometryEditor.CanUndo and GeometryEditor.CanRedo. If it's possible, use GeometryEditor.Undo() and GeometryEditor.Redo().
  6. Check whether the currently selected GeometryEditorElement can be deleted (GeometryEditor.SelectedElement.CanDelete). If the element can be deleted, delete using GeometryEditor.DeleteSelectedElement().
  7. Call GeometryEditor.Stop() to finish the editing session and store the Graphic. The GeometryEditor does not automatically handle the visualization of a geometry output from an editing session. This must be done manually by propagating the geometry returned into a Graphic added to a GraphicsOverlay.
    • To create a new Graphic in the GraphicsOverlay:
      • Using Graphic(Geometry), create a new Graphic with the geometry returned by the GeometryEditor.Stop() method.
      • Append the Graphic to the GraphicsOverlay(i.e. GraphicsOverlay.Graphics.Add(Graphic)).
    • To update the geometry underlying an existing Graphic in the GraphicsOverlay:
      • Replace the existing Graphic's Geometry property with the geometry returned by the GeometryEditor.Stop() method.

Relevant API

  • Geometry
  • GeometryEditor
  • Graphic
  • GraphicsOverlay
  • MapView

Additional information

The sample opens with the ArcGIS Imagery basemap centered on the island of Inis Meain (Aran Islands) in Ireland. Inis Meain comprises a landscape of interlinked stone walls, roads, buildings, archaeological sites, and geological features, producing complex geometrical relationships.

Tags

draw, edit, freehand, geometry editor, sketch, vertex

Sample Code

CreateAndEditGeometries.xaml.csCreateAndEditGeometries.xaml.csCreateAndEditGeometries.xaml
Use dark colors for code blocksCopy
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
// Copyright 2023 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
// language governing permissions and limitations under the License.

using Esri.ArcGISRuntime.Data;
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using Esri.ArcGISRuntime.UI.Controls;
using Esri.ArcGISRuntime.UI.Editing;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Geometry = Esri.ArcGISRuntime.Geometry.Geometry;
using Symbol = Esri.ArcGISRuntime.Symbology.Symbol;

namespace ArcGIS.UWP.Samples.CreateAndEditGeometries
{
    [ArcGIS.Samples.Shared.Attributes.Sample(
        name: "Create and edit geometries",
        category: "Geometry",
        description: "Use the Geometry Editor to create new point, multipoint, polyline, or polygon geometries or to edit existing geometries by interacting with a map view.",
        instructions: "To create a new geometry, press the button appropriate for the geometry type you want to create (i.e. points, multipoints, polyline, or polygon) and interactively tap and drag on the map view to create the geometry. To edit an existing geometry, tap the geometry to be edited in the map to select it and then edit the geometry by tapping and dragging elements of the geometry. If creating or editing polyline or polygon geometries, choose the desired creation/editing tool (i.e. `VertexTool` or `FreehandTool`).",
        tags: new[] { "draw", "edit", "freehand", "geometry editor", "sketch", "vertex" })]
    public partial class CreateAndEditGeometries
    {
        private GeometryEditor _geometryEditor;
        private Graphic _selectedGraphic;
        private GraphicsOverlay _graphicsOverlay;

        private SimpleFillSymbol _polygonSymbol;
        private SimpleLineSymbol _polylineSymbol;
        private SimpleMarkerSymbol _pointSymbol, _multiPointSymbol;

        private Dictionary<GeometryType, Button> _geometryButtons;
        private Dictionary<string, object> _toolDictionary;

        // Json formatted strings for initial geometries.
        private readonly string _houseCoordinatesJson = @"{""x"": -1067898.59, ""y"": 6998366.62,
            ""spatialReference"": {""latestWkid"":3857, ""wkid"":102100}}";

        private readonly string _outbuildingCoordinatesJson = @"{""points"":[[-1067984.26,6998346.28],[-1067966.80,6998244.84],
            [-1067921.88,6998284.65],[-1067934.36,6998340.74],
            [-1067917.93,6998373.97],[-1067828.30,6998355.28],
            [-1067832.25,6998339.70],[-1067823.10,6998336.93],
            [-1067873.22,6998386.78],[-1067896.72,6998244.49]],
            ""spatialReference"":{""latestWkid"":3857,""wkid"":102100}}";

        private readonly string _road1CoordinatesJson = @"{""paths"":[[[-1068095.40,6998123.52],[-1068086.16,6998134.60],
            [-1068083.20,6998160.44],[-1068104.27,6998205.37],
            [-1068070.63,6998255.22],[-1068014.44,6998291.54],
            [-1067952.33,6998351.85],[-1067927.93,6998386.93],
            [-1067907.97,6998396.78],[-1067889.86,6998406.63],
            [-1067848.08,6998495.26],[-1067832.92,6998521.11]]],
            ""spatialReference"":{""latestWkid"":3857,""wkid"":102100}}";

        private readonly string _road2CoordinatesJson = @"{""paths"":[[[-1067999.28,6998061.97],[-1067994.48,6998086.59],
            [-1067964.53,6998125.37],[-1067952.70,6998215.84],
            [-1067923.13,6998347.54],[-1067903.90,6998391.86],
            [-1067895.40,6998422.02],[-1067891.70,6998460.18],
            [-1067889.49,6998483.56],[-1067880.98,6998527.26]]],
            ""spatialReference"":{""latestWkid"":3857,""wkid"":102100}}";

        private readonly string _boundaryCoordinatesJson = @"{ ""rings"": [[[-1067943.67,6998403.86],[-1067938.17,6998427.60],
            [-1067898.77,6998415.86],[-1067888.26,6998398.80],
            [-1067800.85,6998372.93],[-1067799.61,6998342.81],
            [-1067809.38,6998330.00],[-1067817.07,6998307.85],
            [-1067838.07,6998285.34],[-1067849.10,6998250.38],
            [-1067874.02,6998256.00],[-1067879.87,6998235.95],
            [-1067913.41,6998245.03],[-1067934.84,6998291.34],
            [-1067948.41,6998251.90],[-1067961.18,6998186.68],
            [-1068008.59,6998199.49],[-1068052.89,6998225.45],
            [-1068039.37,6998261.11],[-1068064.12,6998265.26],
            [-1068043.32,6998299.88],[-1068036.25,6998327.93],
            [-1068004.43,6998409.28],[-1067943.67,6998403.86]]],
            ""spatialReference"":{""latestWkid"":3857,""wkid"":102100}}";

        public CreateAndEditGeometries()
        {
            InitializeComponent();
            Initialize();
        }

        private void Initialize()
        {
            // Create a map for the map view and set an inital viewpoint.
            MyMapView.Map = new Map(BasemapStyle.ArcGISImagery)
            {
                InitialViewpoint = new Viewpoint(53.08230, -9.5920, 5000)
            };

            // Create a graphics overlay and add it to the map view.
            _graphicsOverlay = new GraphicsOverlay();
            MyMapView.GraphicsOverlays.Add(_graphicsOverlay);

            // Create a geometry editor and set it to the map view.
            _geometryEditor = new GeometryEditor();
            MyMapView.GeometryEditor = _geometryEditor;

            // Create vertex and freehand tools for the combo box.
            ToolComboBox.ItemsSource = _toolDictionary = new Dictionary<string, object>()
            {
                { "Vertex Tool", new VertexTool() },
                { "Reticle Vertex Tool", new ReticleVertexTool() },
                { "Freehand Tool", new FreehandTool() },
                { "Arrow Shape Tool", ShapeTool.Create(ShapeToolType.Arrow) },
                { "Ellipse Shape Tool", ShapeTool.Create(ShapeToolType.Ellipse) },
                { "Rectangle Shape Tool", ShapeTool.Create(ShapeToolType.Rectangle) },
                { "Triangle Shape Tool", ShapeTool.Create(ShapeToolType.Triangle) }
            };

            // Have the vertex tool selected by default.
            ToolComboBox.SelectedIndex = 0;

            // Create a dictionary to lookup which geometry type corresponds with which button.
            _geometryButtons = new Dictionary<GeometryType, Button>
            {
                { GeometryType.Point, PointButton },
                { GeometryType.Multipoint, MultipointButton },
                { GeometryType.Polyline, PolylineButton },
                { GeometryType.Polygon, PolygonButton }
            };

            CreateInitialGraphics();
        }

        #region Event handlers
        // Starts the geometry editor with the point geometry type.
        private void PointButton_Click(object sender, RoutedEventArgs e)
        {
            if (!_geometryEditor.IsStarted)
            {
                // Disable buttons to reflect that the geometry editor has started.
                DisableOtherGeometryButtons(PointButton);

                // Disable the combo box as this is always a vertex tool when creating a point.
                ToolComboBox.IsEnabled = false;

                // Disable scale checkbox since points don't scale.
                UniformScaleCheckBox.IsEnabled = false;

                _geometryEditor.Start(GeometryType.Point);
            }
        }

        // Start the geometry editor with the multipoint geometry type.
        private void MultipointButton_Click(object sender, RoutedEventArgs e)
        {
            if (!_geometryEditor.IsStarted)
            {
                // Disable buttons to reflect that the geometry editor has started.
                DisableOtherGeometryButtons(MultipointButton);

                // Disable the combo box as this is always a vertex tool when creating a point.
                ToolComboBox.IsEnabled = false;

                _geometryEditor.Start(GeometryType.Multipoint);
            }
        }

        // Start the geometry editor with the polyline geometry type.
        private void PolylineButton_Click(object sender, RoutedEventArgs e)
        {
            if (!_geometryEditor.IsStarted)
            {
                // Disable buttons to reflect that the geometry editor has started.
                DisableOtherGeometryButtons(PolylineButton);

                _geometryEditor.Start(GeometryType.Polyline);
            }
        }

        // Start the geometry editor with the polygon geometry type.
        private void PolygonButton_Click(object sender, RoutedEventArgs e)
        {
            if (!_geometryEditor.IsStarted)
            {
                // Disable buttons to reflect that the geometry editor has started.
                DisableOtherGeometryButtons(PolygonButton);

                _geometryEditor.Start(GeometryType.Polygon);
            }
        }

        // Set the geometry editor tool from the combo box.
        private void ToolComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Set the geometry editor tool based on the new selection.
            _geometryEditor.Tool = ((KeyValuePair<string, object>)ToolComboBox.SelectedItem).Value as GeometryEditorTool;

            // Account for case when vertex tool is selected and geometry editor is started with a polyline or polygon geometry type.
            // Ensure point and multipoint buttons are only enabled when the selected tool is a vertex tool.
            PointButton.IsEnabled = MultipointButton.IsEnabled = !_geometryEditor.IsStarted && _geometryEditor.Tool is VertexTool;

            // Uniform scale is not compatible with the reticle vertex tool.
            UniformScaleCheckBox.IsEnabled = !(_geometryEditor.Tool is ReticleVertexTool);
        }

        // Set the scale mode for every geometry editor tool.
        private void CheckBox_CheckedChanged(object sender, RoutedEventArgs e)
        {
            // Determine the newly selected scale mode.
            GeometryEditorScaleMode scaleMode =
                UniformScaleCheckBox.IsChecked == true ? GeometryEditorScaleMode.Uniform : GeometryEditorScaleMode.Stretch;

            // Update the scale mode for every tool.
            foreach (GeometryEditorTool tool in _toolDictionary.Values)
            {
                if (tool is FreehandTool freehandTool)
                {
                    freehandTool.Configuration.ScaleMode = scaleMode;
                }
                else if (tool is VertexTool vertexTool)
                {
                    vertexTool.Configuration.ScaleMode = scaleMode;
                }
                else if (tool is ShapeTool shapeTool)
                {
                    shapeTool.Configuration.ScaleMode = scaleMode;
                }
            }
        }

        // Undo the last change made to the geometry while editing is active.
        private void UndoButton_Click(object sender, RoutedEventArgs e)
        {
            _geometryEditor.Undo();
        }

        // Redo the last change made to the geometry while editing is active.
        private void RedoButton_Click(object sender, RoutedEventArgs e)
        {
            _geometryEditor.Redo();
        }

        // Delete the currently selected element of the geometry editor.
        private void DeleteSelectedButton_Click(object sender, RoutedEventArgs e)
        {
            _geometryEditor.DeleteSelectedElement();
        }

        // Update an existing graphic or create a new graphic.
        private void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            Geometry geometry = _geometryEditor.Stop();

            if (geometry != null)
            {
                if (_selectedGraphic != null)
                {
                    // Update the geometry of the graphic being edited and make it visible again.
                    _selectedGraphic.Geometry = geometry;
                }
                else
                {
                    // Create a new graphic based on the geometry and add it to the graphics overlay.
                    _graphicsOverlay.Graphics.Add(new Graphic(geometry, GetSymbol(geometry.GeometryType)));
                }
            }

            ResetFromEditingSession();
        }

        // Stop the geometry editor without saving the geometry stored within.
        private void DiscardButton_Click(object sender, RoutedEventArgs e)
        {
            _geometryEditor.Stop();
            ResetFromEditingSession();
        }

        // Removes all graphics from the graphics overlay.
        private void DeleteAllButton_Click(object sender, RoutedEventArgs e)
        {
            _graphicsOverlay.Graphics.Clear();
        }

        private async void MyMapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
        {
            // Return immediately when in an editing session.
            if (_geometryEditor.IsStarted) return;

            try
            {
                // Identify graphics in the graphics overlay using the mouse point.
                IReadOnlyList<IdentifyGraphicsOverlayResult> results = await MyMapView.IdentifyGraphicsOverlaysAsync(e.Position, 5, false);

                // Try to get the first graphic from the first result.
                _selectedGraphic = results.FirstOrDefault()?.Graphics?.FirstOrDefault();
            }
            catch (Exception ex)
            {
                // Report exceptions.
                await new MessageDialog(e.ToString(), "Error").ShowAsync();

                ResetFromEditingSession();
                return;
            }

            // Return since no graphic was selected.
            if (_selectedGraphic == null) return;

            _selectedGraphic.IsSelected = true;

            // Configure the UI depending on the geometry type.
            GeometryType geometryType = _selectedGraphic.Geometry.GeometryType;
            if (geometryType == GeometryType.Point)
            {
                ToolComboBox.SelectedIndex = 0;
                UniformScaleCheckBox.IsEnabled = false;
            }
            if (geometryType == GeometryType.Multipoint)
            {
                ToolComboBox.SelectedIndex = 0;
            }
            DisableOtherGeometryButtons(_geometryButtons[geometryType]);

            // Hide the selected graphic and start an editing session with a copy of it.
            _geometryEditor.Start(_selectedGraphic.Geometry);
            _selectedGraphic.IsVisible = false;
        }
        #endregion

        #region Helper methods
        private void CreateInitialGraphics()
        {
            // Create symbols for displaying new geometries.
            _pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Square, Color.OrangeRed, 10);
            _multiPointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, Color.Yellow, 5);
            _polylineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Color.Blue, 2);
            var polygonLineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Dash, Color.Black, 1);
            _polygonSymbol = new SimpleFillSymbol(SimpleFillSymbolStyle.Solid, Color.FromArgb(70, 255, 0, 0), polygonLineSymbol);

            // Create geometries from Json formatted strings.
            var houseCoordinates = (MapPoint)Geometry.FromJson(_houseCoordinatesJson);
            var outbuildingCoordinates = (Multipoint)Geometry.FromJson(_outbuildingCoordinatesJson);
            var road1Coordinates = (Polyline)Geometry.FromJson(_road1CoordinatesJson);
            var road2Coordinates = (Polyline)Geometry.FromJson(_road2CoordinatesJson);
            var boundaryCoordinates = (Polygon)Geometry.FromJson(_boundaryCoordinatesJson);

            // Add new example graphics from the geometries and symbols to the graphics overlay.
            _graphicsOverlay.Graphics.Add(new Graphic(houseCoordinates) { Symbol = _pointSymbol });
            _graphicsOverlay.Graphics.Add(new Graphic(outbuildingCoordinates) { Symbol = _multiPointSymbol });
            _graphicsOverlay.Graphics.Add(new Graphic(road1Coordinates) { Symbol = _polylineSymbol });
            _graphicsOverlay.Graphics.Add(new Graphic(road2Coordinates) { Symbol = _polylineSymbol });
            _graphicsOverlay.Graphics.Add(new Graphic(boundaryCoordinates) { Symbol = _polygonSymbol });
        }

        // Reset the UI after the editor stops.
        private void ResetFromEditingSession()
        {
            // Reset the selected graphic.
            if (_selectedGraphic != null)
            {
                _selectedGraphic.IsSelected = false;
                _selectedGraphic.IsVisible = true;
            }
            _selectedGraphic = null;

            // Point and multipoint sessions do not support the vertex tool.
            PointButton.IsEnabled = MultipointButton.IsEnabled = _geometryEditor.Tool is VertexTool || _geometryEditor.Tool is ReticleVertexTool;
            PolylineButton.IsEnabled = PolygonButton.IsEnabled = true;
            ToolComboBox.IsEnabled = true;

            UniformScaleCheckBox.IsEnabled = true;
        }

        // Return the graphic style based on geometry type.
        private Symbol GetSymbol(GeometryType geometryType)
        {
            switch (geometryType)
            {
                case GeometryType.Point:
                    return _pointSymbol;

                case GeometryType.Multipoint:
                    return _multiPointSymbol;

                case GeometryType.Polyline:
                    return _polylineSymbol;

                case GeometryType.Polygon:
                    return _polygonSymbol;
            }
            return null;
        }

        // Disable all geometry buttons besides the one that was just clicked.
        private void DisableOtherGeometryButtons(Button keepEnabled)
        {
            foreach (Button button in _geometryButtons.Values)
            {
                button.IsEnabled = button == keepEnabled;
            }
        }

        #endregion Helper methods
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.