We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show the bubble markers in the specific latitude and longitude in Xamarin.Forms Map (SfMaps)

Platform: Xamarin.Forms |
Control: SfMaps |
Published Date: August 28, 2020 |
Last Revised Date: August 28, 2020

This article explains how to add the bubble marker in a specific latitude and longitude in Xamarin.Forms Syncfusion maps control by these following steps:


Step 1: Initialize the SfMaps control and add the ShapeFile layer to the layer collection of the SfMaps control with Uri property to retrieve the location of ShapeFile.

 

[XAML]

<maps:SfMaps  x:Name="Maps" >
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world1.shp">
 
               …
 
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>

 

Step 2: Create a custom marker by extending the MapMarker and add the custom markers with latitude, longitude, and population values to the shape file layer using the Markers property and you can define the own marker style using the MarkerTemplate property of ShapeFileLayer as shown in the following code sample.

 

[XAML]

<maps:SfMaps  x:Name="Maps" >
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world1.shp" Markers="{Binding CustomMarkers}" >
                <maps:ShapeFileLayer.ShapeSettings>
                    <maps:ShapeSetting ShapeFill="Gray" />
                </maps:ShapeFileLayer.ShapeSettings>
                <maps:ShapeFileLayer.MarkerTemplate>
                    <DataTemplate>
                        <BoxView x:Name="boxView"
                                 CornerRadius="{Binding .,Converter={x:StaticResource TemplateConverter},ConverterParameter={x:Reference boxView},Mode=TwoWay}" 
                                 BackgroundColor="LightBlue"/>
                    </DataTemplate>
                </maps:ShapeFileLayer.MarkerTemplate>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>

 

[C#]

    public class ViewModel
    {
        public ObservableCollection<MapMarker> CustomMarkers { get; set; }
        public ViewModel()
        {         
            CustomMarkers = new ObservableCollection<MapMarker>();
            CustomMarkers.Add(new CustomMarker() { Label = "United States", Latitude = "38.8833", Longitude = "-77.0167", Population = 321174000 });
            CustomMarkers.Add(new CustomMarker() { Label = "Brazil", Latitude = "-15.7833", Longitude = "-47.8667", Population = 204436000 });
            CustomMarkers.Add(new CustomMarker() { Label = "India", Latitude = "21.0000", Longitude = "78.0000", Population = 1272470000 });
            CustomMarkers.Add(new CustomMarker() { Label = "China", Latitude = "35.0000", Longitude = "103.0000", Population = 1370320000 });
            CustomMarkers.Add(new CustomMarker() { Label = "Indonesia", Latitude = "-6.1750", Longitude = "106.8283", Population = 255461700 });
        }
    }
    public class CustomMarker : MapMarker
    {
        public ImageSource ImageName { get; set; }
        public double Population { get; set; }
        public CustomMarker()
        {
            ImageName = ImageSource.FromResource("MapMarker_Collection.pin.png", typeof(CustomMarker).GetTypeInfo().Assembly);
        }
    }

 

Step 3: Using converter to define the size of the BoxView as per the value of the Population property in the CustomMarker class.

 

[XAML]

         …
 
                <maps:ShapeFileLayer.MarkerTemplate>
                    <DataTemplate>
                        <BoxView x:Name="boxView"
                                 CornerRadius="{Binding .,Converter={x:StaticResource TemplateConverter},ConverterParameter={x:Reference boxView},Mode=TwoWay}" 
                                 BackgroundColor="LightBlue"/>
                    </DataTemplate>
                </maps:ShapeFileLayer.MarkerTemplate>
 
       …
 

 

[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;
        }
    }

 

Output

To add the bubble marker in specific latitude and longitude in SfMaps.

 

View the sample in GitHub.

 

See also

 

How to add different style marker pins to Xamarin.Forms SfMaps

How to add SfMap markers dynamically to the tapped location

How to group the markers based on zoom level in the imagery layer of the SfMaps control

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile