View in MAUI WPF WinUI UWP View on GitHub

Display and customize coordinate system grids including Latitude/Longitude, MGRS, UTM and USNG on a map view or scene view.

Image of display grid

Use case

Grids are often used on printed maps, but can also be helpful on digital 2D maps or 3D scenes, to identify locations.

How to use the sample

Use the controls to change the grid settings. You can change the view from 2D or 3D, select the type of grid from Grid Type (LatLong, MGRS, UTM, and USNG) and modify its properties like label visibility, grid line color, grid label color, label formatting, and label offset.

How it works

  1. Create an instance of one of the Grid types.
  2. Grid lines and labels can be styled per grid level with setLineSymbol(gridLevel, lineSymbol) and setTextSymbol(gridLevel, textSymbol) methods on the grid.
  3. The label position can be set with setLabelPosition(labelPosition) method on the grid.
    • Note that as of 200.6, MGRS, UTM, and USNG grids in a SceneView only support the Geographic label position.
  4. For the LatitudeLongitudeGrid type, you can specify a label format of DECIMAL_DEGREES or DEGREES_MINUTES_SECONDS.
  5. For all screen-aligned label placement strategies, you can set the labels’ offset in device-independent pixels (DIPs) from the screen edge with setLabelOffset(offset).
  6. To set the grid, use the setGrid(grid) method on the map view or scene view.

Relevant API

  • Grid
  • LatitudeLongitudeGrid
  • MapView
  • MGRSGrid
  • SceneView
  • SimpleLineSymbol
  • TextSymbol
  • USNGGrid
  • UTMGrid

Tags

coordinates, degrees, graticule, grid, latitude, longitude, MGRS, minutes, seconds, USNG, UTM

Sample Code

DisplayGrid.xaml DisplayGrid.xaml DisplayGrid.xaml.cs
<UserControl x:Class="ArcGIS.WPF.Samples.DisplayGrid.DisplayGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013">
<UserControl.Resources>
<Style TargetType="ComboBox" BasedOn="{StaticResource CalciteComboBoxStyle}">
<Setter Property="Margin" Value="5" />
</Style>
<Style TargetType="Button" BasedOn="{StaticResource CalciteButtonBaseStyle}">
<Setter Property="Margin" Value="5" />
</Style>
</UserControl.Resources>
<Grid>
<esri:MapView x:Name="MyMapView" />
<esri:SceneView x:Name="MySceneView" Visibility="Collapsed" />
<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" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<!-- Labels -->
<Label Grid.Row="0"
Grid.Column="0"
Content="GeoView" />
<Label Grid.Row="1"
Grid.Column="0"
Content="Grid type" />
<Label Grid.Row="2"
Grid.Column="0"
Content="Show grid" />
<Label Grid.Row="3"
Grid.Column="0"
Content="Show labels" />
<Label Grid.Row="4"
Grid.Column="0"
Content="Grid color" />
<Label Grid.Row="5"
Grid.Column="0"
Content="Label color" />
<Label Grid.Row="6"
Grid.Column="0"
Content="Halo color" />
<Label Grid.Row="7"
Grid.Column="0"
Content="Label position" />
<Label Grid.Row="8"
Grid.Column="0"
Content="Label format" />
<Label Grid.Row="9"
Grid.Column="0"
Content="Label offset" />
<!-- Inputs -->
<StackPanel Grid.Row="0"
Grid.Column="1"
Orientation="Horizontal">
<RadioButton x:Name="MapViewRadioButton"
Margin="5"
Content="MapView"
GroupName="GeoViewRadioButtons"
IsChecked="True" />
<RadioButton Margin="5"
Content="SceneView"
GroupName="GeoViewRadioButtons" />
</StackPanel>
<ComboBox x:Name="GridTypeCombo"
Grid.Row="1"
Grid.Column="1" />
<CheckBox x:Name="GridVisibilityCheckbox"
Grid.Row="2"
Grid.Column="1"
Margin="5"
IsChecked="True" />
<CheckBox x:Name="LabelVisibilityCheckbox"
Grid.Row="3"
Grid.Column="1"
Margin="5"
IsChecked="True" />
<ComboBox x:Name="GridColorCombo"
Grid.Row="4"
Grid.Column="1" />
<ComboBox x:Name="LabelColorCombo"
Grid.Row="5"
Grid.Column="1" />
<ComboBox x:Name="HaloColorCombo"
Grid.Row="6"
Grid.Column="1" />
<ComboBox x:Name="LabelPositionCombo"
Grid.Row="7"
Grid.Column="1" />
<ComboBox x:Name="LabelFormatCombo"
Grid.Row="8"
Grid.Column="1" />
<Slider x:Name="LabelOffsetSlider"
Grid.Row="9"
Grid.Column="1"
Maximum="150"
Minimum="0"
Value="40" />
<!-- Apply -->
<Button x:Name="ApplySettingsButton"
Grid.Row="10"
Grid.Column="0"
Grid.ColumnSpan="2"
Content="Apply settings"
IsEnabled="False" />
</Grid>
</Border>
</Grid>
</UserControl>