Maps With MVVM on Windows Phone 8.1: The Complete Reference

Usually in a regular day, everyone would've loved to make a map app. I mean, it's seriously easy considering the easy drag and drop of the map control and hooking up some boilerplate code to detect my own location and what not. For starters that's okay, but when you do end up rooting for MVVM, you are bound to look for ways to make your map app work on MVVM too. This is a primer for people who love to do their stuff in MVVM and loves maps too.

 

Let's move ahead and create a new project for Windows Phone. We are using the Laurent Bugnions infamous MVVMLight Toolkit for our MVVM purposes. For those unfamiliar with that:

1. Please proceed towards your Solution Explorer.
2. And go over to the references and right-click on that to go to Manage Nuget Packages. 
3. Now you can type in "mvvmlight" in the search and when it pops up get it installed.

Now, the moment you install mvvmlight you are bound to see a folder named ViewModel popped up in your directory tree.

 

 
And it contains MainViewModel and ViewModelLocator classes. Now, as in the basic design pattern of MVVMLight suggests, ViewmodelLocator is the key to locate the possible ViewModels over the entire app. If you look into the ViewModelLocator you will see.

public class ViewModelLocator
    {
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            SimpleIoc.Default.Register<MainViewModel>();
        }

        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }

        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }

So, that's some boilerplate code already being hooked up so you can make your desired MVVM app in style. The MainViewmodel is already being registered here in the SimpleIoc and you can access it using the Main property. So, let's go over our MainPage.xaml and set it's DataContext to MainViewModel, remember we are using ViewModelLocator and access its Main property.

 

So, let's go ahead and add a DataContext property to the page as in the following:

DataContext="{Binding Main, Source={StaticResource Locator}}"

 Now, before you scream, where is the locator, it's right in your App.xaml as in the following:

<Application.Resources>
    <vm:ViewModelLocator x:Key="Locator" xmlns:vm="using:MVVMMaps.ViewModel" />
  </Application.Resources>

So, this is how MVVMLight uses the ViewModelLocator to help us locate the MainViewModel.

 

Now as we have hooked up our MainPage.xaml with MainViewModel the next thing to do is to bring our favourite Map control to our Main Grid.

Grid>
        <Maps:MapControl >

        </Maps:MapControl>
    </Grid>

Now,  we'd like to detect our own location whenever the app starts and let's put some boilerplate code for that. Let's move to our MainViewModel.cs to put some basic boilerplate location detection code. But before doing that let's add a bindable property so we can bind our own location to the map control. Usually if you have MVVMLight toolkit installed in your PC you'd find it's code snippets pretty handy in this case. Just go ahead and type mvvminpc and it would create a bindable property for you. :)

public const string MyLocationPropertyName = "MyLocation";

private Geopoint _myLocation = null;

public Geopoint MyLocation
{
    get
    {
        return _myLocation;
    }

    set
    {
        if (_myLocation == value)
        {
            return;
        }


        _myLocation = value;
        RaisePropertyChanged(MyLocationPropertyName);
    }
}

Now that we have our bindable property to bind our location we need to detect our current location. So without further delay, let's put a very simple location detection async method in place to save ourselves.

private async void GetMyLocation()
{
    try
    {
        Geolocator locator = new Geolocator();

        var location = await locator.GetGeopositionAsync(TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(60));
        MyLocation = location.Coordinate.Point;
    }
    catch (Exception ex)
    {

        MessageDialog Dialog = new MessageDialog("Location detection failed");
        Dialog.ShowAsync();
    }
}

Now, that's pretty simple and standard to be exact. I have put a simple MessageDialog in place just to ensure that I get to see if anything goes wrong. We will definitely make it better a bit later.

 

Now, it's time to put some markers on the map. Unlike the MapIcon class that is available to be used in cases likes these, those are not bindable. So, I will put some custom XAML markers inside the Map and bind it . 

 

Let's put a basic Grid and a Textblock inside it to show our Location on the Map and bind the location to our bindable property MyLocation from our MainViewModel.

