With local elections looming this is a great 20-30 minute project for any journalist wanting to create an interactive Google map of council ward boundaries.

For this you will need:

• A Google account with Docs
• A Scraperwiki account
• Access to webspace to host an html file

Firstly we want to scrape the council ward geometry data held by MaPit by mysociety.org and spit it out into a CSV file format that is compatible with Google’s mapping tools.

Getting the ID for the council ward

Go to the MaPit homepage and use the postcode search for a point in the town/city you want the ward data for. In the example I’ve searched using a Preston postcode.

Then in the results page find the council you want data for and note down the id number next to it.

Adapting a scraper to scrape that council ward’s geometry

Now login to your Scraperwiki and visit this page for reclosedev’s council ward scraper. Click ‘Copy’ and you’ll be taken to a code editor page.

On Line 10 of the code you should see:

10: PARENT_ID = 2366  # Preston City Council

Change the 2366 value to the MaPit id of your council and change Preston City Council (anything after # is a comment and isn’t important to the code but it is useful to keep track of what you’re scraping).

Once you’d done this hit ‘Save Scraper’  the ‘Back to scraper overview’. This will take you to your own Scraperwiki page where the scraper is saved. It would be useful at this point to click on the pen symbol next to the scraper name and rename it ‘Your Council Ward geometry data’.

Then click RUN (or CTRL+R) to run your scraper, and wait a while for it to complete (usually no more than a couple of minutes).

When it has completed running, click Back to scraper overview (upper right) and on the section titled This scraper’s datastore click the swdata tab and you should see something similar to this:

The first column contains the shape/geometry data of the council ward and the third column contains its name. Does it look right? Then hit download (in the upper right of this image) and choose CSV as the format.

CSV or comma separate values is an open table format readable by Excel, OpenOffice and Google Docs and any text editor.

We’re going to use Google Fusion Tables to convert the data to a map.

Mapping the data

Head over to your Google Docs account (or Drive if you’ve been switched over) and hit Create > Table. When it asks you to import a new table choose and upload the CSV file you downloaded. On the next page you’ll be asked to specify the columns to import, leave this page as default and click Next.

On the next page name your table and attribute the data to the MaPit. Click Finish. We’re nearly there!

Under the Visualize menu item click Map and you’ll probably see a red blob similar to this.

If you want to make it prettier you can style this clicking ‘Configure styles’  and changing the settings for ‘Polygons‘.

When you’re happy with the settings for that click inside one of your council wards. You should get a window like this:

Not all that informative is it? To make it a bit more useful click ‘Configure info window’ then select the ‘Custom’ tab, delete what’s there and enter this code.

<div class='googft-info-window' style='font-family: sans-serif'>
 <h2><a href="http://mapit.mysociety.org/area/{id}.html" target="_blank">{name}</a></h2><br>
 </div>

Which will give you a link to the MapIt within the information box:

The final step is to embed this map in your webpage.

First click ‘Share‘ in the top right corner of the table page (not the Google+ sharebox) and change to either Public or Unlisted. Then hit File > About and note down the Numeric ID.

Go to the FusionTables LayerWizard and enter this id in the first box. For location column select ‘kml‘ then hit ‘Put layer on map‘.

Optional: Click ‘Add a search feature‘ and ‘select based search‘. For ‘Select Label‘ enter Search by ward name and for ‘Column to query‘ select ‘name’. Then add. What this allows you to do is to easily select the ward you want to view.

Zoom in to the Preview map to how you want the map displayed. Then copy and paste the code generated below into an html editor or plain text editor of your choice.

Replace lines 4-6

<style>
 #map-canvas { width:500px; height:400px; }
 </style>

with this

<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0; padding: 0 }
 #map-canvas { height: 100% }
 </style>

Then cut line 43

<div id="map-canvas"></div>

and paste it at the end of the page between </div> and </body> like so…

Save the file with the .html extension and try opening it in your browser. It should look a little like this.

Upload this page to your webspace. Now you can either link to it or embed it in an iframe. This sample code should work for most purposes.

Ta da!

This is really just scratching the surface of what Scraperwiki and Fusion Tables can do but I hope it served as an easy-ish introduction to them both. If this tutorial did not work for you or if you have any questions then leave a comment and I’ll help out as much I can.