Writing GIS and Mapping Software for .NET

// Next, scale all points so that the viewport fits inside the form.
transform.Scale(this.Width / viewport.Width,
this.Height / -viewport.Height, MatrixOrder.Append);

You may have noticed how, for vertical scale, a negative sign is used. This is because projected coordinate systems have a Y-axis which is the opposite of pixel coordinate systems. In other words, greater Y values travel up in projected coordinates, whereas greater Y values in pixel coordinates travel down. A negative sign here prevents the image from being displayed upside-down.

Since we're using GDI+ for this example, all painting is done using a Graphics class, typically during an OnPaint method. Thankfully, we can apply our transformation and scale easily by assigning the Transform property of the Graphics object to our Matrix. With this in place, we can now call paint methods such as DrawLine using projected coordinates! As a result, painting objects becomes rather trivial:

protected override void OnPaint(PaintEventArgs e)
{
// Apply this transform to all graphics operations
e.Graphics.Transform = transform;

// Now draw nebraska using a green interior and black outline
e.Graphics.FillPolygon(Brushes.Green, projectedCoordinates);
e.Graphics.DrawPolygon(Pens.Black, projectedCoordinates);
}

Have a Good Aspect

In this article, we're dealing with two rectangles: the "viewport," a projected area to be painted, and the Form itself, where everything will be displayed. If the shape of the viewport differs greatly from the shape of the Form, however, distortion can occur (see the "Before" picture below). To fix this problem, we must make the shape of the viewport match the shape of the Form. This is done by adjusting the "aspect ratio" of the viewport.

Figure 1.5: The state of Nebraska is drawn with no correction (left), then with aspect ratio correction (right) to preserve its shape.

Aspect ratio is calculated by dividing the width of a rectangle by its height. For example, if the width of a rectangle were ten pixels, and its height were twenty pixels, then the aspect ratio would be 0.5. To adjust the aspect ratio of the viewport, its aspect ratio is compared to the aspect ratio of the rectangular Form itself. If the viewport's aspect ratio is greater than the Form's, the viewport's height is increased. Otherwise, the viewport's width is increased. The resulting code looks like this:

// Calculate the aspect ratio of the Form
float pixelAspectRatio = (float)this.Width / this.Height;

// Calculate the aspect ratio of the viewport
float projectedAspectRatio = viewport.Width / viewport.Height;

// Make a copy of the viewport that we can change
RectangleF adjustedViewport = viewport;

// Is the Form's aspect ratio larger than the viewport's ratio?
if (pixelAspectRatio > projectedAspectRatio)
{
// Yes. Increase the width of the viewport
adjustedViewport.Inflate((pixelAspectRatio * adjustedViewport.Height - adjustedViewport.Width)/ 2,0);
}
// Is the viewport's aspect ratio larger than the form's ratio?
else if (pixelAspectRatio < projectedAspectRatio)
{
// Yes. Increase the height of the viewport
adjustedViewport.Inflate(0, (adjustedViewport.Width / pixelAspectRatio - adjustedViewport.Height) / 2);
}

… with the aspect ratio adjusted, all geographic objects painted will now preserve their shape even as the Form's shape changes.

Navigating a Map

Now that we have the ability to paint a portion of a map, the final step in this example is to implement some form of navigation. Panning a map means shifting the viewport without changing its size. Zooming, however, is somewhat counter-intuitive: to zoom a map in, you must make the projected viewport smaller. A smaller viewport means a greater scale factor is applied.

If we're using the PointF class to represent projected coordinates, we can use the RectangleF class to represent the projected viewport. Zooming becomes a matter of calling the Inflate method to either shrink or grow the projected viewport to zoom in or out, respectively. Another important thing to mention here is the concept of "zooming by percentage." Zooming should always be done using a percentage of the current viewport. Otherwise, zooming will appear to have an exaggerated effect the more you zoom in, and closer to no effect as you zoom out:

public void ZoomIn()
{
// First, get the width of the viewport, then calculate 10% of it
float zoomWidthAmount = -viewport.Width * 0.10f;
float zoomHeightAmount = -viewport.Height * 0.10f;

// Next, apply the amounts to shrink (yes, shrink) the viewport to zoom in
viewport.Inflate(zoomWidthAmount, zoomHeightAmount);

// And repaint
Invalidate();
}