<Grid>
        <Maps:MapControl Center="{Binding MyLocation}" >
            <Grid Background="#FFFF4444" Maps:MapControl.Location="{Binding MyLocation}">
                <TextBlock  Text="Test" FontFamily="20" Foreground="White" ></TextBlock>
            </Grid>
        </Maps:MapControl>
    </Grid>

Now, there's really something to look at. The first thing worth noticing is we have just declared our Grid with a TextBlock inside the MapControl itself. We have bound our Grid's position with the Maps:MapControl.Location property binding it to MyLocation. We even bound our MapControl's center to the same Location. Now we need a couple of things more. Let's put a little ProgressIndicator in the status bar to show the user that we are trying to track down their location.

private async void ToggleProgressBar(bool toggle, string message="")
{
    var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();


    if (toggle)
    {
        statusBar.ProgressIndicator.Text = message;
        await statusBar.ProgressIndicator.ShowAsync();
    }
    else
    {
        await statusBar.ProgressIndicator.HideAsync();
    }
}

Now it's a little method to get the statusbar of the current view, put a text over it and show it. You might tjhink that we're done, but not quite yet. We need to focus the map to the proper zoom level. One way to do that would be to just bind the ZoomLevel of the map control from MainViewModel.cs. But I do want to keep the UI logic inside the xaml.cs plus I want the sweet animation it makes when the MapControl sets the view to a specific location. So, to do that, let's go over our MainPage.xaml.cs and put a method to do that. 

private async void SetMapView(Geopoint point)
        {
            await MainMap.TrySetViewAsync(point, 15,0,0,Windows.UI.Xaml.Controls.Maps.MapAnimationKind.Bow);
        }

Now, the question would be, how to hook this up from the viewmodel? Messaging to the rescue! Since we want to trigger this from the viewmodel all we need to do is, put a Messenger object in the viewmodel, send a message with a predefined token and a parameter, if needed, and receive the message in the MainPage.xaml. Be assured you need to have a messenger registered in MainPage.xaml.cs.

 

Now let's register the MainPage.xaml.cs to the default messenger provided by MVVMLight. This is why I love MVVMLight, you see?

Messenger.Default.Register<Geopoint>(this, Constants.SetMapViewToken, SetMapView);

Just put this line inside the MainPage.xaml.cs public constructor MainPage() and you're done! You can definitely see that I have used a string Constants.SetMapViewToken as a token to identify the message and assigned SetMapView as an action.

 

If you're curious about  Constants.SetMapViewToken, this will clear things up for you:

internal class Constants
    {
        public static string SetMapViewToken = "SetMapView";
    }

It's just a string to identify my message. Now, let's add up a command bar/application bar at the bottom and add a button to trigger the location tracking instead of doing that in the MainViewModel constructor. 

Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Find Me!" Icon="Target" />
        </CommandBar>
    </Page.BottomAppBar>

Now, we need a command to bind the AppBarButton to that very command in MainViewModel. To do that let's create a RelayCommand, a very cool ICommand implementation in MVVMLight and put our location detection method as an action to that command.  So, let's create a command first.

public const string GetMyLocationCommandPropertyName = "GetMyLocationCommand";

private RelayCommand _getMyLocationCommand = null;

public RelayCommand GetMyLocationCommand
{
    get
    {
        return _getMyLocationCommand;
    }

    set
    {
        if (_getMyLocationCommand == value)
        {
            return;
        }


        _getMyLocationCommand = value;
        RaisePropertyChanged(GetMyLocationCommandPropertyName);
    }
}

And let's use our GetMyLocation as the action for the command as in the following:

public MainViewModel()
{

    GetMyLocationCommand = new RelayCommand(GetMyLocation);

}

And still there is one thing to do before we try it out, our Grid with a Textblock to show my location on the map is really small in size, let's ramp up that size and expand the view a bit.

<Grid>
        <Maps:MapControl  x:Name="MainMap" Center="{Binding MyLocation}" >
            <Grid Background="#FFFF4444" Maps:MapControl.NormalizedAnchorPoint="0.5,1" Maps:MapControl.Location="{Binding MyLocation}">
                <TextBlock  Text="Here I Am!" FontFamily="65" Margin="10" Foreground="White" ></TextBlock>
            </Grid>
        </Maps:MapControl>
    </Grid>

