Using SharpMap (3)

October 28th, 2007

Our third post in this series (part 1, part 2) on SharpMap continues the development of a basic mapping application programmed in C#. We will now add some more functionality to the program.

SharpMap with Coloring

Zooming By Percentages

The SharpMap.Map class has a Zoom property that stores the map’s current width in the units of the map. To understand this better, add this line of code to the RefreshMap function we’ve already created:




Running the program now should immediately display a value of almost exactly 360. This makes sense because our data source is a shapefile of the world, our map units are decimal degrees, and the width of the earth is 360 degrees.

So “zooming” is really just a process of changing the the width of the map. Zooming in will require us to subtract from the SharpMap.Map.Zoom while zooming out adds a value to Zoom. We could simply use a constant value like 20 (degrees) but that is only applicable when our source data is in decimal degrees. If we switched to data in feet for example, adding or subtracting 20 feet from the a map width would takes hundreds of clicks to zoom in and out.

Instead, a better approach for zooming is to use a percentage change. Remember we defined a class-level constant in our the form’s code:


const float ZOOM_FACTOR = 0.3f;


We can use that value to zoom in or out 30% each time our zoom buttons are pressed.

Zooming Code

Double-clicking on the Zoom In button in our form will create the click event for the button. We only need to add 2 lines of code to change the Zoom value (i.e., map width).


private void btnZoomIn_Click(object sender, EventArgs e)
    _sharpMap.Zoom -= _sharpMap.Zoom * ZOOM_FACTOR;


And zooming out does just the opposite:


private void btnZoomOut_Click(object sender, EventArgs e)
    _sharpMap.Zoom += _sharpMap.Zoom * ZOOM_FACTOR;


Additionally, our Zoom to Full button click event looks like this:


private void btnZoomFull_Click(object sender, EventArgs e)


Panning Code

We also can easily implement panning in this application. A map pan (or recenter) will occur any time the user clicks on the map image. The mouse click location will then become the map center. This process requires two steps: (1) convert the “image” coordinates to real-world coordinates and (2) recenter the map.

Fortunately the SharpMap.Map class has a ImageToWorld method to convert the mouse click coordinates to the real-world location in the map. Then we just need the change the map’s center coordinates before refreshing the map. The code is added to Picture Box’s mouse click event and looks like this:


private void picMap_MouseClick(object sender, MouseEventArgs e)
    //--> Convert mouse click point from image coordinates to world coordinates
    SharpMap.Geometries.Point p = _sharpMap.ImageToWorld(new PointF(e.X, e.Y));
    //--> Recenter map
    _sharpMap.Center.X = p.X;
    _sharpMap.Center.Y = p.Y;


Running the program now allows the user to zoom in and out and pan around the map.


Next time we will add some more functionality to the application before moving on to another topic.

Continue to part 4