public void ZoomOut()
{
// First, get the width of the viewport, then calculate 10% of it
float zoomWidthAmount = viewport.Width * 0.10f;
float zoomHeightAmount = viewport.Height * 0.10f;

// Next, apply the amounts to shrink (yes, shrink) the viewport to zoom in
viewport.Inflate(zoomWidthAmount, zoomHeightAmount);

// And repaint
Invalidate();
}

Developers may recognize how easily these methods can be plugged into the MouseWheel event of a Form. Panning methods are just as straightforward, but involve use of the Offset method:

public void PanUp()
{
// First, get the height of the viewport, then calculate 10% of it
float zoomHeightAmount = -viewport.Height * 0.10f;

// Shift the viewport by this amount
viewport.Offset(0.0f, zoomHeightAmount);
}

public void PanDown()
{
// First, get the height of the viewport, then calculate 10% of it
float zoomHeightAmount = viewport.Height * 0.10f;

// Shift the viewport by this amount
viewport.Offset(0.0f, zoomHeightAmount);
}

... again, you may have already recognized how to plug these methods into the KeyDown event. With these methods implemented, you can now explore your map at any zoom level. If you are familiar with parts one and two of this article, you are well on your way to developing a commercial application which can plot your GPS location, along with all kinds of geographic features. Whether your intent is to draw points, lines or polygons, the approach is the same.

Play It Backwards

At this point, we've successfully drawn a map and provided a way to pan and zoom. But it would be helpful to be able to see where the mouse is pointing, but in terms of geographic or projected coordinates, not pixel coordinates. So, we'll add some code into the MouseMove event of the Form which will show the mouse's location in all three coordinate systems.

Conversion starts with pixel coordinates, which are then converted to projected coordinates using the inverse of the Matrix we set up earlier in this article. Finally, the Deproject method of our projection is used to convert the projected coordinate back into its geographic equivalent. The code will look like this:

protected override void OnMouseMove(MouseEventArgs e)
{
/* When the mouse is moved over the map, show the coordinate the mouse
* is hovering over, in all three coordinate systems: pixel, projected,
* and geographic.
*/

/* We use a Matrix to convert from projected coordinates to pixel
* coordinates. The *inverse* of this matrix is used to convert pixels
* back into projected coordinates.
*/

// First, make a copy of the current transform
Matrix reverseTransform = transform.Clone();

// Next, invert the transform
reverseTransform.Invert();

// We can now use this to calculate a projected coordinate.
Point[] projectedCoordinate = new Point[] { e.Location };
reverseTransform.TransformPoints(projectedCoordinate);

/* "Points" now contains projected coordinates. Use our projection to
* convert this into geographic (latitude/longitude) coordinates.
*/
PointF geographicCoordinate = plateCaree.Deproject(projectedCoordinate[0]);

// Finally, display all three coordinates: pixel, projected, geographic
Console.WriteLine("Pixel: " + e.Location.ToString());
Console.WriteLine("Projected: " + projectedCoordinate[0].ToString();
Console.WriteLine("Geographic: " + geographicCoordinate.ToString();
}

… with this code, you can now freely convert between all three coordinate systems, in both directions.

Conclusion

The task of displaying geographic data on-screen involves conversion of the data to two other coordinate systems. Map projections are used to flatten 3D coordinates into 2D coordinates, and then matrix math is used to actually paint geographic data in a meaningful way. Panning and zooming a map involves changing the location and size of the viewport, and navigation is typically tied into keyboard and mouse events. The aspect ratio of the viewport is adjusted to match the aspect ratio of the Form to prevent distortion. Finally, an inverse of the Matrix is used to convert coordinates from pixel to projected, and the Deproject method of the projection converts the projected coordinate back into its geographic equivalent.

There are many topics which we have yet to cover in order to develop a commercial-quality mapping application. Topics such as geographic data sources, spatial indexing, vector normalization, and paint optimization could easily take up another several articles. Many commercial components for .NET exist which address these topics. However, this article can at least help you to gain a solid understanding of how to display geographic data in your own .NET applications.