Add map collection Xamarin Forms

Question

Hello,
I will summarize my app for you:
I have a collection of type Activity which contains all of my activities.

I would like to show on my page every activities. Each activities contains a title (string) and positions (GeoPoint). For every activites I would like to show a map with polyline of my positions and a label (not on the map) with the title.
To do it, I created a collection of Map that contains every map (with polyline) of every activities.
Here is my code :

Here is my XAML :

The title is well display. But I don't know how to show my maps. I tried several things but nothing works. May be you can help me ? Thanksss :)

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I need to use polyline to show few positions ...I did this but I don't know where I have to put {binding Positions} this is my problem.

Native Xamarin.Forms.Maps do not have this property to bind it. But you can create a contentview then add BindableProperty to achieve it. Here is ContentView called MyCustomMap.xml, I add maps:Map control to it.

   <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
                xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"  
                x:Class="ImageLoadingDemo.MyCustomMap">  
       <ContentView.Content>  
           <StackLayout>  
               <maps:Map    
                                       x:Name="maps"   
                                       MoveToLastRegionOnLayoutChange="True"  
                                       HasScrollEnabled="false"  
                                      WidthRequest="300" HeightRequest="300"  
                                       Margin="0,10,10,0"/>  
           </StackLayout>  
       </ContentView.Content>  
   </ContentView>  

Then I add BindableProperty called PolylinePostionProperty draw a Polyline. I add the postion to the polyline.Geopath in the PolylinePostionChange method

   public partial class MyCustomMap : ContentView  
       {  
           public MyCustomMap()  
           {  
               InitializeComponent();  
           }  
     
           public static readonly BindableProperty PolylinePostionProperty = BindableProperty.Create("PolylinePostion", typeof(List<Position>), typeof(MyCustomMap), null, propertyChanged: PolylinePostionChange);  
           public List<Position> PolylinePostion  
           {  
               get { return (List<Position>)GetValue(PolylinePostionProperty); }  
               set { SetValue(PolylinePostionProperty, value); }  
           }  
           private static void PolylinePostionChange(BindableObject bindable, object oldValue, object newValue)  
           {  
               MyCustomMap view = bindable as MyCustomMap;  
               if (view != null)  
               {  
                   List<Position> polylinePostions = (List<Position>)newValue;  
                   view.maps.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(polylinePostions[0].Latitude, polylinePostions[0].Longitude), Distance.FromMiles(1)));  
                   Polyline polyline = new Polyline  
                   {  
                       StrokeColor = Color.Blue,  
                       StrokeWidth = 12,  
                         
                   };  
                   foreach (var item in polylinePostions)  
                   {  
                       polyline.Geopath.Add(item);  
                   }  
                    
                   view.maps.MapElements.Add(polyline);  
     
               }  
     
           }  

In the end, I use this contentview to the listview.

   <ListView HorizontalOptions="StartAndExpand"  
                     VerticalOptions="FillAndExpand"  
                     ItemsSource="{Binding obAcitivities}"  
                     CachingStrategy="RecycleElement"  
                     HasUnevenRows="True"  
                     >  
               <ListView.ItemTemplate>  
                   <DataTemplate>  
                       <ViewCell>  
                           <StackLayout Orientation="Horizontal" Padding="5" VerticalOptions="FillAndExpand">  
                               <StackLayout Orientation="Vertical" Padding="2" VerticalOptions="Center" Spacing="2">  
                                   <Label Text="{Binding Title}"></Label>  
                                   <imageloadingdemo:MyCustomMap PolylinePostion="{Binding PolylinePostion}" ></imageloadingdemo:MyCustomMap>  
                                     
                               </StackLayout>  
                                
     
                           </StackLayout>  
                       </ViewCell>  
                   </DataTemplate>  
               </ListView.ItemTemplate>  
                 
           </ListView>  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.