Category / Section
How to customize the markers in maps
1 min read
Map Markers can be customized by using the following steps,
Step1: Create a Maps sample,and include the necessary script files.
Step2: The default appearance of the marker can be customized by using the MarkerTemplate property. The Marker template property is available in the ShapeFileLayer.
XAML
<syncfusion:ShapeFileLayer.MarkerTemplate>
<DataTemplate>
<Grid Margin="-12,-30,0,0">
<Canvas>
<Image Source="pin.png" Height="30"/> </Canvas>
<Grid DataContext="{Binding Data}" Width="265">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Canvas Grid.Row="0" Grid.Column="0" Margin="0,0,106,0" >
<Image Source="mappath.png" Width="92" Canvas.Top="25" Canvas.Left="10"/>
<TextBlock Foreground="White" HorizontalAlignment="Center" FontSize="15" FontFamily="Segoe UI" Text="{Binding Name}" Canvas.Left="25" Canvas.Top="25" RenderTransformOrigin="0.515,-0.3"/>
</Canvas>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:ShapeFileLayer.MarkerTemplate>
The following screenshot shows the customization of Map Markers using Marker Template.
Output Image:
