Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Customize the Appearance of a Map Pushpin

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.

<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>
See Also