FontIcon on SfMap Marker

Is there a way to use font icon of on mapmarker when it's set as image?


1 Reply

ET Eswaran Thirugnanasambandam Syncfusion Team January 10, 2022 01:11 PM UTC

Hi Darwin Turingan 
Thanks for contacting Syncfusion support.  
 
You can achieve your requirement by using the MarkerTemplate support in the SfMaps.  By adding Label as a template for marker, you can achieve this as shown in the below code.  
[XAML] 
[App.Xaml] 
<OnPlatform x:Key="CustomFont" x:TypeArguments="x:String"> 
    <On Platform="Android" Value="customfont.ttf#fontello" /> 
    <On Platform="UWP" Value="Assets/customfont.ttf#customfont" /> 
    <On Platform="iOS" Value="customfont" /> 
</OnPlatform> 
[MainPage.Xaml] 
<ContentPage.Resources> 
    <Style x:Key="Icons" TargetType="Label"> 
        <Setter Property="FontFamily" Value="{StaticResource CustomFont}" /> 
        <Setter Property="Text" Value="&#xe805;"/> 
    </Style> 
</ContentPage.Resources> 
<ContentPage.Content> 
    <Grid Margin="20" x:Name="grid"> 
        <maps:SfMaps x:Name="sfmap"  BackgroundColor="White"> 
            <maps:SfMaps.Layers > 
                <maps:ShapeFileLayer Uri="world1.shp"  > 
                    <maps:ShapeFileLayer.ShapeSettings> 
                        <maps:ShapeSetting ShapeFill="Gray" /> 
                    </maps:ShapeFileLayer.ShapeSettings> 
                    <maps:ShapeFileLayer.MarkerSettings> 
                        <maps:MapMarkerSetting x:Name="markerSetting"  
                                                                        HorizontalAlignment="Center"  
                                                                        VerticalAlignment="Near" /> 
                    </maps:ShapeFileLayer.MarkerSettings> 
                    <maps:ShapeFileLayer.Markers> 
                        <maps:MapMarker  Latitude="38.8833" Longitude= "-77.0167"  /> 
                    </maps:ShapeFileLayer.Markers> 
                    <maps:ShapeFileLayer.MarkerTemplate> 
                        <DataTemplate > 
                            <Label   Style="{StaticResource Icons}" /> 
                        </DataTemplate> 
                    </maps:ShapeFileLayer.MarkerTemplate> 
                </maps:ShapeFileLayer> 
            </maps:SfMaps.Layers> 
        </maps:SfMaps> 
    </Grid> 
</ContentPage.Content> 
 
We have prepared sample for the same. Please get the sample from the below link. 
 
Sample Link:’ 
 
Please refer to the below user guide link for more information about the MarkerTemplate. 
 
Regards, 
Eswaran 


Loader.
Up arrow icon