Now, apart from the font size and margin change we have a new property set and that is named Maps:MapControl.NormalizedAnchorPoint. It sets the anchor of the XAML control you are using as a pushpin, I want mine to be anchored in the middle bottom thus I set it to (0.5, 1). If you want to learn more about the Map Control itself, you might want to read my previous article here.

 

Now, let's start up our emulator and watch some magic running!

 

 

 

Now, I believe, like everyone, you can already see a problem, the pushpin that we made is hanging over there before it gets the location. Now, what we need is to make that pushpin not visible until we find our location. ;)

 

 

 

Now, that's what it looks like when it's fixed. The proper MVVM approach would be to do this using a dataconverter and toggle it in and out from the viewmodel. But in this case since this will only be toggled once, let's just toggle the visibility when the map view is being set.

private async void SetMapView(Geopoint point)
        {
            MyLocationPushpin.Visibility = Visibility.Visible;
            await MainMap.TrySetViewAsync(point, 15,0,0,Windows.UI.Xaml.Controls.Maps.MapAnimationKind.Bow);
        }

And of course, I named the Pushpin Grid to MyLocationPushpin in XAML to access that from xaml.cs as in the following:

<Grid Visibility="Collapsed" x:Name="MyLocationPushpin" Background="#FFFF4444" Maps:MapControl.NormalizedAnchorPoint="0.5,1" Maps:MapControl.Location="{Binding MyLocation}">
                <TextBlock  Text="Here I Am!" Margin="10" Foreground="White" ></TextBlock>
            </Grid>

Now, with that out of the way we have a working Location finder done with MVVM. Let's notch up the ante a bit, shall we?

 

An Interactive PushPin on the map

 

Now usually all our PushPins are static and don't really animate or interact. Now, we need them to animate. Let's proceed and do that. So, first of all, I made some changes to the existing PushPin to make it a bit classier. Now it kind of looks like the following:

 

 

 

Now, if you want to have a peek at the XAML for it, it is like the following:

<StackPanel  x:Name="MyLocationPushpin"
                Maps:MapControl.NormalizedAnchorPoint="0.5,1"
                Maps:MapControl.Location="{Binding MyLocation.Coordinate.Point}"
                Width="Auto" Height="Auto"  >
                <Grid x:Name="ContentGrid"  Height="Auto" Width="Auto">

                    <Rectangle Fill="#FFFF4444" Height="Auto" Width="Auto" RadiusX="3" RadiusY="3"/>

                    <StackPanel HorizontalAlignment="Center" Margin="5" >
                        <TextBlock x:Name="LocationName"  Text="Here I Am!" FontSize="14" Foreground="White" HorizontalAlignment="Center" />
                        <Grid x:Name="MainPushPinDetails" Height="0">
                            <TextBlock x:Name="AddressText" Text="I'm seriously here!" HorizontalAlignment="Center"/>

                        </Grid>

                    </StackPanel>

                </Grid>
                <Path Data="M33.4916,35.3059 L42.1937,35.3059 L38.1973,40.6036 z" Fill="#FFFF4444" HorizontalAlignment="Center" Height="6.302" Margin="0,-1,0,0" Stretch="Fill" UseLayoutRounding="False" Width="9.702"/>
            </StackPanel>

I've changed the main container to a stackpanel rather than a grid and made some changes alongside with putting a rounded rectangle in the background to provide it it's current look. Now, what I want is, when a user taps on this PushPin, it's going to slide up and show some extra info. Now usually for a guy from Windows Phone 8, an expander control is a best choice if you ever used Windows Phone Toolkit before. You can even for an open source expander control for your Windows Phone 8.1 app here. And one more thing to add here will be although I have a textblock named AddressText and I wrote some text on it, it is not visible on the screenshot. Thats what I will slide up and show the user when he taps.

 

I have a simple hack to do it myself since I want to enable my PushPin to have possibly many kinds of animation and I want to define my storyboards for it. So I went ahead to blend and created 2 storyboards, one will be used to slide open the pushpin and the other will slide back and they will look like the following:

