[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Member Tables
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Collapse]Map Control
   [Expand]Getting Started
    Layers
   [Expand]Coordinate Systems
   [Collapse]Map Image Data
     Image Tile Providers
     Web Map Service Provider
     Georeferenced Image
   [Expand]GIS Data
   [Expand]Vector Data
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]End-User Features
   [Expand]Product Information
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Georeferenced Image

This topic explains how to use a map polygon (see MapPolygon) to display a raster georeferenced image on a map.

The following scenarios are possible:

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

At Design Time

  • Add a VectorItemsLayer (see VectorItemsLayer) to the MapControl.Layers collection. Assign a MapItemStorage instance to the VectorItemsLayer.Data property.

  • Add a MapPolygon (see MapPolygon) to the item storage.

  • Populate the map polygon's Points collection with geographical coordinates.

  • Click the polygon's MapImage.Source property ellipsis button to invoke the Image Picker dialog.

  • Use the Image Picker to import an image from local or project resources. Click OK.

  • Close the editors and run the application to see the result.

At Runtime

The following code assigns an image to a map polygon.

The following table lists the related API members:

Member Description
MapItemStorage (see MapItemStorage) The data adapter that stores manually added Vector Items.
MapPolygon (see MapPolygon) The class used to draw a polygon on a map.
MapPolygon.Points Gets or sets the map polygon point collection.
VectorItemsLayer (see VectorItemsLayer) A layer that displays a collection of vector elements.
MapPolygon.Image Returns options of the image that specifies the map polygon background.
MapImage.Source Gets or sets the image source.

Expanded An Image Does not Match a Map Polygon's Shape

This section describes the case when an image and the map polygon shape bounding boxes have different proportions or the polygon should display only a given image region.

To project such images to a polygon, populate the MapImage.MappingPoints collection with points that specify how to project the image to the map polygon surface. Mapping points are measured in normalized image coordinates. The top-left corner of the image is the origin of coordinates. The first mapping point is assigned to the first point in the MapPolygon.Points; the second mapping point to the second polygon point and so on. For this reason, the number of mapping points should be equal to the number of map polygon vertices. The following image shows mapping points marked in red.

At Design Time

  • Create a map polygon and specify an image source as you did in the previous section.

  • Use the Image Picker to import an image from local or project resources.

  • Click the MapImage.MappingPoints property's ellipsis button to invoke the Mapping Points Editor. Drag points (which mark the map polygon's vertices) in the image editor on the left to select an image region that should be mapped to the polygon. Click OK to close the Mapping Points editor.

  • Close the editors and run the application to see the result.

At Runtime

The following code assigns an image to a map polygon.

The following table lists the related API members:

Member Description
MapItemStorage (see MapItemStorage) The data adapter that stores manually added Vector Items.
MapPolygon (see MapPolygon) The class used to draw a polygon on a map.
MapPolygon.Points Gets or sets the map polygon point collection.
VectorItemsLayer (see VectorItemsLayer) A layer that displays a collection of vector elements.
MapPolygon.Image Returns options of the image that specifies the map polygon background.
MapImage.Source Gets or sets the image source.
MapImage.MappingPoints Gets or sets a collection of image points whose coordinates are in the [0.0,1.0] range.

Is this topic helpful?​​​​​​​