Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for .NET

Display grid

This code sample is available for these platforms:
View Sample on GitHub

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.

screenshot

Use case

Grids are often used on printed maps, but can also be helpful on digital maps, to identify locations on a map.

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.
  4. For the LatitudeLongitudeGrid type, you can specify a label format of DecimalDegrees or DEGREES_MINUTES_SECONDS.
  5. To set the grid, use the setGrid(grid) method on the map view.

Relevant API

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

Tags

MapViews SceneViews and UI, graticule

Sample Code

<UserControl
    x:Class="ArcGISRuntime.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>
// Copyright 2018 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.

using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using System;
using Windows.UI.Xaml.Controls;
using Esri.ArcGISRuntime.Geometry;
using Colors = System.Drawing.Color;
using Grid = Esri.ArcGISRuntime.UI.Grid;
using Symbol = Esri.ArcGISRuntime.Symbology.Symbol;

namespace ArcGISRuntime.UWP.Samples.DisplayGrid
{
    [ArcGISRuntime.Samples.Shared.Attributes.Sample(
        "Display a grid",
        "MapView",
        "This sample demonstrates how to display and work with coordinate grid systems such as Latitude/Longitude, MGRS, UTM and USNG on a map view. This includes toggling labels visibility, changing the color of the grid lines, and changing the color of the grid labels.",
        "Choose the grid settings and then tap 'Apply settings' to see them applied.")]
    public partial class DisplayGrid
    {
        public DisplayGrid()
        {
            InitializeComponent();

            Initialize();
        }

        private void Initialize()
        {
            // Set up the map view with a basemap.
            MyMapView.Map = new Map(Basemap.CreateImageryWithLabelsVector());

            // Configure the UI options.
            gridTypeCombo.ItemsSource = new[] { "LatLong", "MGRS", "UTM", "USNG" };
            string[] colorItemsSource = { "Red", "Green", "Blue", "White", "Purple" };
            gridColorCombo.ItemsSource = colorItemsSource;
            labelColorCombo.ItemsSource = colorItemsSource;
            haloColorCombo.ItemsSource = colorItemsSource;
            labelPositionCombo.ItemsSource = Enum.GetNames(typeof(GridLabelPosition));
            labelFormatCombo.ItemsSource = Enum.GetNames(typeof(LatitudeLongitudeGridLabelFormat));
            foreach (ComboBox combo in new[] { gridTypeCombo, gridColorCombo, labelColorCombo, labelPositionCombo, labelFormatCombo })
            {
                combo.SelectedIndex = 0;
            }

            // Apply a good default halo color selection.
            haloColorCombo.SelectedIndex = 3;

            // Subscribe to grid type change events in order to disable the format change option when it doesn't apply.
            gridTypeCombo.SelectionChanged += (o, e) =>
            {
                labelFormatCombo.IsEnabled = gridTypeCombo.SelectedItem.ToString() == "LatLong";
            };

            // Subscribe to the button click event.
            applySettingsButton.Click += ApplySettingsButton_Click;

            // Enable the action button.
            applySettingsButton.IsEnabled = true;

            // Zoom to a default scale that will show the grid labels if they are enabled.
            MyMapView.SetViewpointCenterAsync(
                new MapPoint(-7702852.905619, 6217972.345771, SpatialReferences.WebMercator), 23227);

            // Apply default settings.
            ApplySettingsButton_Click(this, null);
        }

        private void ApplySettingsButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Grid grid;

            // First, update the grid based on the type selected.
            switch (gridTypeCombo.SelectedValue.ToString())
            {
                case "LatLong":
                    grid = new LatitudeLongitudeGrid();
                    // Apply the label format setting.
                    string selectedFormatString = labelFormatCombo.SelectedValue.ToString();
                    ((LatitudeLongitudeGrid)grid).LabelFormat =
                        (LatitudeLongitudeGridLabelFormat)Enum.Parse(typeof(LatitudeLongitudeGridLabelFormat), selectedFormatString);
                    break;

                case "MGRS":
                    grid = new MgrsGrid();
                    break;

                case "UTM":
                    grid = new UtmGrid();
                    break;

                case "USNG":
                default:
                    grid = new UsngGrid();
                    break;
            }

            // Next, apply the label visibility setting.
            grid.IsLabelVisible = labelVisibilityCheckbox.IsChecked.Value;

            // Next, apply the grid visibility setting.
            grid.IsVisible = gridVisibilityCheckbox.IsChecked.Value;

            // Next, apply the grid color and label color settings for each zoom level.
            for (long level = 0; level < grid.LevelCount; level++)
            {
                // Set the line symbol.
                Symbol lineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Colors.FromName(gridColorCombo.SelectedItem.ToString()), 2);
                grid.SetLineSymbol(level, lineSymbol);

                // Set the text symbol.
                Symbol textSymbol = new TextSymbol
                {
                    Color = Colors.FromName(labelColorCombo.SelectedItem.ToString()),
                    OutlineColor = Colors.FromName(haloColorCombo.SelectedItem.ToString()),
                    Size = 16,
                    HaloColor = Colors.FromName(haloColorCombo.SelectedItem.ToString()),
                    HaloWidth = 3
                };
                grid.SetTextSymbol(level, textSymbol);
            }

            // Next, apply the label position setting.
            grid.LabelPosition = (GridLabelPosition)Enum.Parse(typeof(GridLabelPosition), labelPositionCombo.SelectedValue.ToString());

            // Apply the updated grid.
            MyMapView.Grid = grid;
        }
    }
}