<Storyboard x:Name="OpenPushPin">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MainPushPinDetails">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="15">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>


        <Storyboard x:Name="ClosePushPin">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MainPushPinDetails">
                <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

Now, you can definitely see that these are Dependent Animations, so I'd keep these limited in my app. Now, everyone wants to see animation in action, not in XAML. :D Before going into action, we must determine a way to switch these animations. The thing is when the PushPin opens it will play OpenPushPin and when it closes it will play ClosePushPin. So, I need to have a boolean trigger somewhere to change this animations in time. Now, I can easily do this by putting a bool value in my viewmodel but I want to keep the UI logic totally separate from my ViewModel or at least as much as possible. So, I found a hack.

 

My hack was pretty straightforward. I actually put a checkbox all over the PushPin but with an empty ControlTemplate defined in its style. So, it will basically look like an empty grid when it actually is a checkbox.

 

Now my Map Pushpin XAML looks like the following:

<StackPanel  x:Name="MyLocationPushpin"
                Maps:MapControl.NormalizedAnchorPoint="0.5,1"
                Maps:MapControl.Location="{Binding MyLocation.Coordinate.Point}"
                Width="Auto" Height="Auto"  >
                <Grid x:Name="ContentGrid"  Height="Auto" Width="Auto">

                    <Rectangle Fill="#FFFF4444" Height="Auto" Width="Auto" RadiusX="3" RadiusY="3"/>

                    <StackPanel HorizontalAlignment="Center" Margin="5" >
                        <TextBlock x:Name="LocationName"  Text="Here I Am!" FontSize="14" Foreground="White" HorizontalAlignment="Center" />
                        <Grid x:Name="MainPushPinDetails" Height="0">
                            <TextBlock x:Name="AddressText" Text="I'm seriously here!" HorizontalAlignment="Center"/>

                        </Grid>

                    </StackPanel>

                    <CheckBox x:Name="CheckBoxGrid" Content="CheckBox" Style="{StaticResource CheckGridStyle}" MinWidth="0" Width="{Binding ActualWidth, ElementName=ContentGrid}" Height="{Binding ActualHeight, ElementName=ContentGrid}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Background="#FFFB0606">
                        <Interactivity:Interaction.Behaviors>
                            <Core:EventTriggerBehavior EventName="Checked">
                                <Media:ControlStoryboardAction Storyboard="{StaticResource OpenPushPin}"/>
                            </Core:EventTriggerBehavior>
                            <Core:EventTriggerBehavior EventName="Unchecked">
                                <Media:ControlStoryboardAction Storyboard="{StaticResource ClosePushPin}"/>
                            </Core:EventTriggerBehavior>
                        </Interactivity:Interaction.Behaviors>
                    </CheckBox>

                </Grid>
                <Path Data="M33.4916,35.3059 L42.1937,35.3059 L38.1973,40.6036 z" Fill="#FFFF4444" HorizontalAlignment="Center" Height="6.302" Margin="0,-1,0,0" Stretch="Fill" UseLayoutRounding="False" Width="9.702"/>
            </StackPanel>

Now, many questions might occur to you. Before going to those, allow me to show you the style of the CheckBox that makes it look like a blank grid; that is the following:

<Style x:Key="CheckGridStyle" TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid x:Name="CheckGrid" Background="Transparent"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Now, on the PushPin XAML you can see that I have gone over Blend again and used Blend's famous behaviours to trigger my Storyboards. I triggered OpenPushPin when the checkbox is checked and ClosePushPin when it's unchecked. The result may surprise you!

 

 

 

Looks like the hack worked! Cool, Huh? Now even you can do an animated interactive PushPin yourself. 

 

Showing a Collection of Pushpins on the Map

We've already seen quiet a lot on how you can actually show your own location in a Map Control following MVVM. Now we need to take it a bit further. Usually we end up having multiple PushPins in our maps in possibly all map apps. So, how can we facilitate that in this Map Control following MVVM?

 

Now, what I want to do is to determine my nearby food places around me. I'm using the Google places API for this purpose and I have made some utility classes. Although very oorly coded since this was made as quickly as possible.

 

The first utility class I added here is a very simple Google Places API wrapper just to get my job done:

