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