How to: Add Vector Items to a Map Using XAML

• Jul 26, 2018

Follow the steps below to add vector items to a map control in XAML:

• Add a VectorItemsLayer object to the MapControl.Layers collection.
• Add vector items to the VectorItemsLayer.Items collection of the object.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HowToGenerateItems"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Map="using:DevExpress.UI.Xaml.Map"
    x:Class="HowToGenerateItems.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Map:MapControl>
            <Map:ImageTilesLayer>
                <Map:ImageTilesLayer.DataProvider>
                    <Map:BingMapDataProvider BingKey="Your Bing Key"/>
                </Map:ImageTilesLayer.DataProvider>
            </Map:ImageTilesLayer>
            <Map:VectorItemsLayer>
                <Map:MapPushpin ToolTipPattern="London">
                    <Map:MapPushpin.Location>
                        <Map:GeoPoint Latitude="51.507222" Longitude="-0.1275"/>
                    </Map:MapPushpin.Location>
                </Map:MapPushpin>
                <Map:MapPushpin ToolTipPattern="Rome">
                    <Map:MapPushpin.Location>
                        <Map:GeoPoint Latitude="41.9" Longitude="12.5"/>
                    </Map:MapPushpin.Location>
                </Map:MapPushpin>
                <Map:MapPushpin ToolTipPattern="Paris">
                    <Map:MapPushpin.Location>
                        <Map:GeoPoint Latitude="48.8567" Longitude="2.3508"/>
                    </Map:MapPushpin.Location>
                </Map:MapPushpin>
                <Map:MapPushpin ToolTipPattern="Berlin">
                    <Map:MapPushpin.Location>
                        <Map:GeoPoint Latitude="52.52" Longitude="13.38"/>
                    </Map:MapPushpin.Location>
                </Map:MapPushpin>
                <Map:MapPushpin ToolTipPattern="Madrid">
                    <Map:MapPushpin.Location>
                        <Map:GeoPoint Latitude="40.4" Longitude="-3.68"/>
                    </Map:MapPushpin.Location>
                </Map:MapPushpin>
            </Map:VectorItemsLayer>
        </Map:MapControl>
    </Grid>
</Page>