How to bind the position value of Xamarin.forms.Maps inside the ListView?

Question

I am using Xamarin.forms.Maps for showing the map in my project. The map is inside the ListView and I need to bind the coordinate positions to the map.

Model Class:

public class History
{
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

Data adding part:

historyList.Add(new History() { Latitude= -28.854930 ,Longitude= 151.166023 }); 
historyList.Add(new History() { Latitude = -28.853671, Longitude = 151.165712 }); 
historyList.Add(new History() { Latitude = -28.853934, Longitude = 151.167118 }); 
historyList.Add(new History() { Latitude = -28.855178, Longitude = 151.167946 }); 
historylistview.ItemsSource = historyList;

XAML

<ListView x:Name="historylistview">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                        <StackLayout
                             HorizontalOptions="Center">
                            <maps:Map 
                                x:Name="maps" 
                                VerticalOptions="Center" 
                                HorizontalOptions="Center">
                                <x:Arguments>
                                    <maps:MapSpan>
                                        <x:Arguments>
                                            <maps:Position>
                                                <x:Arguments>
                                                    <x:Double>{Binding Latitude}</x:Double>
                                                    <x:Double>{Binding Longitude}</x:Double>
                                                </x:Arguments>
                                            </maps:Position>
                                            <x:Double>0.01</x:Double>
                                            <x:Double>0.01</x:Double>
                                        </x:Arguments>
                                    </maps:MapSpan>
                                </x:Arguments>
                            </maps:Map>
                        </StackLayout>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The map is showing in each row but the position value are wrong. I have given location from Texas but the map is showing somewhere in Nijerya.

Is binding is possible to do for the type x:Arguments?

Lucas Zhang · Accepted Answer · 2020-12-21T11:59:22.367

0

MapSpan and Position in Map are not bindable property , so it will never work if you use data binding .

If you want to display a list of positions


<ListView x:Name="historylistview">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                        <StackLayout
                             HorizontalOptions="Center">
                             <maps:Map x:Name="map"
                  ItemsSource="{Binding positionList}">
            <maps:Map.ItemTemplate>
                <DataTemplate>
                    <maps:Pin Position="{Binding .}"/>
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>
                        </StackLayout>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

historyList.Add(new History() { positionList = new ObservableCollection<Position>() { new Position(36.9628066, -122.0194722) },xxx="title here" });
historyList.Add(new History() { positionList = new ObservableCollection<Position>() { new Position(36.9628066, -122.0194722) }, xxx = "title here" });
//...
historylistview.ItemsSource = historyList;

public class History
    {
        public ObservableCollection<Position> positionList  { get; set; }
        
        //other property
        public string xxx { get; set; }

    }

Check the docs for more details

edited Dec 21 '20 at 11:59

answered Dec 21 '20 at 10:53

Lucas Zhang

18,630
3
12
22

Where is listview in your answer? I am trying to show a list of items and in each row, i have a map. Also, there are some other details in each row. So I need listview here. https://i.stack.imgur.com/05qS4.png – Sreejith Sree Dec 21 '20 at 11:48
How to add Label in Pin? https://i.stack.imgur.com/RlzPJ.png – Sreejith Sree Dec 21 '20 at 12:22
Check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/pins#display-a-pin-collection – Lucas Zhang Dec 21 '20 at 12:25
tried like this, map showing the country Rome by default. When I scroll down and come back it is going back to Nijeria – Sreejith Sree Dec 21 '20 at 12:53
It is not pointing to the coordinates that we were given on the list – Sreejith Sree Dec 21 '20 at 12:57
Share your project and I will check it . – Lucas Zhang Dec 21 '20 at 13:05
Give me some time, I will share – Sreejith Sree Dec 21 '20 at 13:34
I have uploaded a sample project here, could you please check that? https://drive.google.com/file/d/15m7-X2itSn8Nn9AbPDqDMQ7Ov9vnvGdE/view?usp=sharing – Sreejith Sree Dec 22 '20 at 07:24
My problem is the map inside the listview is not pointing to the coordinates I have given, it is pointing to somewhere to Rome. I have given locations from US, Tokyo, Nairobi and Berlin. Also If I scroll the list the Rome location is modifying and showing the Nijeria location. – Sreejith Sree Dec 22 '20 at 07:27
Also I have added a Map outside the listview and pin and line features are working fine on it. – Sreejith Sree Dec 22 '20 at 07:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226276/discussion-between-lucas-zhang-msft-and-sreejith-sree). – Lucas Zhang Dec 22 '20 at 08:02

How to bind the position value of Xamarin.forms.Maps inside the ListView?

1 Answers1

Linked