Sketch on the map

View on GitHub
Sample viewer app

Use the Sketch Editor to edit or sketch a new point, line, or polygon geometry on a map.

Image of sketch on map 1 Image of sketch on map 2

Use case

A field worker could annotate features of interest on a map (via the GUI) such as location of dwellings (marked as points), geological features (polylines), or areas of glaciation (polygons).

How to use the sample

Choose which geometry type to sketch from one of the available buttons. Choose from points, multipoints, polylines, polygons, freehand polylines, and freehand polygons.

Use the control panel to cancel the sketch, undo or redo changes made to the sketch and to save the sketch to the graphics overlay. There is also the option to select a saved graphic and edit its geometry using the Sketch Editor. The graphics overlay can be cleared using the clear all button.

How it works

  1. Create an AGSSketchEditor and set it to the map view's sketchEditor property.
  2. Use AGSSketchEditor.start(with:creationMode:) to start sketching. If editing an existing graphic's geometry, use AGSSketchEditor.start(with:).
  3. Check to see if undo and redo are possible during a sketch session with canUndo and canRedo using AGSSketchEditor.undoManager. If it's possible, use AGSSketchEditor.undoManager.undo() and AGSSketchEditor.undoManager.redo().
  4. To exit the sketch editor, use AGSSketchEditor.stop().

Relevant API

  • AGSGeometry
  • AGSGraphic
  • AGSGraphicsOverlay
  • AGSMapView
  • AGSSketchCreationMode
  • AGSSketchEditor

Tags

draw, edit

Sample Code

SketchViewController.swift
                                                                                                
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
// Copyright 2016 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.

import UIKit
import ArcGIS

class SketchViewController: UIViewController {
    @IBOutlet private weak var mapView: AGSMapView!
    @IBOutlet private weak var geometrySegmentedControl: UISegmentedControl!
    @IBOutlet private weak var undoBBI: UIBarButtonItem!
    @IBOutlet private weak var redoBBI: UIBarButtonItem!
    @IBOutlet private weak var clearBBI: UIBarButtonItem!

    private var sketchEditor: AGSSketchEditor!

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the source code button item to the right of navigation bar
        (self.navigationItem.rightBarButtonItem as! SourceCodeBarButtonItem).filenames = ["SketchViewController"]

        self.sketchEditor = AGSSketchEditor()
        self.mapView.sketchEditor = self.sketchEditor

        self.sketchEditor.start(with: nil, creationMode: .polyline)

        self.mapView.map = AGSMap(basemapStyle: .arcGISLightGrayBase)
        self.mapView.interactionOptions.isMagnifierEnabled = true

        NotificationCenter.default.addObserver(self, selector: #selector(SketchViewController.respondToGeomChanged), name: .AGSSketchEditorGeometryDidChange, object: nil)

        // set viewpoint
        self.mapView.setViewpoint(AGSViewpoint(targetExtent: AGSEnvelope(xMin: -10049589.670344, yMin: 3480099.843772, xMax: -10010071.251113, yMax: 3512023.489701, spatialReference: .webMercator())))
    }

    @objc
    func respondToGeomChanged() {
        // Enable/disable UI elements appropriately
        self.undoBBI.isEnabled = self.sketchEditor.undoManager.canUndo
        self.redoBBI.isEnabled = self.sketchEditor.undoManager.canRedo
        self.clearBBI.isEnabled = self.sketchEditor.geometry != nil && !self.sketchEditor.geometry!.isEmpty
    }

    // MARK: - Actions

    @IBAction func geometryValueChanged(_ segmentedControl: UISegmentedControl) {
        switch segmentedControl.selectedSegmentIndex {
        case 0:// point
            self.sketchEditor.start(with: nil, creationMode: .point)

        case 1:// polyline
            self.sketchEditor.start(with: nil, creationMode: .polyline)

        case 2:// freehand polyline
            self.sketchEditor.start(with: nil, creationMode: .freehandPolyline)

        case 3:// polygon
            self.sketchEditor.start(with: nil, creationMode: .polygon)

        case 4:// freehand polygon
            self.sketchEditor.start(with: nil, creationMode: .freehandPolygon)

        default:
            break
        }

        self.mapView.sketchEditor = self.sketchEditor
    }

    @IBAction func undo() {
        if self.sketchEditor.undoManager.canUndo { // extra check, just to be sure
            self.sketchEditor.undoManager.undo()
        }
    }

    @IBAction func redo() {
        if self.sketchEditor.undoManager.canRedo { // extra check, just to be sure
            self.sketchEditor.undoManager.redo()
        }
    }

    @IBAction func clear() {
        self.sketchEditor.clearGeometry()
    }
}

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