Binding Map Polygons using Xamarin forms maps

Viewed 71

I am using Xamarin forms maps and the xaml below works for a hardcode couple of polygons and positions within the polygons. Now I have proven this works I want to make the maps:Polygon entries be data bound to observable collection of polygons I have in a list and then within that I want to have the positions as an collection inside the polygon bound objects (I know how to do this in the ViewModel) but I can't work out how to setup the XAML to configure the binding to the ViewModel - how do I do this?

    <maps:Map MapType="{Binding CurrentMapType, Mode=TwoWay}" ItemsSource="{Binding MyPins}" HasZoomEnabled="True" x:Name="map" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <x:Arguments>
            <maps:MapSpan>
                <x:Arguments>
                    <maps:Position>
                        <x:Arguments>
                      
                            <x:Double>-41.6</x:Double>
                            <x:Double>173.0</x:Double>
                        </x:Arguments>
                    </maps:Position>
                    <x:Double>13</x:Double>
                    <x:Double>13</x:Double>
                  </x:Arguments>
            </maps:MapSpan>
            </x:Arguments>
            <maps:Map.ItemTemplate>
                <DataTemplate>
                    <maps:Pin Position="{Binding Position}"
                                Address="{Binding Address}"
                                Label="{Binding Description}" />
                </DataTemplate>    
            </maps:Map.ItemTemplate>

maps:Map.MapElements

        <maps:Polygon StrokeColor="#1BA1E2"
                      StrokeWidth="8"
                      
                      FillColor="#881BA1E2" >
            <maps:Polygon.Geopath>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6368894</x:Double>
                        <x:Double>-122.134655</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6359424</x:Double>
                        <x:Double>-122.134655</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6359496</x:Double>
                        <x:Double>-122.1325521</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6424124</x:Double>
                        <x:Double>-122.1325199</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.642463</x:Double>
                        <x:Double>-122.1338932</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6406414</x:Double>
                        <x:Double>-122.1344833</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6384943</x:Double>
                        <x:Double>-122.1361248</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6372943</x:Double>
                        <x:Double>-122.1376912</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6368678</x:Double>
                        <x:Double>-122.137305</x:Double>
                    </x:Arguments>
                </maps:Position>
            </maps:Polygon.Geopath>
        </maps:Polygon>
        <maps:Polyline StrokeColor="Black"
                        StrokeWidth="12">
            <maps:Polyline.Geopath>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6381401</x:Double>
                        <x:Double>-122.1317367</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6381473</x:Double>
                        <x:Double>-122.1350841</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6382847</x:Double>
                        <x:Double>-122.1353094</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6384582</x:Double>
                        <x:Double>-122.1354703</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6401136</x:Double>
                        <x:Double>-122.1360819</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6403883</x:Double>
                        <x:Double>-122.1364681</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6407426</x:Double>
                        <x:Double>-122.1377019</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6412558</x:Double>
                        <x:Double>-122.1404056</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6414148</x:Double>
                        <x:Double>-122.1418647</x:Double>
                    </x:Arguments>
                </maps:Position>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>47.6414654</x:Double>
                        <x:Double>-122.1432702</x:Double>
                    </x:Arguments>
                </maps:Position>
            </maps:Polyline.Geopath>
        </maps:Polyline>
    </maps:Map.MapElements>
        </maps:Map>

     </StackLayout>
0 Answers
Related