Build a legend for all the operational layers in the map.
Use case
Legends are used to describe what each symbol on a map represents. A common format is to show an image of the symbol alongside of a text description of what that symbol represents. This sample demonstrates how a simple legend can be built up in code using the LayerContent interface.
How to use the sample
Open the sample
Flick through the legend control to see the various elements that represent features on the map.
How it works
Layers implement the LayerContent interface, which contain a list of LegendInfo. LegendInfo contains a Symbol and a name string. Layer.autoFetchLegendInfos must be called on each Layer instance to fetch the info from the data.
All of the resulting LegendInfo objects are passed into the LegendInfoListModel.
A QML ListView directly consumes this model, and separates each item by using a section.
Relevant API
Layer.autoFetchLegendInfos
LayerContent
LegendInfo
LegendInfoListModel
Tags
legend, legend info, symbol swatch, toolkit
Sample Code
BuildLegend.qml
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
// [WriteFile Name=BuildLegend, Category=DisplayInformation]// [Legal]// 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.// [Legal]import QtQuick
import QtQuick.Controls
import Esri.ArcGISRuntime
Rectangle {
width: 800height: 600// Create the MapViewMapView {
anchors.fill: parentComponent.onCompleted: {
// Set the focus on MapView to initially enable keyboard navigation forceActiveFocus();
}
// Nest the Map as a child of the MapViewMap {
id: map// automatically fetch the legend infos for all operational layersautoFetchLegendInfos: true// Nest the Basemap to add it as the Map's BasemapBasemap {
initStyle: Enums.BasemapStyleArcGISTopographic
}
// Add a map image layer as an operational layerArcGISMapImageLayer {
id: mapImageLayerurl: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer" }
// Add a feature layer as an operational layerFeatureLayer {
id: featureLayerfeatureTable: ServiceFeatureTable {
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/FeatureServer/0" }
}
// Set the initial viewpointinitialViewpoint: ViewpointCenter {
center: Point {
x: -11e6y: 6e6spatialReference: SpatialReference {wkid: 102100}
}
targetScale: 9e7 }
}
}
// Create outter rectangle for the legendRectangle {
id: legendRectanchors {
margins: 10left: parent.left
top: parent.top
}
property bool expanded: trueheight: 200width: 175color: "lightgrey"opacity: 0.95radius: 10clip: trueborder {
color: "darkgrey"width: 1 }
// Animate the expand and collapse of the legendBehavioronheight {
SpringAnimation {
spring: 3damping: .4 }
}
// Catch mouse signals so they don't propagate to the mapMouseArea {
anchors.fill: parentonClicked: mouse => mouse.accepted = trueonWheel: wheel => wheel.accepted = true }
// Create UI for the user to select the layer to displayColumn {
anchors {
fill: parentmargins: 10 }
spacing: 2Row {
spacing: 55Text {
text: qsTr("Legend")
font {
pixelSize: 18bold: true }
}
// Legend icon to allow expanding and collapsingImage {
source: legendRect.expanded ? "qrc:/Samples/DisplayInformation/BuildLegend/ic_menu_legendpopover_light_d.png" : "qrc:/Samples/DisplayInformation/BuildLegend/ic_menu_legendpopover_light.png"width: 28height: width
MouseArea {
anchors.fill: parentonClicked: {
if (legendRect.expanded) {
legendRect.height = 40;
legendRect.expanded = false;
} else {
legendRect.height = 200;
legendRect.expanded = true;
}
}
}
}
}
// Create a list view to display the legendListView {
id: legendListViewanchors.margins: 10width: 165height: 150clip: truemodel: map.legendInfos
// Create delegate to display the name with an imagedelegate: Item {
width: parent ? parent.width : 0height: 35clip: trueRow {
spacing: 5anchors.verticalCenter: parent.verticalCenter
Image {
anchors.verticalCenter: parent.verticalCenter
width: 24height: width
source: symbolUrl
}
Text {
anchors.verticalCenter: parent.verticalCenter
width: 125text: name
wrapMode: Text.WordWrap
font.pixelSize: 12 }
}
}
section {
property: "layerName"criteria: ViewSection.FullString
labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels
delegate: Rectangle {
width: 180height: childrenRect.height
color: "lightsteelblue"Text {
text: section
font.bold: truefont.pixelSize: 13 }
}
}
}
}
}
}