Click or drag to resize
Code Example - MapView_Overlays

Demonstrates displaying a UIElement on top of the MapView using the MapView.Overlays Property. This is useful for performing MapTip functionality.

Code Example
Map View Overlays

This section contains selected code files from a Visual Studio project that emphasize specific ArcGIS Runtime SDK (Windows Desktop) features. For example: some code examples may accomplish the bulk of the work as a configuration property in the .xaml file and hence only the .xaml file will be shown in detail below. In other code examples, the .xaml is used to define the configuration of graphical elements for the application but the application logic is performed in the code behind, hence you may see both the .xaml and .cs/.vb files shown in detail below.

XAML
<Window x:Class="MapView_Overlays.MainWindow"
        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"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="600" Width="800">

    <Grid x:Name="LayoutRoot">

        <StackPanel Orientation="Vertical">

            <!-- TextBlock to provide the instructions on how to use the sample code. It will be populated 
            with instructions in the code-behind when the application loads. -->
            <TextBlock Height="58" HorizontalAlignment="Left" Name="TextBlock1" VerticalAlignment="Top" 
                       Width="770" TextWrapping="Wrap" Margin="10,2,0,0" />

            <!-- Add a MapView Control. -->
            <esri:MapView x:Name="MapView1" WrapAround="True" Height="506" MapViewTapped="MapView1_MapViewTapped">

                <!-- Add a UIElementCollection that will display on the MapView when the user clicks on a city in the FeatureLayer (aka. a MapTip). -->
                <esri:MapView.Overlays>

                    <!-- Add an OverlayItemsControl. -->
                    <esri:OverlayItemsControl >

                        <!-- Define a Grid that will be aligned to the Right and Top of the city the user selected in the FeatureLayer. -->
                        <Grid x:Name="MyOverlay" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="3,3,0,0" >

                            <!-- Bind the text displayed in the TextBlock to the 'areaname' field in the FeatureLayer. -->
                            <TextBlock Text="{Binding [areaname]}" FontWeight="Bold"  Background="White" />

                        </Grid>

                    </esri:OverlayItemsControl>

                </esri:MapView.Overlays>

                <!-- Add a Map and set the extent (via the to the InitialViewpoint Property) area of Colorado. -->
                <esri:Map x:Name="MyMap" InitialViewpoint="-12179476,4411428,-11308504,5034661" >

                    <!-- Add a backdrop ArcGISTiledMapServiceLayer. -->
                    <esri:ArcGISTiledMapServiceLayer ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"/>
                </esri:Map>

            </esri:MapView>

        </StackPanel>

    </Grid>

</Window>

SPECIAL NOTE: The XAML displayed above comes from a C# project. If you are a VB.NET developer, you will need to modify the text for the x:Class namespace from "MapView_Overlays.MainWindow" to be just "MainWindow".

namespace MapView_Overlays
{
    public partial class MainWindow : System.Windows.Window
    {

        // Define a global variable for the FeatureLayer in the Map.
        private Esri.ArcGISRuntime.Layers.FeatureLayer _FeatureLayer;

        public MainWindow()
        {
            InitializeComponent();

            // Provide instructions on how to use the sample. 
            TextBlock1.Text = "Tap on the Map over a city and its name will appear as an Overlay (aka. MapTip). The Overlay is a UIElement that will be slightly offset (Right " + 
                              "and Above) from the location of the city that is selected. The tap can come from a MouseClick or finger/pen tap on a touch screen device.";

            // Define the Uri to the ArcGIS Server web service that hosts a FeatureLayer.
            System.Uri myUri = new System.Uri("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");

            // Create a new FeatureLayer from the Uri and provide an ID for it.
            _FeatureLayer = new Esri.ArcGISRuntime.Layers.FeatureLayer(myUri);
            _FeatureLayer.ID = "Colorado";

            // Get the ServiceFeatureTable from the FeatureLayer and make sure that all attribute fields can be returned from a query. 
            Esri.ArcGISRuntime.Data.ServiceFeatureTable myServiceFeatureTable = (Esri.ArcGISRuntime.Data.ServiceFeatureTable)_FeatureLayer.FeatureTable;
            myServiceFeatureTable.OutFields = Esri.ArcGISRuntime.Tasks.Query.OutFields.All;

            // Restrict the features (i.e. cities) returned to be only those in Colorado.
            myServiceFeatureTable.Where = "st='CO'";

            // Add the FeatureLayer to the LayerCollection of the Map.
            MapView1.Map.Layers.Add(_FeatureLayer);
        }

        private async void MapView1_MapViewTapped(object sender, Esri.ArcGISRuntime.Controls.MapViewInputEventArgs e)
        {
            // Each time the user taps on the MapView, reset the user experience to see the MapTip; meaning clear the selected feature and do not display any Overlay UIElement.
            Esri.ArcGISRuntime.Controls.MapView.SetViewOverlayAnchor(MyOverlay, null);
            _FeatureLayer.ClearSelection();

            // Get any FeatureLayer ID values using the HitTestAsync Method.
            long[] myFeatureLayerRowIDs = await _FeatureLayer.HitTestAsync(MapView1, e.Position); //e.Position is in Windows device screen points.

            // Only display a MapView.Overlay if we selected exactly one feature.
            if (myFeatureLayerRowIDs.Length == 1)
            {

                // Select the feature; meaning it will highlight in the Map.
                _FeatureLayer.SelectFeatures(myFeatureLayerRowIDs);

                // Get the ServiceFeatureTable from the FeatureLayer.
                Esri.ArcGISRuntime.Data.ServiceFeatureTable myServiceFeatureTable = (Esri.ArcGISRuntime.Data.ServiceFeatureTable)_FeatureLayer.FeatureTable;

                // Perform a query on the ServiceFeatureTable to get an IEnumerable of GeodatabaseFeatures.
                System.Collections.Generic.IEnumerable<Esri.ArcGISRuntime.Data.GeodatabaseFeature> myGeoDatabaseFeature = (System.Collections.Generic.IEnumerable<Esri.ArcGISRuntime.Data.GeodatabaseFeature>)await myServiceFeatureTable.QueryAsync(myFeatureLayerRowIDs);

                // Loop through the GeodatabaseFeatures in the collection. NOTE: we should only have one.
                foreach (Esri.ArcGISRuntime.Data.GeodatabaseFeature oneGeoDatabaseFeature in myGeoDatabaseFeature)
                {

                    // Set the UIElement's DataContext to the Dictionary of attribute values. Only the attribute 'areaname' define in XAML will display as an Overlay (aka. MapTip). 
                    MyOverlay.DataContext = oneGeoDatabaseFeature.Attributes;

                    // Use the MapView.SetMapOverlayAnchor static/shared Method to set the UIElement on the MapView at the exact position where the city is located.
                    Esri.ArcGISRuntime.Controls.MapView.SetViewOverlayAnchor(MyOverlay, (Esri.ArcGISRuntime.Geometry.MapPoint)oneGeoDatabaseFeature.Geometry);
                }

            }

        }

    }
}