How to: Add a Georeferenced Image to a Map

  • 2 minutes to read

This example demonstrates how to use a map polygon to display a raster georeferenced image on a map.

An Image Matches a Map Polygon's Shape

This section describes the case when a Map Control cuts a shape from an image without further geometric transformation.

  • Add a VectorLayer to the MapControl.Layers collection.

  • Assign a MapItemStorage object to the VectorLayer.Data property.

  • Add a MapPolygon object to the storage.

  • Populate the MapPolygon.Points collection with geographical coordinates.

  • Use an ImageBrush object to specify the map polygon's Fill property.

  • The ImageBrush.ImageSource property allows you to specify an image.

    <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:MapShapeImage"
            xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
            x:Class="MapShapeImage.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid>
            <dxm:MapControl CenterPoint="40.7829, -73.9654"
                            ZoomLevel="13">
                <dxm:MapControl.Layers>
                    <dxm:ImageLayer>
                        <dxm:OpenStreetMapDataProvider/>
                    </dxm:ImageLayer>
                    <dxm:VectorLayer EnableSelection="False">
                        <dxm:VectorLayer.Data>
                            <dxm:MapItemStorage>
                                <dxm:MapPolygon EnableHighlighting="False">
                                    <dxm:MapPolygon.Fill>
                                        <ImageBrush ImageSource="Images\CentralPark.png"/>
                                    </dxm:MapPolygon.Fill>
                                    <dxm:MapPolygon.Points>
                                        <dxm:GeoPoint Latitude="40.767809" Longitude="-73.981249" />
                                        <dxm:GeoPoint Latitude="40.768458" Longitude="-73.981477" />
                                        <dxm:GeoPoint Latitude="40.800273" Longitude="-73.958291" />
                                        <dxm:GeoPoint Latitude="40.800396" Longitude="-73.957846" />
                                        <dxm:GeoPoint Latitude="40.797011" Longitude="-73.949683" />
                                        <dxm:GeoPoint Latitude="40.796626" Longitude="-73.949541" />
                                        <dxm:GeoPoint Latitude="40.764918" Longitude="-73.972547" />
                                        <dxm:GeoPoint Latitude="40.765230" Longitude="-73.973245" />
                                        <dxm:GeoPoint Latitude="40.764704" Longitude="-73.973741" />
                                    </dxm:MapPolygon.Points>
                                </dxm:MapPolygon>
                            </dxm:MapItemStorage>
                        </dxm:VectorLayer.Data>
                    </dxm:VectorLayer>
                </dxm:MapControl.Layers>
            </dxm:MapControl>
        </Grid>
    </Window>
    

Display a Specified Image Area

You can use the ImageBrush.Viewbox property to limit the image area shown in the map polygon.

<dxm:MapPolygon EnableHighlighting="False">
    <dxm:MapPolygon.Fill>
        <ImageBrush ImageSource="Images\Central-park1.png" 
                    Stretch="UniformToFill" 
                    Viewbox="0.09,0.085, 0.88,0.8">                         
        </ImageBrush>
    </dxm:MapPolygon.Fill>
    <dxm:MapPolygon.Points>
        <dxm:GeoPoint Latitude="40.767809" Longitude="-73.981249" />
        <dxm:GeoPoint Latitude="40.768458" Longitude="-73.981477" />
        <dxm:GeoPoint Latitude="40.800273" Longitude="-73.958291" />
        <dxm:GeoPoint Latitude="40.800396" Longitude="-73.957846" />
        <dxm:GeoPoint Latitude="40.797011" Longitude="-73.949683" />
        <dxm:GeoPoint Latitude="40.796626" Longitude="-73.949541" />
        <dxm:GeoPoint Latitude="40.764918" Longitude="-73.972547" />
        <dxm:GeoPoint Latitude="40.765230" Longitude="-73.973245" />
        <dxm:GeoPoint Latitude="40.764704" Longitude="-73.973741" />
    </dxm:MapPolygon.Points>
</dxm:MapPolygon>
</Window>

Apply Transformations to Fit an Image

This section describes the case when an image cannot be displayed in a polygon without geometric transformation.

  • Add a map polygon as you did in the previous section.

  • Use the Brush.RelativeTransform property to apply a group of transformations that adjust an image to the map polygon's shape. The example below uses the following transformations:

    <dxm:MapPolygon EnableHighlighting="False">
        <dxm:MapPolygon.Fill>
            <ImageBrush ImageSource="Images\CentralPark2.png" Stretch="Uniform" >
                <ImageBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1.2" CenterX="0.5" CenterY="0.5"/>
                        <SkewTransform CenterX="0.5" CenterY="0.5" AngleX="0" AngleY="-20"/>
                        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="40"/>
                    </TransformGroup>
                </ImageBrush.RelativeTransform>
            </ImageBrush>
        </dxm:MapPolygon.Fill>
        <dxm:MapPolygon.Points>
            <dxm:GeoPoint Latitude="40.767809" Longitude="-73.981249" />
            <dxm:GeoPoint Latitude="40.768458" Longitude="-73.981477" />
            <dxm:GeoPoint Latitude="40.800273" Longitude="-73.958291" />
            <dxm:GeoPoint Latitude="40.800396" Longitude="-73.957846" />
            <dxm:GeoPoint Latitude="40.797011" Longitude="-73.949683" />
            <dxm:GeoPoint Latitude="40.796626" Longitude="-73.949541" />
            <dxm:GeoPoint Latitude="40.764918" Longitude="-73.972547" />
            <dxm:GeoPoint Latitude="40.765230" Longitude="-73.973245" />
            <dxm:GeoPoint Latitude="40.764704" Longitude="-73.973741" />
        </dxm:MapPolygon.Points>
    </dxm:MapPolygon>