Introduction to QGIS

Presented at the 2011 CAR Conference, Raleigh, NC

Timothy C. Barmann
The Providence Journal


OR ...

Workshop objective

To make simple choropleth interactive map for a web page using QGIS, free open source mapping software.

Choropleth mapping

A choropleth map is a thematic map that has shaded or colored geographic regions to represent differing values, such as population density or per-capita income. It gives a snapshot of how a particular measurment or characteristic varies from place to place.

What we need


A collection of files that describe points, lines, and polygons. A shapefile can be used to represent town boundaries, roads, rivers, and lakes, etc.

It can also contain data about the things it describes, such as population, temperature, road types.

A shapefile has a file extension of .shp, and usually comes with one or more companion files with extensions dbf, prj, xml and shx.

The Census Bureau, as well as many state and local government agencies provide shapefiles.


The data you want to map, usually in the form of an Excel spreadsheet, Access or MySQL database, or CSV file.

GIS Software

Quantum GIS, or QGIS, is a widely-used open-source program for GIS work. It's available for free for Windows, Linux and Mac OSX platforms at

We'll use QGIS to join together the data we want to map with the geographic information stored in the shapefile. Then we'll export an image of the map, and some html code so we can create a web version of the map with live tooltips.

Other software

I'll assume you have access to Microsoft Excel. If not, you can use Open Office, a free office suite similar to Microsoft Office. You'll also need a simple text editor to create the web page for the map.

Let's get started

We're going to build a map that shows the change in population for each county in North Carolina between 2000 and 2008.

The shapefile we need can be found at Check the box for County and Equivalent (Current) and click download.

If you haven't done so already, download the files and software from the links at the top.

Shapefile and companion files

Unzip the shapefile you downloaded. These are the files contained in the zip file.

Preparing the data

Open the population spreadsheet. To make this exercise simpler, remove all the population columns except those for 2000 and 2008.

Delete the other extra rows and notes, as shown in the next slide.

Preparing the data (cont.)

Search and replace the county column to get rid of the space and the word "County" that follows the county names. There may be a period in front of each county name that needs to be removed. Add two more columns called "change" and "pct_chg" with the appropriate formulas.

Format the four columns with numbers as "general." We'll make the percent value look nice later.

Save the data file

Save the spreadsheet as a CSV file.

Load the shapefile into QGIS

Click on Layer and choose Add Vector Layer

Load the shapefile into QGIS (cont.)

Choose the shapefile of North Carolina counties you downloaded and unzipped from the Census bureau.

Working with the shapefile

Here's how it should look. The color may vary.

Open attribute table

Click on Layer and select Open Attribute Table.

Attribute table

The attribute table holds the data that came with the map as part of the shapefile.

We won't need to worry about most of these fields, except "NAME" which is going be our join field to match up the data from the CSV file we've prepared.

Get needed plugins

There are two plugins we need to complete the exercise: mmqgis and Html Image Map plugin.

Click on Plugins and if you don't see those listed, you'll need to download and install.

To do so, choose Fetch Python Plugins

Get needed plugins (cont.)

Click Add 3rd party repositories

Get needed plugins (cont.)

Click on the plugins tab and search for mmqgis, then click on install.

Get needed plugins (cont.)

Follow the same procedure for the Html Image Map plugin.

Import the CSV file

With the plugins installed, we're ready to import the CSV file that contains our Census population data.

Click on Plugins and choose mmqgis and Attributes Join from CSV File.

Import the CSV file (cont.)

Click browse to select the Census CSV file we saved earlier from Excel.

In the CSV File Field, choose County. And in the Join Layer Attribute, choose NAME. These are our two join fields.

For Output Shapefile, you can accept the default name. Save it to your working directory and do the same for the Not Found CSV Output List.

Make sure Add joined layer to project is checked, and click OK.

Import the CSV file (cont.)

If everything went correctly, you will see the new layer added to your project.

This would be a good time to save the project, if you haven't done so already.

Attribute Table with new data

If you open the attribute table again (click on Layer, then Open Attribute Table), you'll see that the new data has been joined with the data that was in the shapefile.

Format string fields to numbers

There's a problem with the data: the mmqgis plugin did not recognize the new number fields as being numbers. They are stored as strings instead. So QGIS can't properly use the data until it is converted to integers or reals.

To do that, first click on the pencil icon on the bottom row of icons to enter Editing mode. Then click on the calculator icon, the last icon on that row.

