How to: Add a Georeferenced Image to a Map

• Jun 20, 2019
• 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
• Display a Specified Image Area
• Apply Transformations to Fit an Image

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.

  XAML

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

XAML

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

  • ScaleTransform
  • SkewTransform
  • RotateTransform
  XAML

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