Adding MapIcon (Custom) to your Map in UWP (Part 2)


 

In my previous article, I explained how you can add MapIcon to your Map Control. In this article, I will be explaining how you can add Custom XAML control as MapIcon to your Map Control.

In order to display custom XAML on your map, you will make use of the MapItemsControl. MapItemsControl holds a collection of XAML controls to be displayed on a MapControl.

So let’s start!

Let us create a user control called CustomXAMLControl to contain our custom XAML view which looks like this

custom-xaml

with the following code:

<UserControl
x:Class="CustomMessageBox.CustomXAMLControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomMessageBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="50"
d:DesignWidth="100">

<Grid>
<Path Data="M1.69014,2.53521 L1.69014,39.7185 L43.0987,39.7185 L49.6661,50.3334 L56.6192,39.7189 L98.8717,39.7189 L98.8717,0.000216 z" Fill="#FFF4F4F5" Margin="1.19,-0.5,0.627,-0.833" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>

</Grid>
</UserControl>

Next, in our MainPage.xaml we will add a MapItemsControl to our map and set the DataTemplate to contain our custom XAML

<Maps:MapControl x:Name="MyMap" Margin="0" d:LayoutOverrides="Height" MapServiceToken="[YOUR TOKEN HERE]" ZoomLevel="7" ZoomInteractionMode="GestureAndControl" IsTextScaleFactorEnabled="False">
<Maps:MapItemsControl x:Name="mapItems">
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<local:CustomXAMLControl Maps:MapControl.Location="{Binding Location}"
Width="100" Height="50" RenderTransformOrigin="0.5,0.5">
<local:CustomXAMLControl.RenderTransform>
<CompositeTransform TranslateX="{Binding Composite.TranslateX}"
TranslateY="{Binding Composite.TranslateY}"
Rotation="{Binding Composite.Rotation}"/>

</local:CustomXAMLControl.RenderTransform>
</local:CustomXAMLControl>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>

In the above code, we set the Maps:MapControl.Location attached property of  the CustomXAMLControl to a value that will be supplied during binding and we also declare the RenderTransform property to control the display on the Map

Now, we nee a class model to handle data binding for the MapItemsControl. So let’s embed a class as follows:

public class MyIcons
{
public Geopoint Location { get; set; }
public CompositeTransform Composite { get; set; }
}

and the in the MainPage.xaml.cs, let us declare a method that will return a list of MyIcons

private List<MyIcons> InitInterestPoints(BasicGeoposition location, double rotation, double tranX, double transY)
{
List<MyIcons> icons = new List<MyIcons>();
icons.Add(new MyIcons
{
Location = new Geopoint(location),
Composite = new CompositeTransform
{
TranslateX = tranX,
TranslateY = transY,
Rotation = rotation
},
});
return icons;
}

Lastly, let us initialize our MapItemsControl and set the location

var location = new BasicGeoposition() { Latitude = 36.778259, Longitude = -119.417931 };

mapItems.ItemsSource = InitInterestPoints(location, 25, -50, -25);

The final result is:

custom-xaml-icon

If you have any question or feedback, kindly drop a comment below. HAPPY CODING!