I’ve got various shapefiles that I need to render on Google Maps. I built Mapper.js as a JQueryUI plugin to make these kind of mapping tasks easy, however that uses GeoJSON and I wanted to start using TopoJSON.

The first problem I hit was that, when using MapShaper, you can only process the .shp file, which means you don’t get any of the meta data (shape ID or name, etc.) that would be useful when trying to manipulate or style the shapes based on the relevant data (e.g. municipality / district / province / etc.).

I’m sure there’s an easy way to do this, but since I like reinventing wheels, I decided to build my own tool.

So here is the link to my TopoJSON Property Editor, which lets you process a TopoJSON file, and then click on the mapped polygons to get a popup that lets you set properties on the underlying TopoJSON feature/geometry object.

TopoJSON Property Editor on bl.ocks.org

TopoJSON Property Editor on gist.github.com

So now I can click on a district in the map, and set the (missing) ID value, then copy the resulting TopoJSON out to my new project.

TopoJSON Property Editor

I’ve been adding some of the sites that have been developed with PDG to a demo domain, www.pdgdemo.co.za.

So if you’re interested in checking out some of the systems that we’ve built, please visit the link above.

Here’s a screenshot of one of the data visualisations:

Performance by municipality mapped on an HTML canvas

Performance by municipality mapped on an HTML canvas

electionmap.co.za was probably the first election mapping website in South Africa, going live in 2013, before the flurry of election mapping websites that came along with the 2014 South African National Elections.

It was developed for the Code4SA hackathon, for which it won a prize.

Unfortunately, Code4SA have since changed their elections API, so the site is currently broken. When I get some free time I’ll fix it up again.