Add bubble to map control

[Vagelis Dermos]

Hi to all,

I am developing a Xamarin Forms app, and i want to use  Map control

I am trying to follow the instructions in the https://help.syncfusion.com/xamarin/maps/populatedata but i am a little bit confused about how to add bubbles to the countries.

My list of countries is a ObservableCollection with 2 elements "Country Name" and "Values" like this:

public class PerCountry

{

    public string country { get; set; }

    public int value{ get; set; }

}

in my xaml i have add the map control:

        <maps:SfMaps x:Name="sfmap"  BackgroundColor="White" >

            <maps:SfMaps.Layers>

                <maps:ImageryLayer LayerType="Bing" BingMapKey="my key"/>

            </maps:SfMaps.Layers>

        </maps:SfMaps>

What can i do (if i can) to add bubbles?

Thanks in advance

[Ramya Soundar Rajan]

Hi Vagelis Dermos, 

 

Greetings from Syncfusion. 

 

Currently we don’t have support to add bubble marker to the Bing maps. We can add the bubble marker to the shape file layer by using BubbleMarkerSettings. It will be generated based on ItemsSoure. Please refer the below UG link for more information to add a bubble marker to the shape file layer. 

 

https://help.syncfusion.com/xamarin/maps/bubblemarker 

 

We have achieved your requirement in workaround sample, by using MarkerTemplate property as like in below code. 

 

XAML: 

    <maps:SfMaps x:Name="sfmap"  BackgroundColor="White" > 

        <maps:SfMaps.Layers> 

            <maps:ImageryLayer LayerType="Bing" Markers="{Binding CustomMarkers}" BingMapKey="Your Bing Key"> 

                <maps:ImageryLayer.MarkerTemplate> 

                    <DataTemplate> 

                        <BoxView x:Name="boxView" 

                                 CornerRadius="{Binding .,Converter={x:StaticResource TemplateConverter},ConverterParameter={x:Reference boxView},Mode=TwoWay}"  

                                 BackgroundColor="LightBlue"/> 

                    </DataTemplate> 

                </maps:ImageryLayer.MarkerTemplate> 

            </maps:ImageryLayer> 

        </maps:SfMaps.Layers> 

    </maps:SfMaps> 

 

C#: 

public class TemplateConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            if (value != null) 

            { 

                var population = (value as CustomMarker).Population; 

 

                var isLowRange = population < 250000000; 

 

                var isMiddleRange = population >= 250000000 && population < 400000000; 

 

                double radius = isLowRange ? 5 : isMiddleRange ? 10 : 15;  

 

                (parameter as BoxView).HeightRequest = (parameter as BoxView).WidthRequest = radius * 2; 

                (parameter as BoxView).BackgroundColor = radius == 5 ? Color.FromHex("#2E769F") : (radius == 10) ? Color.FromHex("#D84444") : Color.FromHex("#816F28"); 

                return radius;                     

            } 

 

            return 0; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value; 

        } 

    } 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BingMapMarker_Collection1836694794 

 

Output Screenshot: 

 

 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Ramya S