internal class FoodSearcher
    {
        private string BaseUrl = "https://maps.googleapis.com/maps/api/place/nearbysearch/";
        private string Format = "json";
        private string LocationKey = "location";
        private string RadiusKey = "radius";
        private string TypesKey = "types";
        private string Type = "food";
        private string KeyKey = "key";
        private string Key = "AIzaSyDSuWOakAmCKEzeDfPq3fRfuISKu0nhjmU";

        public async Task<FoodLocations> SearchForFoodPlaces(Geopoint point, int radius)
        {
            try
            {
                string searchUrlFormat = string.Concat(BaseUrl, Format, "?", LocationKey, "=", "{0}", "&", "radius={1}", "&", TypesKey, "=", Type, "&", KeyKey, "=", Key);
                string searchUrl = string.Format(searchUrlFormat, GetLocationParam(point), radius);

                HttpClient client = new HttpClient();
                var data = await client.GetStringAsync(searchUrl);

                return JsonConvert.DeserializeObject<FoodLocations>(data);
            }
            catch (System.Exception ex)
            {
                return null;
            }
        }

        private string GetLocationParam(Geopoint point)
        {
            return string.Concat(point.Position.Latitude.ToString(), ",", point.Position.Longitude.ToString());
        }

    }

All I did in here is I made a simple Google Places API request for the nearest food places and deserialized the JSON using Json.net. I used http://json2csharp.com/ for my JSON to C# classes translation purposes. And the model looks like the following:

public class Location
    {
        public double lat { get; set; }
        public double lng { get; set; }
    }

    public class Geometry
    {
        public Location location { get; set; }
    }

    public class OpeningHours
    {
        public bool open_now { get; set; }
        public List<object> weekday_text { get; set; }
    }

    public class Photo
    {
        public int height { get; set; }
        public List<object> html_attributions { get; set; }
        public string photo_reference { get; set; }
        public int width { get; set; }
    }

    public class FoodLocation : ObservableObject
    {

        public const string LocationPropertyName = "Location";

        private Geopoint _Location = null;

        public Geopoint Location
        {
            get
            {
                return _Location;
            }

            set
            {

                _Location = value;
                RaisePropertyChanged(LocationPropertyName);
            }
        }


        public Geometry _geometry;
        public Geometry geometry { get { return _geometry;  } set { _geometry = value; Location = new Geopoint(new BasicGeoposition() {Latitude=value.location.lat, Longitude=value.location.lng });  } }
        public string icon { get; set; }
        public string name { get; set; }
        public OpeningHours opening_hours { get; set; }
        public string place_id { get; set; }
        public double rating { get; set; }
        public string reference { get; set; }
        public string scope { get; set; }
        public List<string> types { get; set; }
        public string vicinity { get; set; }
        public int? price_level { get; set; }
        public List<Photo> photos { get; set; }


    }

    public class FoodLocations : ObservableObject
    {
        public List<object> html_attributions { get; set; }
        public string next_page_token { get; set; }


        public const string resultsPropertyName = "results";

        private List<FoodLocation> _results = null;


        public List<FoodLocation> results
        {
            get
            {
                return _results;
            }

            set
            {


                _results = value;
                RaisePropertyChanged(resultsPropertyName);
            }
        }


        public string status { get; set; }
    }

Although that looks seriously long, there's a very few thing to look into. You can definitely see that I declared FoodLocations and FoodLocation classes as ObservableObjects. This comes with MVVMLight and you can easily use this to make a class observable. I did that because I want to track certain property changes in those classes. If you look closely you will see I only put PropertyChanged method invocations in certain properties like results and Location. Because I need them to update the map when they get updates.

 

Now, we need to get these from our MainViewModel. We added one extra AppBarButton to facilitate this in our AppBar.

<AppBarButton x:Name="NearestFoodPlacesButton" Label="Food Places Nearby" Icon="Emoji" Visibility="Collapsed" Command="{Binding FindNearestFoodPlacesCommand}">
</AppBarButton>

You can definitely see the Button visibility is collapsed. I kept this that way because I want it to be visible only after my location has been detected.  You can control it straight from MainViewModel using Data Converters but I want to keep it simple from the UI perspective. So I added the logic in MainPage.xaml.cs:

