XAML-Map-Control/SampleApps/UniversalApp/MainPage.xaml

<Page x:Class="SampleApplication.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:map="using:MapControl"
      xmlns:tools="using:MapControl.UiTools"
      xmlns:local="using:SampleApplication">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <DataTemplate x:Key="PolylineItemTemplate">
                <map:MapPolyline Locations="{Binding Locations}" Stroke="Red" StrokeThickness="3"/>
            </DataTemplate>

            <Style x:Key="PointItemStyle" TargetType="map:MapItem">
                <Setter Property="AutoCollapse" Value="True"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="map:MapItem">
                            <map:CanvasPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver"/>
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="selectedPath"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0.75" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="selectedPath"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0.75" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="selectedPath"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0.75" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="selectedPath"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0.75" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <!-- Path with transformed Geometry -->
                                <Path Fill="Red" Opacity="0.4" IsHitTestVisible="False">
                                    <Path.Data>
                                        <EllipseGeometry RadiusX="20" RadiusY="20"
                                                         Transform="{Binding MapTransform, RelativeSource={RelativeSource TemplatedParent}}"/>
                                    </Path.Data>
                                </Path>
                                <!-- MapPath with Location, requires CanvasPanel parent to avoid clipping -->
                                <map:MapPath Stroke="Green" StrokeThickness="2" IsHitTestVisible="False"
                                             Location="{TemplateBinding Location}">
                                    <map:MapPath.Data>
                                        <EllipseGeometry RadiusX="20" RadiusY="20"/>
                                    </map:MapPath.Data>
                                </map:MapPath>
                                <Path x:Name="selectedPath" Fill="White" Opacity="0">
                                    <Path.Data>
                                        <EllipseGeometry RadiusX="12" RadiusY="12"/>
                                    </Path.Data>
                                </Path>
                                <Path Fill="Transparent" Stroke="Gray" StrokeThickness="2">
                                    <Path.Data>
                                        <EllipseGeometry RadiusX="8" RadiusY="8"/>
                                    </Path.Data>
                                </Path>
                                <Grid Canvas.Left="15" Canvas.Top="-8">
                                    <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                                </Grid>
                            </map:CanvasPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="PushpinItemStyle" TargetType="map:MapItem">
                <Setter Property="AutoCollapse" Value="True"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="map:MapItem">
                            <map:Pushpin Content="{Binding Name}"
                                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <Grid.DataContext>
            <local:MapViewModel/>
        </Grid.DataContext>

        <map:Map x:Name="map" ManipulationMode="All"
                 MinZoomLevel="2" MaxZoomLevel="21" ZoomLevel="11"
                 PointerPressed="MapPointerPressed"
                 PointerReleased="MapPointerReleased"
                 PointerMoved="MapPointerMoved"
                 PointerExited="MapPointerExited">
            <map:Map.Center>
                <map:Location Latitude="53.5" Longitude="8.2"/>
            </map:Map.Center>

            <map:MapPolyline x:Name="measurementLine" Visibility="Collapsed"
                             Stroke="{Binding Foreground, ElementName=map}"
                             StrokeThickness="2" StrokeDashArray="1,1"/>

            <map:MapItemsControl ItemsSource="{Binding Polylines}"
                                 ItemTemplate="{StaticResource PolylineItemTemplate}"/>

            <map:MapItemsControl ItemsSource="{Binding Points}"
                                 ItemContainerStyle="{StaticResource PointItemStyle}"
                                 LocationMemberPath="Location"
                                 SelectionMode="Extended"/>

            <map:MapItemsControl ItemsSource="{Binding Pushpins}"
                                 ItemContainerStyle="{StaticResource PushpinItemStyle}"
                                 LocationMemberPath="Location"/>

            <map:Pushpin AutoCollapse="True" Content="N 53°30' E 8°12'">
                <map:Pushpin.Location>
                    <map:Location Latitude="53.5" Longitude="8.2"/>
                </map:Pushpin.Location>
            </map:Pushpin>
        </map:Map>

        <Border HorizontalAlignment="Center" VerticalAlignment="Top" Margin="4" IsHitTestVisible="False">
            <Border.Background>
                <SolidColorBrush Color="{Binding Background.Color, ElementName=map}" Opacity="0.5"/>
            </Border.Background>
            <TextBlock x:Name="mouseLocation" Foreground="{Binding Foreground, ElementName=map}"
                       FontFamily="Consolas" Margin="4,2" Visibility="Collapsed"/>
        </Border>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="#AFFFFFFF"
                    DataContext="{Binding MapLayer, ElementName=map}">
            <ProgressBar Width="100" Height="8" Margin="4,2" VerticalAlignment="Center"
                         Maximum="1" Value="{Binding LoadingProgress}">
                <ProgressBar.IsIndeterminate>
                    <Binding Path="Value" RelativeSource="{RelativeSource Self}">
                        <Binding.Converter>
                            <local:DoubleTriggerConverter Trigger="0" TriggerValue="true" DefaultValue="false"/>
                        </Binding.Converter>
                    </Binding>
                </ProgressBar.IsIndeterminate>
                <ProgressBar.Visibility>
                    <Binding Path="Value" RelativeSource="{RelativeSource Self}">
                        <Binding.Converter>
                            <local:DoubleTriggerConverter Trigger="1" TriggerValue="Collapsed" DefaultValue="Visible"/>
                        </Binding.Converter>
                    </Binding>
                </ProgressBar.Visibility>
            </ProgressBar>

            <TextBlock Margin="4,2" FontSize="10" local:HyperlinkText.InlinesSource="{Binding Description}"/>
        </StackPanel>

        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6" Background="#7FFFFFFF">
            <tools:MapLayersMenuButton x:Name="mapLayersMenuButton"
                Margin="2" Padding="8" ToolTipService.ToolTip="Map Layers and Overlays"
                Map="{Binding ElementName=map}">
                <tools:MapLayerItem Text="OpenStreetMap">
                    <map:MapTileLayer
                        SourceName="OpenStreetMap"
                        Description="© [OpenStreetMap contributors](http://www.openstreetmap.org/copyright)">
                        <map:MapTileLayer.TileSource>
                            <map:TileSource UriTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"/>
                        </map:MapTileLayer.TileSource>
                    </map:MapTileLayer>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="OpenStreetMap German">
                    <map:MapTileLayer
                        SourceName="OpenStreetMap German"
                        Description="© [OpenStreetMap contributors](http://www.openstreetmap.org/copyright)">
                        <map:MapTileLayer.TileSource>
                            <map:TileSource UriTemplate="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png"/>
                        </map:MapTileLayer.TileSource>
                    </map:MapTileLayer>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="OpenStreetMap French">
                    <map:MapTileLayer
                        SourceName="OpenStreetMap French"
                        Description="© [OpenStreetMap France](https://www.openstreetmap.fr/mentions-legales/) © [OpenStreetMap contributors](http://www.openstreetmap.org/copyright)">
                        <map:MapTileLayer.TileSource>
                            <map:TileSource UriTemplate="http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"/>
                        </map:MapTileLayer.TileSource>
                    </map:MapTileLayer>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="OpenTopoMap">
                    <map:MapTileLayer
                        SourceName="OpenTopoMap"
                        Description="© [OpenTopoMap](https://opentopomap.org/) © [OpenStreetMap contributors](http://www.openstreetmap.org/copyright)">
                        <map:MapTileLayer.TileSource>
                            <map:TileSource UriTemplate="https://tile.opentopomap.org/{z}/{x}/{y}.png"/>
                        </map:MapTileLayer.TileSource>
                    </map:MapTileLayer>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="TopPlusOpen WMTS">
                    <map:WmtsTileLayer
                        SourceName="TopPlusOpen"
                        Description="© [BKG](https://gdz.bkg.bund.de/index.php/default/webdienste/topplus-produkte/wmts-topplusopen-wmts-topplus-open.html)"
                        CapabilitiesUri="https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml"/>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="TopPlusOpen WMS">
                    <map:WmsImageLayer
                        Description="© [BKG](https://gdz.bkg.bund.de/index.php/default/webdienste/topplus-produkte/wms-topplusopen-mit-layer-fur-normalausgabe-und-druck-wms-topplus-open.html)"
                        ServiceUri="https://sgx.geodatenzentrum.de/wms_topplus_open"/>
                </tools:MapLayerItem>
                <tools:MapLayerItem Text="OpenStreetMap WMS">
                    <map:WmsImageLayer
                        Description="© [terrestris GmbH &amp; Co. KG](http://ows.terrestris.de/) © [OpenStreetMap contributors](http://www.openstreetmap.org/copyright)"
                        ServiceUri="http://ows.terrestris.de/osm/service"/>
                </tools:MapLayerItem>
                <tools:MapLayersMenuButton.MapOverlays>
                    <tools:MapLayerItem Text="Graticule">
                        <map:MapGraticule Opacity="0.7"/>
                    </tools:MapLayerItem>
                    <tools:MapLayerItem Text="Scale">
                        <map:MapScale HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                    </tools:MapLayerItem>
                    <tools:MapLayerItem Text="Seamarks">
                        <map:MapTileLayer SourceName="Seamarks" MinZoomLevel="9" MaxZoomLevel="18">
                            <map:MapTileLayer.TileSource>
                                <map:TileSource UriTemplate="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"/>
                            </map:MapTileLayer.TileSource>
                        </map:MapTileLayer>
                    </tools:MapLayerItem>
                    <tools:MapLayerItem Text="Sample Image">
                        <Image Source="10_535_330.jpg" Stretch="Fill">
                            <map:MapPanel.BoundingBox>
                                <map:BoundingBox South="53.54031" West="8.08594" North="53.74871" East="8.43750"/>
                            </map:MapPanel.BoundingBox>
                        </Image>
                    </tools:MapLayerItem>
                    <tools:MapLayerItem Text="Mount Etna KML">
                        <map:GroundOverlay SourcePath="etna.kml"/>
                    </tools:MapLayerItem>
                </tools:MapLayersMenuButton.MapOverlays>
            </tools:MapLayersMenuButton>

            <tools:MapProjectionsMenuButton
                x:Name="mapProjectionsMenuButton"
                Margin="2" Padding="8" ToolTipService.ToolTip="Map Projections"
                Map="{Binding ElementName=map}">
                <tools:MapProjectionItem Text="Web Mercator" Projection="EPSG:3857"/>
                <tools:MapProjectionItem Text="Equirectangular" Projection="EPSG:4326"/>
                <tools:MapProjectionItem Text="ETRS89 / UTM zone 32N" Projection="EPSG:25832"/>
                <tools:MapProjectionItem Text="WGS84 / Auto UTM" Projection="AUTO2:42001"/>
            </tools:MapProjectionsMenuButton>

            <Slider Orientation="Vertical" Margin="4,8" Height="100"
                    Minimum="{Binding MinZoomLevel, ElementName=map}"
                    Maximum="{Binding MaxZoomLevel, ElementName=map}"
                    Value="{Binding TargetZoomLevel, ElementName=map, Mode=TwoWay}"/>

            <Button Margin="2" Padding="8" ToolTipService.ToolTip="Reset Heading" Click="ResetHeadingButtonClick">
                <Button.Visibility>
                    <Binding Path="Heading" ElementName="map">
                        <Binding.Converter>
                            <local:DoubleTriggerConverter Trigger="0" TriggerValue="Collapsed" DefaultValue="Visible"/>
                        </Binding.Converter>
                    </Binding>
                </Button.Visibility>
                <FontIcon Glyph="&#xEBE6;"/>
            </Button>
        </StackPanel>
    </Grid>
</Page>