We need to open the detailed popup when clicked on any marker on the maps.

Hello,

I need th fucntonailty where in as soon as i click on the marker its details with some action buttons opened in the form of popup or side tab above the map as a layer.


3 Replies 1 reply marked as answer

SS Sridevi Sivakumar Syncfusion Team February 9, 2021 10:39 AM UTC

Hi Ankita Mittal,

Greetings from Syncfusion.

We have checked the reported query and we have achieved it by using TooltipTemplate  Marker’s TooltipSettings  as per the below code snippet.


Code snippet[XAML]:
 
                 <maps:MapMarkerSetting.TooltipSettings> 
                      <maps:TooltipSetting ShowTooltip="True" ValuePath="Label" > 
                         <maps:TooltipSetting.TooltipTemplate> 
                              <DataTemplate> 
                                  <StackLayout BackgroundColor="Aqua" HeightRequest="60" WidthRequest="50" > 
                                          <Label Text="{Binding Label}"  /> 
                                        <Button Text="OK" Margin="2" BackgroundColor="LightGray"/> 
                                  </StackLayout> 
                        </DataTemplate> 
               </maps:TooltipSetting.TooltipTemplate> 
              </maps:TooltipSetting> 
        </maps:MapMarkerSetting.TooltipSettings> 


Please have a sample from the below link
https://www.syncfusion.com/downloads/support/forum/162341/ze/MapSample121359866

Let us know if you need any further assistance.

Regards,
Sridevi S. 
 
 



AM Ankita Mittal February 10, 2021 12:59 PM UTC

Hi Sridevi S.  

Thanks for the update.
But as i see this a very small popup saying OK button on it.
My requirement is to see the details of that particular marker on a big sized popup along with some other buttons i can give on that popup.

Thanks,
Ankita


SS Sridevi Sivakumar Syncfusion Team February 11, 2021 01:06 PM UTC

Hi Ankita Mittal,

Thanks for your update.


We would like to inform you that, you can customize the tooltip height and width of by changing the layout size in template as like a below code snippet.

Code snippet[XAML]:  
        <maps:TooltipSetting ShowTooltip="True"   BackgroundColor="Aqua" StrokeColor="Black" StrokeWidth="1" Duration="1000"> 
             <maps:TooltipSetting.TooltipTemplate> 
                <DataTemplate> 
                 <StackLayout HeightRequest="70" WidthRequest="130" > 
                      <Label Text="{Binding Country}"  HeightRequest="30" VerticalOptions="Start" FontSize="20" HorizontalTextAlignment="Center"  /> 
                        <Grid > 
                         <Grid.ColumnDefinitions> 
                          <ColumnDefinition Width="*"/> 
                          <ColumnDefinition Width="*"/> 
                            </Grid.ColumnDefinitions> 
                             <Button Text="Ok" Margin="2" BackgroundColor="LightGray"/> 
                            <Button Text="Cancel" Margin="2" Grid.Column="1" BackgroundColor="LightGray"/> 
                         </Grid> 
                    </StackLayout> 
             </DataTemplate> 
       </maps:TooltipSetting.TooltipTemplate> 

In the below code snippet, we have added one more button for your reference.

If you want to change the tooltip show duration value, then use Duration property of TooltipSetting.
 

For more information about tooltip customization
 


Please a modified sample from the below link 
https://www.syncfusion.com/downloads/support/forum/162341/ze/Map_Sample564671812

Additionally, You can add any other popup layout when clicking on marker by using the MarkerSelected Event. Here you can get notification when the marker is clicked and you can add popup layout based on it.

https://help.syncfusion.com/xamarin/maps/markers#events


Regards,
Sridevi S.
  
 


Marked as answer
Loader.
Up arrow icon