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.
Use case
Grids are often used on printed maps, but can also be helpful on digital maps, to identify locations on a map.
How to use the sample
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.
How it works
- Create an instance of one of the
Gridtypes. - Grid lines and labels can be styled per grid level with
setLineSymbol(gridLevel, lineSymbol)andsetTextSymbol(gridLevel, textSymbol)methods on the grid. - The label position can be set with
setLabelPosition(labelPosition)method on the grid. - For the
LatitudeLongitudeGridtype, you can specify a label format ofDecimalDegreesorDegreesMinutesSeconds. - To set the grid, use the
setGrid(grid)method on the map view.
Relevant API
- Grid
- LatitudeLongitudeGrid
- MapView
- MGRSGrid
- SimpleLineSymbol
- TextSymbol
- USNGGrid
- UTMGrid
Tags
coordinates, degrees, graticule, grid, latitude, longitude, MGRS, minutes, seconds, USNG, UTM
Sample Code
<UserControl
x:Class="ArcGIS.UWP.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:esriUI="using:Esri.ArcGISRuntime.UI.Controls"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="ComboBox">
<Setter Property="Margin" Value="5" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Margin" Value="0,5,5,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</UserControl.Resources>
<Grid>
<esriUI:MapView x:Name="MyMapView" />
<Border
Background="White"
BorderBrush="Black" BorderThickness="1"
HorizontalAlignment="Right" VerticalAlignment="Top"
Margin="30" Padding="20" Width="450">
<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>
<!-- TextBlocks -->
<TextBlock Text="Grid type"
Grid.Row="0" />
<TextBlock Text="Show labels"
Grid.Row="1" />
<TextBlock Text="Show grid"
Grid.Row="2" />
<TextBlock Text="Grid color"
Grid.Row="3" />
<TextBlock Text="Label color"
Grid.Row="4" />
<TextBlock Text="Halo color"
Grid.Row="5" />
<TextBlock Text="Label position"
Grid.Row="6" />
<TextBlock Text="Label format"
Grid.Row="7" />
<!-- Inputs -->
<ComboBox x:Name="gridTypeCombo"
Grid.Row="0" Grid.Column="1" />
<CheckBox x:Name="labelVisibilityCheckbox"
Margin="5,0,0,0" IsChecked="True"
Grid.Row="1" Grid.Column="1" />
<CheckBox x:Name="gridVisibilityCheckbox"
Margin="5,0,0,0" IsChecked="True"
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"
Content="Apply settings"
Grid.ColumnSpan="2" Grid.Row="8"
IsEnabled="False" />
</Grid>
</Border>
</Grid>
</UserControl>