How to add a button with interaction inside the marker tooltip of Xamarin Maps (SfMaps)
This section explains how to add a button with interaction inside the marker tooltip of Xamarin Maps (SfMaps).
Step 1: Create the SfMaps sample with all necessary NuGets. For more information, please refer to the Xamarin Map getting started documentation.
Step 2: Initialize the Map control and add an imagery layer into it, as shown in the following code sample.
[XAML]
<maps:SfMaps>
<maps:SfMaps.Layers>
<maps:ImageryLayer>
</maps:ImageryLayer>
</maps:SfMaps.Layers>
</maps:SfMaps>
Step 3: Add the required number of custom markers in the imagery layer with corresponding latitude and longitude values.
[XAML]
…
<maps:ImageryLayer>
<maps:ImageryLayer.Markers>
<local:CustomMarker Country="India"
Latitude="20.593683"
Longitude="78.962883" />
<local:CustomMarker Country="USA"
Latitude="38.8833"
Longitude="-77.0167" />
<local:CustomMarker Country="Brazil"
Latitude="-15.7833"
Longitude="-47.8667" />
</maps:ImageryLayer.Markers>
<maps:ImageryLayer.MarkerSettings>
<maps:MapMarkerSetting MarkerIcon="Image"
VerticalAlignment="Near"
ImageSource="pin.png"
IconSize="15">
</maps:MapMarkerSetting>
</maps:ImageryLayer.MarkerSettings>
</maps:ImageryLayer>
…
[C#]
public class CustomMarker: MapMarker
{
public string Country { get; set; }
}
Step 4: Create the template with buttons and click events, then assign it to the TooltipTemplate property of TooltipSetting. For more information, please refer to the following code sample.
[XAML]
<maps:MapMarkerSetting.TooltipSettings>
<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"
Clicked="Ok_Clicked" />
<Button Text="Cancel"
Margin="2"
Grid.Column="1"
BackgroundColor="LightGray"
Clicked="Cancel_Clicked" />
</Grid>
</StackLayout>
</DataTemplate>
</maps:TooltipSetting.TooltipTemplate>
</maps:TooltipSetting>
</maps:MapMarkerSetting.TooltipSettings>
[C#]
public partial class MainPage : ContentPage
{
…
private void Ok_Clicked(object sender, EventArgs e)
{
// It will be triggered when click the OK button.
}
private void Cancel_Clicked(object sender, EventArgs e)
{
// It will be triggered when click the Cancel button.
}
}
See also
How to set the Geo coordinates points to the ImageryLayer?
How to set markers in imagery layer?
How to load custom map in SfMaps?
How to calculate a zoom level based on map geo-bounds?