private async void SetMapView(Geopoint point)
        {
            MyLocationPushpin.Visibility = Visibility.Visible;
            NearestFoodPlacesButton.Visibility = Visibility.Visible;
            await MainMap.TrySetViewAsync(point, 15,0,0,Windows.UI.Xaml.Controls.Maps.MapAnimationKind.Bow);
        }

The next thing obviously is to put up a RelayCommand to trigger this thing.

public const string FindNearestFoodPlacesCommandPropertyName = "FindNearestFoodPlacesCommand";

        private RelayCommand _FindNearestFoodPlacesCommand = null;
        public RelayCommand FindNearestFoodPlacesCommand
        {
            get
            {
                return _FindNearestFoodPlacesCommand;
            }

            set
            {
                if (_FindNearestFoodPlacesCommand == value)
                {
                    return;
                }

                _FindNearestFoodPlacesCommand = value;
                RaisePropertyChanged(FindNearestFoodPlacesCommandPropertyName);
            }
        }

We need one more thing before we start writing the implementation of that very RelayCommand. We need an ObservableCollection to hold all the food places. And since this would be of FoodLocation type:

public const string NearbyFoodPlacesPropertyName = "NearbyFoodPlaces";

        private ObservableCollection<FoodLocation> _NearbyFoodPlaces = null;

        public ObservableCollection<FoodLocation> NearbyFoodPlaces
        {
            get
            {
                return _NearbyFoodPlaces;
            }

            set
            {
                if (_NearbyFoodPlaces == value)
                {
                    return;
                }

                _NearbyFoodPlaces = value;
                RaisePropertyChanged(NearbyFoodPlacesPropertyName);
            }
        }

All I must do now is to get these locations with what I have done now. Let's put one implementation for our FindNearestFoodPlacesCommand:

public MainViewModel()
        {

            GetMyLocationCommand = new RelayCommand(GetMyLocation);
            FindNearestFoodPlacesCommand = new RelayCommand(FindNearestFoodPlaces);

        }

        private async void FindNearestFoodPlaces()
        {
            ToggleProgressBar(true, "Looking for food places around");
            try
            {

                if (MyLocation != null)
                {
                    FoodSearcher Searcher = new FoodSearcher();
                    var FoodPlaces = await Searcher.SearchForFoodPlaces(MyLocation.Coordinate.Point, 500);

                    NearbyFoodPlaces = new ObservableCollection<FoodLocation>(FoodPlaces.results);
                }


            }
            catch (Exception ex)
            {
                MessageDialog Dialog = new MessageDialog("Nearby Food Places Search Failed");
                Dialog.ShowAsync();

            }

            ToggleProgressBar(false);
        }

If you look into the implementation, you will see its pretty straightforward considering all our groundwork behind. All I'm doing is I'm searching a list of food places around my location inside 500 meters. And I'm assigning the result property of the FoodLocations object to our bindable ObservableCollection named NearbyFoodPlaces. Now, all that is left is binding that from XAML.

<Maps:MapItemsControl ItemsSource="{Binding NearbyFoodPlaces}" >

                <Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel
                Maps:MapControl.NormalizedAnchorPoint="0.5,1"
                Maps:MapControl.Location="{Binding Location}"
                Width="Auto" Height="Auto"  >
                            <Grid x:Name="FoodContentGrid"  Height="Auto" Width="Auto">

                                <Rectangle Fill="#FF3FC500" Height="Auto" Width="Auto" RadiusX="3" RadiusY="3"/>

                                <StackPanel HorizontalAlignment="Center" Margin="5" >
                                    <TextBlock x:Name="FoodLocationName"  Text="{Binding name}" FontSize="14" Foreground="White" HorizontalAlignment="Center" />
                                </StackPanel>


                            </Grid>
                            <Path Data="M33.4916,35.3059 L42.1937,35.3059 L38.1973,40.6036 z" Fill="#FF3FC500" HorizontalAlignment="Center" Height="6.302" Margin="0,-1,0,0" Stretch="Fill" UseLayoutRounding="False" Width="9.702"/>
                        </StackPanel>
                    </DataTemplate>
                </Maps:MapItemsControl.ItemTemplate>
            </Maps:MapItemsControl>

