How to: Customize the Appearance of a Map Pushpin

• Apr 15, 2018

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.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-provide-a-custom-pushpin-for-a-map-e4240.

MainWindow.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:OpenStreetMapDataProvider Kind="Road" />
                </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>