Adding IntersectionAction and SmartLabelMode to MapMarker Label

Currently there are IntersectionAction and SmartLabelMode properties on DataLabels via the DataLabelSetting for SfMaps.

Please can you let me know how to implement the IntersectionAction and SmartLabelMode properties for the MapMarker Label? 

At the moment MapMarker Label text intersect with one another causing an overlap of text. This is unreadable on the map which is a problem.

3 Replies 1 reply marked as answer

RS Ramya Soundar Rajan Syncfusion Team September 9, 2020 12:19 PM UTC

 
You can achieve this requirement by adding custom marker using MarkerTemplate property. Using the MarkerTemplate, you can define custom marker by adding Label with property LineBreakMode property to avoid overlapping.  
 
Please refer the below link for more information. 
 
 
Regards, 
Ramya S 



JS Jonty Stephan September 9, 2020 12:29 PM UTC

Hi Ramya,

Please can you provide an example of the custom marker with Label(s) utilizing the LineBreakMode property?


RS Ramya Soundar Rajan Syncfusion Team September 10, 2020 07:50 AM UTC

Hi Jonty Stephan, 
 
We prepared a sample based on your requirement. Please refer the sample from below location. 
 
Code snippet: 
 
  
               
 
<maps:ShapeFileLayer.MarkerTemplate> 
 
                    <DataTemplate > 
                        <StackLayout IsClippedToBounds="false" Orientation="Horizontal" 
                         HorizontalOptions="StartAndExpand" 
                         VerticalOptions="Center" 
                         HeightRequest="30"> 
 
                           
 
                            <Label Text="{Binding MarkerText}" TextColor="Red" FontSize="8" WidthRequest="15" LineBreakMode="CharacterWrap"/> 
                        </StackLayout> 
 
                    </DataTemplate> 
 
                </maps:ShapeFileLayer.MarkerTemplate>              
                        
 
 
 
We would like to let you know that you can trim, wrap and truncate using the Label LineBreakMode property. Please refer the below link for more information. 
 
 
You can also change the template style more the marker using the DataTemplateSelector. Please refer the below KB link. 
 
 
Regards, 
Ramya S 


Marked as answer
Loader.
Up arrow icon