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 add different style marker pins to Xamarin.Forms maps (SfMaps)

Platform: Xamarin.Forms |
Control: SfMaps |
Published Date: April 8, 2020 |
Last Revised Date: April 8, 2020

Description

This article explains how to add the different style marker pins to the Xamarin.Forms Syncfusion imagery layer maps. 

Solution

Step 1: Initialize the SfMaps control and add the Imagery layer with default OSM map type to the layer collection of the control.

…
<maps:SfMaps x:Name="sfmap"
             BackgroundColor="White">
    <maps:SfMaps.Layers>
        <maps:ImageryLayer > 
        </maps:ImageryLayer>
    </maps:SfMaps.Layers>
</maps:SfMaps>
…

Step 2: Create a custom marker by extending the MapMarker with required additional properties and add the custom markers with latitude, longitude, and population (in million) values to the Imagery layer using the Markers property as shown in the following code.

XAML:

 
<maps:SfMaps>
    <maps:SfMaps.Layers>
        <maps:ImageryLayer MarkerTemplate="{StaticResource personDataTemplateSelector}">
            <maps:ImageryLayer.Markers>
                <local:CustomMarker  Label="United States"
                                     Population="321"
                                     Latitude="37.090240"
                                     Longitude="-95.712891" />
                <local:CustomMarker Label="Congo"
                                    Population="204"
                                    Latitude="-4.038333"
                                    Longitude="21.758663" />
                <local:CustomMarker Label="Kazakhstan"
                                    Population="137"
                                    Latitude="48.019573"
                                    Longitude="66.923683" />
                <local:CustomMarker Label="Australia"
                                    Population="255"
                                    Latitude="-25.274399"
                                    Longitude="133.775131" />
            </maps:ImageryLayer.Markers>
        </maps:ImageryLayer>
    </maps:SfMaps.Layers>
</maps:SfMaps> 

C#:

…
public class CustomMarker : MapMarker
{
    /// <summary>
    /// Gets or sets marker image for high population.
    /// </summary>
    public ImageSource HighPopulationMarker { get; set; }
 
    /// <summary>
    /// Gets or sets marker image for low population.
    /// </summary>
    public ImageSource LowPopulationMarker { get; set; }
 
    /// <summary>
    /// Gets or sets population (in million)
    /// </summary>
    public int Population { get; set; }
}
…

Step 3: You can define the own marker style using the MarkerTemplate property of Imagery layer. To add the different style marker based on the marker data, change the MarkerTemplate using the DataTemplateSelector as shown in the following code. 

XAML:

…
<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="HighPopulationTemplate">
            <StackLayout IsClippedToBounds="false"
                         HorizontalOptions="StartAndExpand"
                         VerticalOptions="Center"
                         HeightRequest="30">
                <Image Source="{Binding  HighPopulationMarker}"
                       Scale="1"
                       Aspect="AspectFit "
                       HorizontalOptions="StartAndExpand"
                       VerticalOptions="Center"
                       HeightRequest="15"
                       WidthRequest="23" />
            </StackLayout>
        </DataTemplate>
        <DataTemplate x:Key="LowPopulationTemplate">
            <StackLayout IsClippedToBounds="false"
                         HorizontalOptions="StartAndExpand"
                         VerticalOptions="Center"
                         HeightRequest="30">
                <Image Source="{Binding  LowPopulationMarker}"
                       Scale="1"
                       Aspect="AspectFit "
                       HorizontalOptions="StartAndExpand"
                       VerticalOptions="Center"
                       HeightRequest="15"
                       WidthRequest="23" />
            </StackLayout>
        </DataTemplate>
        
        <local:MapsDataTemplateSelector x:Key="personDataTemplateSelector"
                                        HighPopulationTemplate="{StaticResource HighPopulationTemplate}"
                                        LowPopulationTemplate="{StaticResource LowPopulationTemplate}" />
    </ResourceDictionary>
</ContentPage.Resources>
 
…
    <maps:SfMaps.Layers>
        <maps:ImageryLayer MarkerTemplate="{StaticResource personDataTemplateSelector}">
        </maps:ImageryLayer>
    </maps:SfMaps.Layers>
</maps:SfMaps>
…

 

C#:

class MapsDataTemplateSelector : DataTemplateSelector
        {
            public DataTemplate HighPopulationTemplate { get; set; }
 
            public DataTemplate LowPopulationTemplate { get; set; }
            protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
            {
                return ((CustomMarker)item).Population >= 250 ? HighPopulationTemplate : LowPopulationTemplate;
            }
        }
 

Output

OSM map with different marker pins

 

You can find the complete sample in this link.

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