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


with the following code:


<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"/>


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">
<local:CustomXAMLControl Maps:MapControl.Location="{Binding Location}"
Width="100" Height="50" RenderTransformOrigin="0.5,0.5">
<CompositeTransform TranslateX="{Binding Composite.TranslateX}"
TranslateY="{Binding Composite.TranslateY}"
Rotation="{Binding Composite.Rotation}"/>


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:


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


Oludayo Alli

Oludayo Alli is the Chief Solutions Architect at DevCrux Solutions, a programmer with more than seven years experience, a tutor and a mentor. He works with Microsoft Technologies and he's a lover of Windows Phone. He loves to collaborate, so do not hesitate to contact him at oludayo[at]devcrux[dot]com

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

  • avatar
    December 7, 2016 at 4:02 pm

    I was researching content for our social media strategy and came across your fantastic blog. I just wanted to reach out and make an introduction. My name is Elizabeth Britton, and I’m a Marketing Coordinator with Syncfusion. Your blog posts reflect your great knowledge of the .NET world. Please let me know if you have any great posts you would possibly want mentioned in our social media content or if you would like to review Syncfusion products (for free) on your blog, we can certainly arrange that. Keep up the great work on your blog!

  • Pingback: Adding MapIcon to your Map in UWP | DevCrux Blog

Leave a Reply