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: 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>