Visually Located

XAML and GIS

Bind a collection of items to the Windows Phone MapControl

With every major version of Windows Phone comes a new way to work with maps. Keeping up with all of these changes has, honestly, been a hassle. Windows Phone 8.1 continues this trend with the new MapControl. It does improve from Windows Phone 8 in a lot of ways. One of those areas is that you no longer need another toolkit to perform basic map functionality. In Windows Phone 8 you needed the Windows Phone Toolkit to do things like add map elements to the map. Now this functionality is part of the core functionality.

To bind a collection of items to the new MapControl you use the MapItemsControl within the MapControl itself.

<maps:MapControl x:Name="Map" MapServiceToken="abcdef-abcdefghijklmno">
    <maps:MapItemsControl ItemsSource="{Binding Locations}">
    </maps:MapItemsControl>
</maps:MapControl>

The MapItemsControl is just a DependencyObject that has the ability to set items, through the Items and ItemsSource properties, and define what they look like with the ItemTemplate property. With the MapItemsControl ItemTemplate you can set your map icons to anything you want! Any XAML can be placed on your map!

Using an Image:

<maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="Assets/mappin.png" Height="25"/>
    </DataTemplate>
</maps:MapItemsControl.ItemTemplate>

MapPinImage

Using a Path:

<maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Path Width="28.5" Height="38" Stretch="Fill" Fill="Red" Data="F1 M 36.4167,19C 44.2867,19 50.6667,24.6711 50.6667,31.6667C 50.6667,32.7601 50.5108,33.8212 50.2177,34.8333L 36.4167,57L 22.6156,34.8333C 22.3225,33.8212 22.1667,32.7601 22.1667,31.6667C 22.1667,24.6711 28.5466,19 36.4167,19 Z M 36.4167,27.7083C 34.2305,27.7083 32.4583,29.4805 32.4583,31.6667C 32.4583,33.8528 34.2305,35.625 36.4167,35.625C 38.6028,35.625 40.375,33.8528 40.375,31.6667C 40.375,29.4805 38.6028,27.7083 36.4167,27.7083 Z "/>
    </DataTemplate>
</maps:MapItemsControl.ItemTemplate>

MapPinPath

This will put map icons on your map, but will not place them where they need to be (unlike the images I provided). To set the map location of the icons, you use the attached Location property on the MapControl.

<maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="Assets/mappin.png" Height="25"
               maps:MapControl.Location="{Binding Geopoint}" />
    </DataTemplate>
</maps:MapItemsControl.ItemTemplate>

This example assumes that the object you are binding to has a Geopoint property that returns a Geopoint. When map icons are placed, they are anchored at the top left of the icon. This works well if you use an icon that points to the top left, otherwise you will want to change it. To change the anchor point of the icon, you set the NormalizedAnchorPoint attached property on the MapControl. Set this with a Point with values between 0 and 1. Where 0,0 is the top left and 1,1 is the bottom right.

<maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="Assets/mappin.png" Height="25"
               maps:MapControl.Location="{Binding Geopoint}" 
               maps:MapControl.NormalizedAnchorPoint=".5,1" />
    </DataTemplate>
</maps:MapItemsControl.ItemTemplate>

Here is a weird bug that I swear was not there when I started working with the new maps back in May. Fellow MVP and mapping addict, Joost van Schaik, noticed that setting this value in xaml does nothing. It will always be anchored at the top left. He found that if you bind to an Anchor property then it works well.

<maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="Assets/mappin.png" Height="25"
               maps:MapControl.Location="{Binding Geopoint}" 
               maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}" />
    </DataTemplate>
</maps:MapItemsControl.ItemTemplate>

Hopes this helps get you going with the new maps in Windows Phone 8.1. You can download a sample projectsample project to test as well.

blog comments powered by Disqus