Articles in this section
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:

Marker customization in SfMaps control

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied