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.