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.

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: