How to: Customize the Appearance of a Map Pushpin

Jun 07, 2019

This example demonstrates how to implement a custom pushpin using its template.

To accomplish this, it is necessary to create a ControlTemplate that contains the StackPanel with a custom pushpin image and TextBlock (specifies the pushpin title). Then, add this data template to a window’s resource and apply it to a map pushpin via the MapPushpin.MarkerTemplate property.

MainWindow.xaml

xaml

<Window x:Class="MapShape_Template.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
        Title="MainWindow" Height="350" Width="525" >
    <Window.Resources>
        <DataTemplate x:Key="pushpin">
            <StackPanel ToolTipService.ToolTip="{Binding Path=MapItem.Information}" Margin="-30 -60" >
                <Image Source="MyPushpin.png" />
                <TextBlock 
                    Margin="6"
                    Foreground="Blue"
                    Text="{Binding Path=MapItem.Text}" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <dxm:MapControl ZoomLevel="5" CenterPoint="41.88,-87.63" >
            <dxm:ImageTilesLayer>
                <dxm:ImageTilesLayer.DataProvider>
                    <dxm:BingMapDataProvider />
                </dxm:ImageTilesLayer.DataProvider>
            </dxm:ImageTilesLayer>
            <dxm:VectorLayer>
                <dxm:MapItemStorage x:Name="mapItems" >
                    <dxm:MapPushpin Location="41.88,-87.63" 
                                     Text="Chicago" 
                                     Information="Test Chicago Information"
                                     MarkerTemplate="{StaticResource pushpin}" />

               </dxm:MapItemStorage>
            </dxm:VectorLayer>
        </dxm:MapControl>
    </Grid>
</Window>