qgis basics for journalists

Export an interactive map

QGIS plugins allow you to make interactive image maps. While this isn't exactly the best option for a great user experience, it can work in a pinch. We'll also use some JavaScript libraries to add some nice tool tips.

Go to the Plugins menu and select Manage Plugins. Make sure the the HTML Image Map and the fTools plugins are checked.

Hide both of the point layers in your project.

Click on the layer with the joined data to select it.

Go to the Plugins menu and select HTML Image Map Plugin -> Image Map.

Set image size

This plugin exports the entire Layout area so setting the image size correctly at the start can save you a lot of time later on. Look for the Set Map/Image size area.

Change the Width to the width of the content area on your target web page. In my case, it's 620 pixels.

Click the Set button and the size of the Layout area changes. Go to the View menu and select Zoom full. This ensures that the map takes up the maximum amount of space.

This is a vey horizontal map and we don't want to export the white areas. Change the Height to 350 pixels and click the set button. The layout area changes again but this time the map gets a lot smaller.

Go to the View menu and select Zoom full. That's better but I want to get as close as I can to the edges. Change the Height to 350 pixels and click the Set button. Go to the View menu and select Zoom full.

While this is not the most scientific way to set your image size, it works. With practice, it usually only takes a few tries to get right.

Set the save location and filename

I have included a a collection of files in the Export folder from Tim Henderson's tutorial on this same subject. I have edited the files to refine the look and make it easier for beginners to update. The Export folder has five files that you can reuse, so you might want to make a copy now.

Click the Browse button and navigate to the Export folder.

Save the file as alameda-total-housing.

Set the mouse interaction

This plugin allows you to create many mouse actions. We only want to use the onMouseOver attribute.

Uncheck all the boxes except for onMouseOver and set the drop-down menu to TOTAL_HOUS.

When you're done it should look like the image below. Click OK and the plugin exports a set of files.

html image map output

Edit the html

Navigate to the Export folder in a finder window and open mymap.html in a text editor like TextMate or TextWrangler. All the instructions we are about to go through are duplicated as comments in the HTML file.

Look inside the <head> tags. The first two scripts import two JavaScript libraries. You may have to update the URLs when you load them on your Web server.

The fourth script is where you add your ToolTip text.

The <style> tag contains the CSS used to style the map text. You can change these to match the styles you use on your site.

Next look in the <body> tag for the following code and update the text. It should be around line 38.

<h3 class="grhead">Add your headline here</h3>

<p class="chatter">Add explainer text for your map here.</p>

Next, edit the colors in the key. Look for the table and find each instance of something that looks like this: "#feedde". These are your hexadecimal colors in sequential order (if this is new to you, read this). Each color is followed by label text (label 1, etc.) edit these to match your classes.

Find and edit your Source text.

Next, perform a Find for my-map and Replace it with the name of your file. In this case it will be alameda-total-housing. Four changes should be made.

Remember to Save.

Now for the final step. Open the html file that the plugin created in a text editor. It should be called alameda-total-housing.html

Look for the code that starts with <area shape="polygon". It should be around line seven. These are the coordinates for all of your polygons. We need to get them into the my-map.html file.

Select all the code from <area shape="polygon" all the way to the bottom but stop before the </map> tag. Copy the code and return to my-map.html.

Find and select the text PASTE AREA POLYGON CODE HERE, then Paste the code.

Save the code and open the page in a web browser. It should look like this: