Execute Command on click of Marker Tooltip Label

[Anukriti Shukla]

I have added Custom Markers in the Imagery Layer & added the Tooltip to display Text on Marker Click.

Is there an event that fires on click of this tooltip Text?

My requirement is to show tooltip text on click of marker and on clicking that text I want to get the selected marker and execute a command. Is that possible?

[Vignesh Ramesh]

Hi Anukriti, 

Greetings from Syncfusion. 

We have achieved your requirement in Android platform by adding Label in the Marker’s TooltipTemplate and added TapGestureRecognizer, Command and CommandParameter for the Label.  

For other platforms, we have some issue in our source level. So, the TapGesture not get recognized in sample level. So, if you confirm the provided solution fulfills your requirement, then we will log bug report on this and provide you a patch otherwise, if your requirement is different from the above. Please provide more details on your requirement. This would be helpful for us to give better solution in this. 

Please find the code snippet below 

[XAML]: 

… 

<maps:SfMaps x:Name="Map" 

             MinZoom="11" 

             EnableZooming="true" 

             ZoomLevel="10" 

             MaxZoom="13"> 

 

    <maps:SfMaps.Resources> 

        <ResourceDictionary> 

            <DataTemplate x:Key="template"> 

                <Label Text="{Binding Label}" BackgroundColor="White" > 

                    <Label.GestureRecognizers> 

                        <TapGestureRecognizer Command="{Binding BindingContext.TapCommand, Source={x:Reference Map}}" 

                                              CommandParameter="{Binding Converter={StaticResource TestConverter}}"/> 

                    </Label.GestureRecognizers> 

                </Label> 

            </DataTemplate> 

        </ResourceDictionary> 

    </maps:SfMaps.Resources> 

     

    <maps:SfMaps.Layers> 

… 

                    <maps:MapMarkerSetting.TooltipSettings> 

                        <maps:TooltipSetting x:Name="tooltipSettings" ShowTooltip="True" ValuePath="Label" TextColor="White" 

                                             Margin="10" BackgroundColor="Navy" 

                                             StrokeColor="Black" StrokeWidth="2" TooltipTemplate="{StaticResource template}"> 

                        </maps:TooltipSetting> 

                    </maps:MapMarkerSetting.TooltipSettings> 

                </maps:MapMarkerSetting> 

            </maps:ImageryLayer.MarkerSettings> 

        </maps:ImageryLayer> 

    </maps:SfMaps.Layers>    

</maps:SfMaps> 

… 

 

[C#]: 

… 

public partial class MainPage : ContentPage 

{ 

    public MainPage() 

    { 

        InitializeComponent(); 

        this.BindingContext = new ColorMappingsViewModel(); 

    } 

} 

… 

public class ColorMappingsViewModel 

{ 

    public ImageSource ImageName { get; set; } 

 

    public Command<CustomMarker> TapCommand { get; protected set; } 

 

    public ColorMappingsViewModel() 

    { 

        ImageName = ImageSource.FromResource("mapssample.Icons.grid.png"); 

        TapCommand = new Command<CustomMarker>(OnTapped); 

    } 

 

    private void OnTapped(CustomMarker selectedMarker) 

    { 

        // Your action here. 

    } 

} 

… 

 

Please find the sample from the below link 

https://www.syncfusion.com/downloads/support/forum/147632/ze/mapssample-789815123  

 

Regards, 

Vignesh. 

[Anukriti Shukla]

Thank you so much, its working perfectly fine. 

[Rachel A]

Hi Anukriti, 

 

Thanks for the update. 

 

Please let us know if you have any other queries. 

 

Thanks, 

Rachel.