Our sample application’s source code is available to download below. It includes everything needed to compile and run the application using Visual C# Express. The SharpMap library, included in the download, is released under the GNU Lesser General Public License. For more information on that, see here.

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:

MessageBox.Show(_sharpMap.Zoom.ToString());

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;
    RefreshMap();
}

And zooming out does just the opposite:

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

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

private void btnZoomFull_Click(object sender, EventArgs e)
{
    _sharpMap.ZoomToExtents();
    RefreshMap();
}

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;

    RefreshMap();
}

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.

Adding Layer Styles

Adding colors to our countries layer is straightforward. In our form’s constructor, we simply define colors using the Style class:

countriesLayer.Style.Fill = Brushes.LightGreen;
countriesLayer.Style.EnableOutline = true;
countriesLayer.Style.Outline = Pens.DarkGreen;

We also switched the map’s background color:

_sharpMap.BackColor = Color.LightBlue;

Running the program now produces a better looking map:

Adding Labels

SharpMap also allows for creating label layers to add to the map that display text from another layer’s attributes. In our example, we can display the names of the countries on the map using the following code:

SharpMap.Layers.LabelLayer labelLayer =
     new SharpMap.Layers.LabelLayer("Country Names");
labelLayer.DataSource = countriesLayer.DataSource;
labelLayer.LabelColumn = "NAME";
labelLayer.Style.CollisionDetection = true;
labelLayer.Style.CollisionBuffer = new SizeF(10, 10);
labelLayer.MultipartGeometryBehaviour =
     SharpMap.Layers.LabelLayer.MultipartGeometryBehaviourEnum.Largest;
labelLayer.Style.Font = new Font(FontFamily.GenericSansSerif, 8);
_sharpMap.Layers.Add(labelLayer);

In the code, we create a LabelLayer, assign it to the same data source as our countries layer, choose the field that contains the country names (”NAME”), and then define some additional properties. Enabling collision detection avoids some overlapping labels while the multi-part geometry behavior instructs SharpMap to label the largest polygon if a country has multiple shapes.

The final result is not perfect because there are just too many country names to display at once. Setting the collision buffer to 10,10 reduces the number of labels drawn but which country names are displayed is completely arbitrary.

When we add code to the zoom in button in the next post, overlapping labels will become less of an issue:

SharpMap is an easy-to-use mapping library for use in web and desktop applications. It provides access to many types of GIS data, enables spatial querying of that data, and renders beautiful maps. The engine is written in C# and based on the .Net 2.0 framework. SharpMap is released under GNU Lesser General Public License. [quote source]

So let’s go ahead and program a simple mapping application in C# that uses SharpMap. As with our other tutorials, this example is rather primitive on purpose to highlight specifically how easy it use to use SharpMap. Readers are encouraged to use this tutorial as a basis for creating much richer applications.

Data Setup

Before beginning, we need to download a GIS dataset to display in the program. Our recent posts on QGIS discussed several options for download and viewing shapefiles. In part 3 of that tutorial, we downloaded a shapefile showing countries of the world so that shapefile will be used again in this project.

SharpMap Download

We first need to download the latest release of SharpMap here. Download the version 0.9 binary file and unzip it to your hard drive. The zip file contains 4 files but the only file we will use is the SharpMap.dll.

Create a New C# Application

Using the free Visual C# Express program, create a new C# windows application. Here are several links (link 1, link 2) if you need some background on using Visual C# Express.

The first step is to reference the SharpMap.dll we downloaded. Go to the Project menu iten, select Add Reference, then chose browse, and navigate to the SharpMap.dll. It should then appear in the solution explorer as a project reference.

After switching to the form’s design view, add a Picture Box control to serve as our map image area. We added 3 buttons and a label to produce something that looks like this:

Press F5 to run the program although nothing special should happen yet.

Next go ahead and copy the shapefile to a folder in the project’s directory. For example, copy the shapefile (remember it is actually 3 separate files) into the program’s bin\debug folder.

Now switch to the code view for the form and begin by adding some class-level variables and constants. The main class we will use throughout the program is the SharpMap.Map class. Because we have already referenced the SharpMap.dll, Visual C# Express should allow classes from SharpMap’s library to be defined just like any other C# class.

public partial class frmMap : Form
{
    //--> Define the SharpMap object
    SharpMap.Map _sharpMap;  

    //--> Set the zoom factor percentage
    const float ZOOM_FACTOR = 0.3f;

    //--> Define the data name and source
    const string DATA_NAME = "World Countries";
    const string DATA_PATH = @"world_adm0\world_adm0.shp";

Then in the form’s constructor, we first initialize the Map class with a size that matches the size of our Picture Box control.

public frmMap()
{
    //--> Initialize the map
    _sharpMap = new SharpMap.Map(new Size(600, 300));
    _sharpMap.BackColor = Color.White;

Now we can add our shapefile to the map via a 3-step process: (1) define a VectorLayer object, (2) set it’s data source, and (3) add it to the Map.

//--> Add the countries shapefile to the map
SharpMap.Layers.VectorLayer countriesLayer = new SharpMap.Layers.VectorLayer(DATA_NAME);
countriesLayer.DataSource = new SharpMap.Data.Providers.ShapeFile(DATA_PATH);
_sharpMap.Layers.Add(countriesLayer);

Next we need to set the map’s view to the entire extent of our layer using the ZoomToExtents() function.

//--> Zoom the map to the entire extent
_sharpMap.ZoomToExtents();
RefreshMap();

We also needed to alert SharpMap to draw our map and return it as an image. Because we will need to call this function from several spots in our program, a separate function was created called RefreshMap that does just that. The returned map image is then displayed in our Picture Box.

private void RefreshMap()
{
    //--> Use SharpMap to generate the map image
    picMap.Image = _sharpMap.GetMap();
}

Even without adding code to the buttons, we can still run the program at this point. Press F5 and you should see something like this:

The map image was indeed generated by SharpMap but it lacks a decent coloring scheme. Next time we will correct that and later we will add functionality to the zooming buttons.