Add graphics with renderer

View on GitHub
Sample viewer app

A renderer allows you to change the style of all graphics in a graphics overlay by referencing a single symbol style. A renderer will only effect graphics that do not specify their own symbol style.

Image of add graphics with renderer

Use case

A renderer allows you to change the style of all graphics in an overlay by only changing one copy of the symbol. For example, a user may wish to display a number of graphics on a map of parkland which represent trees, all sharing a common symbol.

How to use the sample

Run the sample and view graphics for points, lines, and polygons, which are stylized using renderers.

How it works

  • Create an AGSGraphicsOverlay and add it to the AGSMapView.
  • Create an AGSGraphic, specifying only an AGSGeometry.
  • Create a single AGSSymbol such as an AGSSimpleMarkerSymbol.
  • Create a renderer with AGSSimpleRenderer(symbol:), passing in an AGSSymbol.
  • Set the renderer for the AGSGraphicsOverlay.

Relevant API

  • AGSGeometry
  • AGSGraphic
  • AGSGraphicsOverlay
  • AGSSimpleFillSymbol
  • AGSSimpleLineSymbol
  • AGSSimpleMarkerSymbol
  • AGSSimpleRenderer

Additional information

To set unique symbols across a number of graphics (e.g. showing graphics of individual landmarks), see "Add graphics with symbols" sample.

Tags

display, graphics, marker, overlay, renderer, symbol

Sample Code

GORenderersViewController.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
97
// 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 GORenderersViewController: UIViewController {
    @IBOutlet private weak var mapView: AGSMapView!

    private var map: AGSMap!

    override func viewDidLoad() {
        super.viewDidLoad()

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

        // initialize map with topographic basemap
        self.map = AGSMap(basemapStyle: .arcGISTopographic)

        // add the graphics overaly, with graphics added, to map view
        self.addGraphicsOverlay()

        // assign map to the map view's map
        self.mapView.map = self.map
    }

    func addGraphicsOverlay() {
        // point graphic
        let pointGeometry = AGSPoint(x: 40e5, y: 40e5, spatialReference: .webMercator())
        let pointSymbol = AGSSimpleMarkerSymbol(style: AGSSimpleMarkerSymbolStyle.diamond, color: .red, size: 10)
        let pointGraphic = AGSGraphic(geometry: pointGeometry, symbol: nil, attributes: nil)

        // create graphics overlay for point
        let pointGraphicOverlay = AGSGraphicsOverlay()

        // renderer
        pointGraphicOverlay.renderer = AGSSimpleRenderer(symbol: pointSymbol)

        // add the graphic to the overlay
        pointGraphicOverlay.graphics.add(pointGraphic)

        // add the overlay to the map view
        self.mapView.graphicsOverlays.add(pointGraphicOverlay)

        // line graphic
        let lineGeometry = AGSPolylineBuilder(spatialReference: .webMercator())
        lineGeometry.addPointWith(x: -10e5, y: 40e5)
        lineGeometry.addPointWith(x: 20e5, y: 50e5)
        let lineSymbol = AGSSimpleLineSymbol(style: AGSSimpleLineSymbolStyle.solid, color: .blue, width: 5)
        let lineGraphic = AGSGraphic(geometry: lineGeometry.toGeometry(), symbol: nil, attributes: nil)

        // create graphics overlay for polyline
        let lineGraphicOverlay = AGSGraphicsOverlay()

        // renderer
        lineGraphicOverlay.renderer = AGSSimpleRenderer(symbol: lineSymbol)

        // add the graphic to the overlay
        lineGraphicOverlay.graphics.add(lineGraphic)

        // add the overlay to the map view
        self.mapView.graphicsOverlays.add(lineGraphicOverlay)

        // polygon graphic
        let polygonGeometry = AGSPolygonBuilder(spatialReference: .webMercator())
        polygonGeometry.addPointWith(x: -20e5, y: 20e5)
        polygonGeometry.addPointWith(x: 20e5, y: 20e5)
        polygonGeometry.addPointWith(x: 20e5, y: -20e5)
        polygonGeometry.addPointWith(x: -20e5, y: -20e5)
        let polygonSymbol = AGSSimpleFillSymbol(style: AGSSimpleFillSymbolStyle.solid, color: .yellow, outline: nil)
        let polygonGraphic = AGSGraphic(geometry: polygonGeometry.toGeometry(), symbol: nil, attributes: nil)

        // create graphics overlay for polygon
        let polygonGraphicOverlay = AGSGraphicsOverlay()

        // renderer
        polygonGraphicOverlay.renderer = AGSSimpleRenderer(symbol: polygonSymbol)

        // add the graphic to the overlay
        polygonGraphicOverlay.graphics.add(polygonGraphic)

        // add the overlay to the map view
        self.mapView.graphicsOverlays.add(polygonGraphicOverlay)
    }
}

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