Now, what I did here is I instantiated Maps:MapItemsControl inside MapControl and set its ItemSource to our NearbyFoodPlaces ObervableCollection. Now if you remember our GeoPoint property in the FoodLocation class was Location and thus we assigned Maps:MapControl.Location="{Binding Location}" in the root stackpanel so it gets rendered properly.

 

So, what are we waiting for? It's time to check out how that looks. It's time for the magic!

 

 

 

Now, for our last and final trick we will hook up a command in the pushpin to invoke one action from the viewmodel. I will keep this really simple. I will show some extra data based on the pushpin tapped/clicked.  I added a new RelayCommand named ShowFoodLocationDetails and it would take a FoodLocation object as a command parameter because it would be passed from that Map Pushpin since they are actually a FoodLocation object. I instantiated an action for the command and showed some extra info in a MessageDialog. From MainViewModel.cs it looks like the following:

public MainViewModel()
        {

            GetMyLocationCommand = new RelayCommand(GetMyLocation);
            FindNearestFoodPlacesCommand = new RelayCommand(FindNearestFoodPlaces);
            ShowFoodLocationDetails = new RelayCommand<FoodLocation>(ShowFoodLocationDetailsAction);

        }

        private void ShowFoodLocationDetailsAction(FoodLocation location)
        {
            MessageDialog Dialog = new MessageDialog(location.name+ "-"+location.vicinity);
            Dialog.ShowAsync();
        }

And the trick actually lies in XAML since you are binding these from the datatemplate of a MapItemsControl.ItemTemplate as in the following:

<Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel
                Maps:MapControl.NormalizedAnchorPoint="0.5,1"
                Maps:MapControl.Location="{Binding Location}"
                Width="Auto" Height="Auto"  >

                        <Interactivity:Interaction.Behaviors>
                            <Core:EventTriggerBehavior EventName="PointerPressed">
                                <Core:InvokeCommandAction Command="{Binding Main.ShowFoodLocationDetails, Source={StaticResource Locator}}" CommandParameter="{Binding }"  />
                            </Core:EventTriggerBehavior>
                        </Interactivity:Interaction.Behaviors>


                            <Grid x:Name="FoodContentGrid"  Height="Auto" Width="Auto">

                                <Rectangle Fill="#FF3FC500" Height="Auto" Width="Auto" RadiusX="3" RadiusY="3"/>

                                <StackPanel HorizontalAlignment="Center" Margin="5" >
                                    <TextBlock x:Name="FoodLocationName"  Text="{Binding name}" FontSize="14" Foreground="White" HorizontalAlignment="Center" />
                                </StackPanel>


                            </Grid>
                            <Path Data="M33.4916,35.3059 L42.1937,35.3059 L38.1973,40.6036 z" Fill="#FF3FC500" HorizontalAlignment="Center" Height="6.302" Margin="0,-1,0,0" Stretch="Fill" UseLayoutRounding="False" Width="9.702"/>
                        </StackPanel>
                    </DataTemplate>

                </Maps:MapItemsControl.ItemTemplate>

The only block we added here is the  Interactivity:Interaction.Behaviors block since it adds a Core:EventTriggerBehavior to the data template. When a PointerPressed event is triggered we are invoking a Core:InvokeCommandAction and we are binding ShowFoodLocationDetails as our command. The most important thing here to be noticed is that we used a Locator defined in App.xaml that is actually our ViewModelLocator instantiation to locate the MainViewModel. The reason we do it like this here is because as we are now inside the datatemplate for the MapItemsControl.ItemTemplate, it doesn't know MainViewModel since it's a datacontext. So we used a Locator to point to a MainViewModel accessed by the Main property in MainViewModel and bound the command in there. Since we are sending the entire FoodLocation object as a command parameter we just kept that as CommandParameter="{Binding }".

 

 Now you can even tap on a FoodLocation Pushpin!

 

 

 

 So, that was all. I hope this helps and I hope you guys like it! Stay Frosty!