Adding MapIcon (pushpin) to your Map in UWP (Part 1)

 

It is very easy to use map in the Universal Windows Platform but first of all you need to register at Bing Maps Portal to obtain a token. After this you can add the following XAML code to your code:

<Maps:MapControl x:Name="MyMap" Margin="0" MapServiceToken="[YOUR TOKEN HERE]" ZoomLevel="7" ZoomInteractionMode="GestureAndControl" IsTextScaleFactorEnabled="False"/>

To add MapIcon to your Map Control, use this code:

var location = new BasicGeoposition() { Latitude = 36.778259, Longitude = -119.417931 };
MapIcon icon = new MapIcon { Location = new Geopoint(location), NormalizedAnchorPoint = new Point(0.5, 0.5), ZIndex = 0, Title = "My Office" };

The above code will add the default MapIcon to your Map Control

map-icon

To show a customized icon, set the Image property of the MapIcon like this:

icon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Images/icon.png"));

And finally, add the MapIcon to the MapElements of your Map Control

MyMap.MapElements.Add(icon);
MyMap.Center = new Geopoint(location);

The result look like this:

map-icon-custom

Nice and Easy!

Watch out for part 2 of this article to learn how to add custom controls to your Map Control.

Kindly drop your comment or feedback, I’ll be glad to hear from you.

 

avatar

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 (pushpin) to your Map in UWP (Part 1)

Leave a Reply

Your email address will not be published. Required fields are marked *