Map Overlays

Download Samples Repository

Description

This sample demonstrates how to display map overlay elements in the MapView. Here, three map overlays are included in the MapView XAML. The first is an overlay that maintains a constant X,Y anchor point on the map. The second overlay is always anchored to the center point of the current extent. The last overlay changes its anchor point when the user clicks the map.

"Desktop" "Store" "Phone" Available for Desktop, Store, Phone

Sample Code

<UserControl x:Class="ArcGISRuntime.Samples.Desktop.MapOverlays"
			 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:esri="http://schemas.esri.com/arcgis/runtime/2013">
	<Grid x:Name="layoutGrid">
		<Grid.Resources>
			<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
		</Grid.Resources>
		
		<esri:MapView x:Name="MyMapView" WrapAround="True" 
					  MapViewTapped="MyMapView_MapViewTapped">
			<esri:Map>
				<esri:ArcGISTiledMapServiceLayer
					ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
			</esri:Map>
			
			<esri:MapView.Overlays>
				<esri:OverlayItemsControl>
					<Grid x:Name="esriOverlay" esri:MapView.ViewOverlayAnchor="{Binding}" IsHitTestVisible="False" HorizontalAlignment="Right" VerticalAlignment="Top" MaxWidth="200"
						  Visibility="{Binding ElementName=chkEsri, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">

						<Grid.RowDefinitions>
							<RowDefinition Height="*" />
							<RowDefinition Height="20" />
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="20" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>

						<Grid.RenderTransform>
							<TranslateTransform x:Name="MapTipTranslate" />
						</Grid.RenderTransform>

						<Border Background="#CC000000" BorderThickness="1,1,1,0" Margin="0,0,0,-1" BorderBrush="White" Grid.ColumnSpan="2">
							<StackPanel Margin="20">
								<TextBlock Text="Esri Headquarters" FontWeight="Bold" Foreground="White" />
							</StackPanel>
						</Border>

						<Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" HorizontalAlignment="Left" Data="M0,0 L0,1 1,0" Grid.Row="1" />
						<Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" VerticalAlignment="Top" Data="M0,0 L1,0" Grid.Row="1" Grid.Column="1" />
					</Grid>

					<Border x:Name="centerOverlay" Background="Transparent" Opacity=".65" 
							HorizontalAlignment="Center" VerticalAlignment="Center" esri:MapView.ViewOverlayAnchor="{Binding}"
							Visibility="{Binding ElementName=chkCenter, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
						<StackPanel>
							<Image Source="pack://application:,,,/ArcGISRuntimeSamplesDesktop;component/Assets/RedStickPin.png" Margin="0,-40,0,0" />
							<TextBlock Foreground="White" FontSize="11">
								<TextBlock.Text>
									<MultiBinding StringFormat="{}{0:0.000}, {1:0.000}">
										<Binding Path="X" />
										<Binding Path="Y" />
									</MultiBinding>
								</TextBlock.Text>
							</TextBlock>
						</StackPanel>
					</Border>

					<Grid x:Name="clickOverlay" HorizontalAlignment="Right" VerticalAlignment="Top"
						  Background="Transparent" esri:MapView.ViewOverlayAnchor="{Binding}"
						  Visibility="{Binding ElementName=chkCoords, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">

						<Ellipse HorizontalAlignment="Left" VerticalAlignment="Bottom" Fill="Red" Height="6" Width="6" Margin="-3,0,0,-3" />

						<Grid Margin="8">
							<Grid.RowDefinitions>
								<RowDefinition />
								<RowDefinition />
								<RowDefinition />
							</Grid.RowDefinitions>
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto" />
								<ColumnDefinition Width="Auto" />
							</Grid.ColumnDefinitions>

							<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Map Coordinates" Margin="0,0,0,6" />

							<TextBlock Grid.Row="1" Grid.Column="0" Text="X" Foreground="White" FontSize="14" />
							<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding X, StringFormat={}{0:0.000}}" 
								   Foreground="White" FontSize="14" HorizontalAlignment="Center" />

							<TextBlock Grid.Row="2" Grid.Column="0" Text="Y" Foreground="White" FontSize="14" />
							<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Y, StringFormat={}{0:0.000}}" 
								   Foreground="White" FontSize="14" HorizontalAlignment="Center" />
						</Grid>
					</Grid>
				</esri:OverlayItemsControl>
			</esri:MapView.Overlays>
		</esri:MapView>

		<Border Background="White" BorderBrush="Black" BorderThickness="1"
				HorizontalAlignment="Right" VerticalAlignment="Top"
				Margin="30" Padding="20">
			<Border.Effect>
				<DropShadowEffect/>
			</Border.Effect>
			<StackPanel>
				<TextBlock Text="Check the check boxes to enable or disable the associated map overlay."
						   FontSize="14" Width="300" TextAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,12"/>

				<StackPanel HorizontalAlignment="Center">
					<CheckBox x:Name="chkEsri" Content="Show Esri Headquarters" Margin="8" IsChecked="True" />
					<CheckBox x:Name="chkCenter" Content="Show Map Center" Margin="8" IsChecked="False" />
					<CheckBox x:Name="chkCoords" Content="Show Coordinates on Click" Margin="8" IsChecked="False" />
				</StackPanel>
			</StackPanel>
		</Border>
	</Grid>
</UserControl>
using Esri.ArcGISRuntime.Controls;
using Esri.ArcGISRuntime.Geometry;
using System.Windows.Controls;

namespace ArcGISRuntime.Samples.Desktop
{
	/// <summary>
	/// This sample demonstrates how to display map overlay elements in the MapView. Here, three map overlays are included in the MapView XAML. The first is an overlay that maintains a constant X,Y anchor point on the map. The second overlay is always anchored to the center point of the current extent. The last overlay changes its anchor point when the user clicks the map.
	/// </summary>
	/// <title>Map Overlays</title>
	/// <category>Mapping</category>
	public partial class MapOverlays : UserControl
	{
		/// <summary>Construct Map Overlays sample control</summary>
		public MapOverlays()
		{
			InitializeComponent();
			
			esriOverlay.DataContext = new MapPoint(-117.19568, 34.056601, SpatialReferences.Wgs84);

			MyMapView.NavigationCompleted += MyMapView_NavigationCompleted;
		}

		void MyMapView_NavigationCompleted(object sender, System.EventArgs e)
		{
			// Get current viewpoints extent from the MapView
			var currentViewpoint = MyMapView.GetCurrentViewpoint(ViewpointType.BoundingGeometry);
			var viewpointExtent = currentViewpoint.TargetGeometry.Extent;

			var normalizedPoint = GeometryEngine.NormalizeCentralMeridian(viewpointExtent.GetCenter());
			var projectedCenter = GeometryEngine.Project(normalizedPoint, SpatialReferences.Wgs84) as MapPoint;

			if (!(clickOverlay.DataContext is MapPoint))
				clickOverlay.DataContext = projectedCenter;

			centerOverlay.DataContext = projectedCenter;
		}

		private void MyMapView_MapViewTapped(object sender, MapViewInputEventArgs e)
		{
			var normalizedPoint = GeometryEngine.NormalizeCentralMeridian(e.Location);
			var projectedCenter = GeometryEngine.Project(normalizedPoint, SpatialReferences.Wgs84) as MapPoint;
			clickOverlay.DataContext = projectedCenter;
		}
	}
}
Feedback on this topic?