MapControl Template10

Question

SOLVED

I solved this problem with the fact that I have to add a MapItemsControl.ItemTemplate. Without this it does not render anything more than the name of the control.

So just add this code:

<Maps:MapItemsControl x:Name="mainMapItems" ItemsSource="{Binding MapItems}">
 <Maps:MapItemsControl.ItemTemplate>
  <DataTemplate>
   <StackPanel Background="Transparent">
    <TextBlock Maps:MapControl.Location="{Binding Location}" Text="{Binding Title}" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
   </StackPanel>
  </DataTemplate>
 </Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>

It's not perfect because this will not give you an icon on the map, but rather just a text. But it can easily be solve with adding Image = "" in the Collection.

---

I'm trying to use MapControl in a Template10 layout.

The code I use is

MainPage.xaml

            <Maps:MapControl x:Name="MapControl1"
            ZoomInteractionMode="GestureAndControl"
            TiltInteractionMode="GestureAndControl"   
            MapServiceToken="<ApiCodeHere>"
            Loaded="{x:Bind ViewModel.Map_Loaded}"/>

MainPageViewModel.cs

    MapControl _Map;
    public MapControl Map { get { return _Map; } set { Set(ref _Map, value); RaisePropertyChanged(); } }

    public async void Map_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {

        MapControl newMap = new MapControl();

        Geoposition userLocation = await GetUserLocation();

        BasicGeoposition GeoPos_UserLocation = new BasicGeoposition() { Latitude = userLocation.Coordinate.Point.Position.Latitude, Longitude = userLocation.Coordinate.Point.Position.Longitude };
        BasicGeoposition GeoPos_NorthWest = new BasicGeoposition() { Latitude = userLocation.Coordinate.Point.Position.Latitude + 0.05, Longitude = userLocation.Coordinate.Point.Position.Latitude + 0.1 };
        BasicGeoposition GeoPos_SouthEast = new BasicGeoposition() { Latitude = userLocation.Coordinate.Point.Position.Latitude - 0.05, Longitude = userLocation.Coordinate.Point.Position.Latitude - 0.1 };

        GeoboundingBox mapBox = new GeoboundingBox(GeoPos_NorthWest, GeoPos_SouthEast);

        // Add Point for User
        MapIcon Icon_UserLocation = new MapIcon() { Location = new Geopoint(GeoPos_UserLocation) };
        newMap.MapElements.Add(Icon_UserLocation);
        newMap.Center = new Geopoint(mapBox.Center);

        Map = newMap;

        await Task.CompletedTask;
    }

The Map_Loaded function is fired as exepcted. The thing that I have a trouble with is that if this was a normal project I would set the data directly to MapControl1.Center and MapControl1.MapElements.Add. But since this is a MVVM project this is not how it's done and I'm a bit confused on how to proceed.

I would like to do something like Views.MainPage.MapControl1.Center = new Geopoint(), but that clearly does not work.

---

Additional Update

As it turns out this was as easy as I thought. It was just a matter of thinking in the right order.

The MapControl has controls for Zooming and Center and such. So for MVVM code this works

Center="{Binding MapCenter,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Zoom="{Binding MapZoom,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

I have however had issues with setting up MapItems as described in the document I sources to.

To get items on the map you need to add MapItemsControl and it should work like such...

<Maps:MapItemsControl x:Name="mainMapItems" ItemsSource="{Binding MapItems,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></Maps:MapItemsControl>

But my code in MainPageViewModel.xaml does not work with this. The items does not update.

IList<MapElement> _MapItems;
public IList<MapElement> MapItems { get { return _MapItems; } set { Set(ref _MapItems, value); RaisePropertyChanged(); } }

IList<MapElement> MapItems = new List<MapElement>() {
    new MapIcon() {
        Location = new Geopoint(GeoPos_UserLocation),
        Title = "You Are Here!"
    }
};

Sources: Windows 10 SDK Bing Maps Control

Answer 1

I solved this problem with the fact that I have to add a MapItemsControl.ItemTemplate. Without this it does not render anything more than the name of the control.

So just add this code:

<Maps:MapItemsControl x:Name="mainMapItems" ItemsSource="{Binding MapItems}">
 <Maps:MapItemsControl.ItemTemplate>
  <DataTemplate>
   <StackPanel Background="Transparent">
    <TextBlock Maps:MapControl.Location="{Binding Location}" Text="{Binding Title}" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
   </StackPanel>
  </DataTemplate>
 </Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>

It's not perfect because this will not give you an icon on the map, but rather just a text. But it can easily be solve with adding Image = "" in the Collection.

Answer 2

Try using

ObservableCollection ObserverableCollection<MapElement> MapItems = new ObservableCollection<MapElement>();

Since you expecting the item to be "updatable at runtime" or react to changes ObservableCollection behind the scenes implements INPC