Category / Section
How to change the default marker icon when selecting a marker in Xamarin.Forms maps (SfMaps)
1 min read
This article explains how to change the default marker icon to desired view on its selection in Syncfusion Xamarin.Forms Maps control as shown in the following image.
Previous UI customization has been achieved with the help of CustomView property from the MarkerSelected event as shown in the following code sample.
[XAML]
<ContentPage.Resources> <ResourceDictionary> <DataTemplate x:Key="selectedMarker"> <StackLayout > <Image Source="pin.png" Scale="1" Aspect="AspectFit " HorizontalOptions="StartAndExpand" VerticalOptions="Center" HeightRequest="15" WidthRequest="23" /> </StackLayout> </DataTemplate> </ResourceDictionary> </ContentPage.Resources> <maps:SfMaps x:Name="Map" > <maps:SfMaps.Layers > <maps:ImageryLayer MarkerSelected="Layer_MarkerSelected" ResetOldSelectedView="True"> <maps:ImageryLayer.MarkerSettings> <maps:MapMarkerSetting IconColor="Red" IconSize="13" MarkerIcon="Diamond"/> </maps:ImageryLayer.MarkerSettings> <maps:ImageryLayer.Markers> <maps:MapMarker Label="United States" Latitude="40" Longitude= "-101"/> <maps:MapMarker Label="Brazil" Latitude="-15.7833" Longitude= "-52" /> <maps:MapMarker Label="Congo" Latitude="-1.6" Longitude= "24.4" /> <maps:MapMarker Label="Kazakhstan" Latitude="49.9" Longitude= "72.23" /> <maps:MapMarker Label="Australia" Latitude="-20.54" Longitude= "134.10" /> </maps:ImageryLayer.Markers> </maps:ImageryLayer> </maps:SfMaps.Layers> </maps:SfMaps>
[C#]
private void Layer_MarkerSelected(object sender, MarkerSelectedEventArgs e) { e.CustomView = this.Resources["selectedMarker"] as DataTemplate; }
See also
How to customize the bubble marker in Xamarin.Forms Maps (SfMaps)
How to customize the data labels in Xamarin.Forms Maps (SfMaps)
How to customize the legend in Xamarin.Forms Maps (SfMaps)