This launches the field calculator.

Format string fields to numbers (cont.)

In the field calculator, in the New field section, enter the name for a new column that will hold the number value for all the string values in the july_2008 field.

Choose Whole number (integer) for Output field type.

In the Operators section, click to real and that will begin an expression in the Field calculator expression box. Finish the expression by entering the source field, july_2008, and close the parenthesis.

Click OK.

Repeat this process for the July 2000 field as well.

Format string fields to numbers (cont.)

For the pct_chg field, in Output field type, choose Decimal number (real).

Change the Output field precision to 3.

Click OK.

Format string fields to numbers (cont.)

Finally, let's create a new column that will hold a string value we'll use as a tooltip. This will be the message the reader sees when the mouse is moved over a particular region of the map.

For Output field name, enter pct_str, choose Text (string) and make the Output field width 50.

In the Field calculator expression section, enter this formula:

NAME + ':' + to string(pct_chg * 100) + '%'

This concatenates the NAME field, which holds the county name, with the percent change value and formats it to look like a percentage.

Click OK.

Format string fields to numbers (cont.)

Now in the Attribute table, you'll see the new fields. Note that the values that are stored as strings appear flush left, while those that are stored as numbers are flush right.

Format string fields to numbers (cont.)

Important step: to save these changes, you must click the editing pencil icon again. Otherwise, these new columns will not be saved.

Coloring the map

We're ready to color the map, based on the Census data we've imported.

Click on Layers and choose Properties.

Coloring the map (cont.)

In the Layers Properties dialog box, on the left side, choose Symbology. You may need to move the scroll bar to see it.

For Legend type, choose Graduated Symbol.

For Classification field, choose pct_int.

For Mode, choose Equal Interval.

For Number of class, choose 6.

Click on Classify and the six classes will appear below, with colors and the ranges they represent.

Click Apply.

Coloring the map (cont.)

You should see the colors applied to the map, and the legend of colors and values in the Layers window.

This is the default color palette selected by QGIS. But we can change the colors and the ranges. To do that, go back into the Symbology options (Layers | Properties | Symbology).

Coloring the map (cont.)

Click on the range next to the first color and a dialog box will appear to allow you to change the range upper and lower values.

Coloring the map (cont.)

Let's make all the negative values the same color by entering 0 for Upper value.

Coloring the map (cont.)

We'll make that color bright red. Click on the green swatch next to the first range, and choose a new color.

Click OK.

Coloring the map (cont.)

We have to adjust the second range so it is large enough to hold the values that were part of the first range.

Click on the numbers for the second range, and change the Lower bound to .001.

Click Apply and OK.

Coloring the map (cont.)

Now we can immediately see which counties had population declines.

Making an interactive web map

Let's get our map ready to export.

Whatever you see in the map window will be in your final Html map.

I prefer to get rid of the default icons that QGIS places on maps: the copy right notice, a measurement bar and a North marker. These are the icons to change these settings.

Making an interactive web map (cont.)

Resize the QGIS window to get the map the size you want it to be on your web page.

Click the magnifying glass icon with the four outward-pointing areas to make sure you fill up any extra space.

Making an interactive web map (cont.)

We're ready to export our map and html code to create an interactive web map.

Click on Plugins, and choose Html Image Map Plugin and Image Map.

Making an interactive web map (cont.)

In the Html Image Map plugin, the image size is already set based on the dimensions of the QGIS map window.

If you don't like these dimensions, click cancel, resize the map window and try again.

Choose a filename. Note, enter the filename without the extension. The plugin will automatically append the .html to the filename you enter.

Uncheck all the boxes except onMouseOver attr. For that value, select pct_str, the field that holds the mouseover message.

Click OK.

Making an interactive web map (cont.)

If everything works properly, the plugin will create two files: An html page and an image with the extension png. Open up the html file with a text editor and copy all the code between the start tag and the end tag (including those tags).

Making an interactive web map (cont.)

Open up the web map template page you downloaded earlier. Paste the map code into this template file.

Change the src attribute to the name of the png file created by the Html Image Map plugin.

Save the web page file.

The final product

Open the web page file in your browser. If all went well, this is what you should see. Move your mouse over individual counties to see the population change percentage.

What we didn't cover

This only scratches the surface of what QGIS can do. You may want to explore the labeling functions; adding additional layers to the map to include roads and bodies of water; and the other ways to divide up the data into different classes, such as quantiles, which can produce a very different looking map.