View in WPF UWP Forms iOS Android View on GitHub
Sample viewer app
Display coordinate system grids including Latitude/Longitude, MGRS, UTM and USNG on a map view. Also, toggle label visibility and change the color of grid lines and grid labels.
Grids are often used on printed maps, but can also be helpful on digital maps, to identify locations on a map.
Select type of grid from the types (LatLong, MGRS, UTM and USNG) and modify its properties like label visibility, grid line color, and grid label color. Press the button to apply these settings.
Create an instance of one of the Grid types.
Grid lines and labels can be styled per grid level with setLineSymbol(gridLevel, lineSymbol) and setTextSymbol(gridLevel, textSymbol) methods on the grid.
The label position can be set with setLabelPosition(labelPosition) method on the grid.
For the LatitudeLongitudeGrid type, you can specify a label format of DecimalDegrees or DegreesMinutesSeconds.
To set the grid, use the setGrid(grid) method on the map view.
Grid
LatitudeLongitudeGrid
MapView
MGRSGrid
SimpleLineSymbol
TextSymbol
USNGGrid
UTMGrid
coordinates, degrees, graticule, grid, latitude, longitude, MGRS, minutes, seconds, USNG, UTM
DisplayGrid.xaml DisplayGrid.xaml DisplayGrid.xaml.cs
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
<UserControl
x: Class = "ArcGISRuntime.WPF.Samples.DisplayGrid.DisplayGrid"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns: esri = "http://schemas.esri.com/arcgis/runtime/2013"
mc: Ignorable = "d"
d: DesignHeight = "300" d:DesignWidth= "300" >
<UserControl.Resources>
<Style TargetType = "ComboBox" >
<Setter Property = "Margin" Value= "5" />
</Style>
<Style TargetType = "Button" >
<Setter Property = "Margin" Value= "5" />
</Style>
</UserControl.Resources>
<Grid>
<esri:MapView x: Name = "MyMapView" />
<Border Style = "{StaticResource BorderStyle}" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "*" />
<ColumnDefinition Width = "2*" />
</Grid.ColumnDefinitions>
<!-- Labels -->
<Label Content = "Grid type"
Grid.Row = "0" Grid.Column= "0" />
<Label Content = "Show grid"
Grid.Row = "1" Grid.Column= "0" />
<Label Content = "Show labels"
Grid.Row = "2" Grid.Column= "0" />
<Label Content = "Grid color"
Grid.Row = "3" Grid.Column= "0" />
<Label Content = "Label color"
Grid.Row = "4" Grid.Column= "0" />
<Label Content = "Halo color"
Grid.Row = "5" Grid.Column= "0" />
<Label Content = "Label position"
Grid.Row = "6" Grid.Column= "0" />
<Label Content = "Label format"
Grid.Row = "7" Grid.Column= "0" />
<!-- Inputs -->
<ComboBox x: Name = "GridTypeCombo"
Grid.Row = "0" Grid.Column= "1" />
<CheckBox x: Name = "GridVisibilityCheckbox"
IsChecked = "True" Margin= "5"
Grid.Row = "1" Grid.Column= "1" />
<CheckBox x: Name = "LabelVisibilityCheckbox"
IsChecked = "True" Margin= "5"
Grid.Row = "2" Grid.Column= "1" />
<ComboBox x: Name = "GridColorCombo"
Grid.Row = "3" Grid.Column= "1" />
<ComboBox x: Name = "LabelColorCombo"
Grid.Row = "4" Grid.Column= "1" />
<ComboBox x: Name = "HaloColorCombo"
Grid.Row = "5" Grid.Column= "1" />
<ComboBox x: Name = "LabelPositionCombo"
Grid.Row = "6" Grid.Column= "1" />
<ComboBox x: Name = "LabelFormatCombo"
Grid.Row = "7" Grid.Column= "1" />
<!-- Apply -->
<Button x: Name = "ApplySettingsButton"
Grid.Row = "8" Grid.Column= "0" Grid.ColumnSpan= "2"
Content = "Apply settings"
IsEnabled = "False" />
</Grid>
</Border>
</Grid>
</UserControl>
